JavaScript异步编程——03-Ajax传输json和XML

在JavaScript中，可以使用XMLHttpRequest或fetch API来进行Ajax请求，并传输JSON或XML数据。以下是使用这两种方法的示例代码：

使用XMLHttpRequest传输JSON数据:

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

使用fetch API传输JSON数据:

var data = {
  key: "value"
};
 
fetch("your_endpoint", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.log("Error:", error));

使用XMLHttpRequest传输XML数据:

var xhr = new XMLHttpRequest();
xhr.open("POST", "your_endpoint", true);
xhr.setRequestHeader("Content-Type", "text/xml");
 
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseXML);
  }
};
 
var xmlData = `
  <root>
    <element>value</element>
  </root>
`;
 
xhr.send(xmlData);

使用fetch API传输XML数据:

var xmlData = `
  <root>
    <element>value</element>
  </root>
`;
 
fetch("your_endpoint", {
  method: "POST",
  headers: {
    "Content-Type": "text/xml"
  },
  body: xmlData
})
.then(response => response.text())
.then(text => (new DOMParser()).parseFromString(text, "text/xml"))
.then(xml => console.log(xml))
.catch(error => console.log("Error:", error));

注意：在实际应用中，你需要替换your_endpoint为你的服务器端点。以上代码中的xhr.responseText和response.text()返回的是字符串形式的响应，如果响应是XML，可以使用response.text()后进行DOMParser解析成XML文档。