Ajax传输Json和xml_XML函数

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它可以通过传输JSON或XML格式的数据来实现前后端的交互，其中XML函数用于解析和操作XML数据。

Ajax传输Json和xml_XML函数

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，它通过在后台与服务器进行少量数据交换，实现网页的异步更新，这使得网页可以在不影响显示和行为的情况下，对网页进行即时更新。

在AJAX中，我们通常使用JSON或XML格式的数据进行传输，这两种格式都有各自的优点和缺点，选择哪种格式取决于你的具体需求。

JSON和XML的区别

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，它基于JavaScript Programming Language, Standard ECMA262 3rd Edition December 1999的一个子集，JSON采用完全独立于语言的文本格式，但是也使用了类似于Cfamily languages（包括C, C++, C#, Java, JavaScript, Perl, Python等）的习惯，这些特性使JSON成为理想的数据交换语言。

XML（Extensible Markup Language）是一种可扩展标记语言，可以用来标记数据和定义数据类型，它非常适合万维网传输，提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

Ajax传输JSON和XML

在Ajax中，我们可以使用XMLHttpRequest对象来发送请求并接收响应，对于JSON和XML，处理方式略有不同。

传输JSON

当使用JSON时，我们可以将JavaScript对象直接转换为JSON字符串，然后将其作为请求体发送，在接收到响应后，我们可以使用JSON.parse()方法将JSON字符串解析为JavaScript对象。

以下是一个简单的示例：

var xhr = new XMLHttpRequest();
xhr.open("POST", "/server", true);
xhr.setRequestHeader("ContentType", "application/json");
var data = JSON.stringify({"key": "value"});
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var json = JSON.parse(xhr.responseText);
    }
}
xhr.send(data);

传输XML

当使用XML时，我们需要创建一个XML文档，并将其序列化为字符串，然后将其作为请求体发送，在接收到响应后，我们可以使用DOM解析器将XML字符串解析为XML文档。

以下是一个简单的示例：

var xhr = new XMLHttpRequest();
xhr.open("POST", "/server", true);
xhr.setRequestHeader("ContentType", "application/xml");
var doc = document.implementation.createDocument("", "", null);
var root = doc.createElement("root");
doc.appendChild(root);
var child = doc.createElement("child");
child.appendChild(doc.createTextNode("value"));
root.appendChild(child);
var serializer = new XMLSerializer();
var xmlStr = serializer.serializeToString(doc);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var xmlDoc = xhr.responseXML;
    }
}
xhr.send(xmlStr);

是Ajax传输JSON和XML的基本介绍和示例代码，在实际使用中，可能需要根据具体的业务需求和服务器端的实现来调整代码。

下面是一个简单的介绍，展示了在Ajax传输中处理JSON和XML的一些常用函数。

功能	JSON处理	XML处理
创建对象	使用JSON.stringify()将JavaScript对象转换为JSON字符串。	使用XMLSerializer将DOM树转换为XML字符串。
解析字符串	使用JSON.parse()将JSON字符串转换为JavaScript对象。	使用DOMParser将XML字符串解析为DOM树。
发送数据	通常在Ajax请求中作为请求体发送，需要设置contentType为application/json。	通常在Ajax请求中作为请求体发送，需要设置contentType为text/xml。
接收数据	使用Ajax的dataType: 'json'自动将响应内容解析为JSON对象。	使用Ajax的dataType: 'xml'自动将响应内容解析为XML DOM。
读取数据	使用JavaScript对象的属性访问。	使用XPath或者DOM API遍历和访问节点。
设置请求头	在发送Ajax请求时，通常包含如下头信息：'ContentType': 'application/json'	在发送Ajax请求时，通常包含如下头信息：'ContentType': 'text/xml'
错误处理	键不存在或类型错误时可能会抛出异常。	解析错误通常会导致DOMException错误。

以下是一些具体的使用示例：

JSON 示例

// 创建JSON对象并发送
var myObject = { name: "John", age: 30 };
var myJSON = JSON.stringify(myObject);
$.ajax({
  type: "POST",
  url: "myService",
  data: myJSON,
  contentType: "application/json",
  success: function(response) {
    // 处理返回的JSON
  }
});
// 接收JSON数据
$.ajax({
  type: "GET",
  url: "myService",
  dataType: "json",
  success: function(data) {
    console.log(data.name); // 访问解析后的JSON对象
  }
});

XML 示例

// 创建XML并发送
var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(someXmlNode);
$.ajax({
  type: "POST",
  url: "myService",
  data: xmlString,
  contentType: "text/xml",
  success: function(response) {
    // 处理返回的XML
  }
});
// 接收XML数据
$.ajax({
  type: "GET",
  url: "myService",
  dataType: "xml",
  success: function(xml) {
    $(xml).find('nodeName').each(function() {
      console.log($(this).text()); // 遍历XML DOM节点
    });
  }
});

在实际开发中，处理JSON和XML的方式有所不同，主要是由于它们的数据结构和访问方式存在差异，JSON更简洁，通常是现代Web应用的首选数据交换格式，而XML则在一些特定的遗留系统中仍然在使用。