JavaWeb——AJAX(4)

在请求和响应中使用XML

1、XML的用法

AJAX中的x是xml，xml是一种数据格式，用于标记电子文件使其具有结构性的标记语言。在AJAX中可以XMLHttpRequest对象可以使用普通文本进行通信，也可以用XML文本与服务器进行通信。主要用法有以下两个方面。

• XML格式向服务器发送请求
• XML格式接收服务器的响应信息

不过需要注意的是，使用XML格式的文本发送会导致占用空间多，响应慢等缺点，因为要为每个属性及属性值加上标签。

2、使用XML的要求

XMLHttpRequest对象向服务器发送数据是以<名=值>对的格式发送。例如：

firstName=Larry
lastName=Gullahorn
street=9018 Heatherhorn Drive
city=Rowlett
state=Texas
zipCode=75080

在发送函数中，需要以下代码，把这些信息放到url中。

  var firstName = document.getElementById("firstName").value;
  var lastName = document.getElementById("lastName").value;
  var street = document.getElementById("street").value;
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  var zipCode = document.getElementById("zipCode").value;

  // Build the URL to connect to
  var url = "/scripts/saveAddress.php?firstName=" + escape(firstName) +
    "&lastName=" + escape(lastName) + "&street=" + escape(street) +
    "&city=" + escape(city) + "&state=" + escape(state) +
    "&zipCode=" + escape(zipCode);

如果改为XML格式，则需要发送的信息如下：

<address>
  <firstName>Larry</firstName>
  <lastName>Gullahorn</lastName>
  <street>9018 Heatherhorn Drive</street>
  <city>Rowlett</city>
  <state>Texas</state>
  <zipCode>75080</zipCode>
</address>

除了为每一组<名=值>对加上标签，还要加上根元素。

3、发送XML

function callServer() {
  // Get the city and state from the Web form
  var firstName = document.getElementById("firstName").value;
  var lastName = document.getElementById("lastName").value;
  var street = document.getElementById("street").value;
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  var zipCode = document.getElementById("zipCode").value;

  var xmlString = "<profile>" +
    "  <firstName>" + escape(firstName) + "</firstName>" +
    "  <lastName>" + escape(lastName) + "</lastName>" +
    "  <street>" + escape(street) + "</street>" +
    "  <city>" + escape(city) + "</city>" +
    "  <state>" + escape(state) + "</state>" +
    "  <zip-code>" + escape(zipCode) + "</zip-code>" +
    "</profile>";

  // Build the URL to connect to
  var url = "/scripts/saveAddress.php";

  // Open a connection to the server
  xmlHttp.open("POST", url, true);

  // Tell the server you're sending it XML
  xmlHttp.setRequestHeader("Content-Type", "text/xml");

  // Set up a function for the server to run when it's done
  xmlHttp.onreadystatechange = confirmUpdate;

  // Send the request
  xmlHttp.send(xmlString);
}

改用XML格式发送数据后，不使用GET方式请求，而是使用POST方式，并且xml文本写在xmlString中，作为参数由xmlHttp.send函数发送到服务器。

并且增加了一行新的代码，即xmlHttp.setRequestHeader("Content-Type", "text/xml");这句话告诉服务器要发送的是 XML 而不是一般的名/值对。
如果发送的是一般的名/值对，则对应的行是：xmlHttp.setRequestHeader("Content-Type", "text/plain");

4、什么情况下使用XML

前面讲到，使用XML会造成占用空间多，响应慢等缺点，并且，在上面举得例子中，使用XML形成xmlString并没有使发送变得更简单，那么，为什么在某些情况下，我们还是要使用XML呢？下面列举了一些这样的情况：

1. 服务器仅 接受 XML 请求
2. 需要调用一个仅接受 XML 或 SOAP 请求的远程 API

3. 服务器返回由<名/值>对构成的响应，该响应信息使用分号，竖线等非标准格式化的字符表示多层非并列的信息，而客户端必须手动解析所返回的数据的情况。使用XML要比纯文本格式更清晰。例如：

   //表示多个电视剧的收视率
   使用纯文本格式的名值对：
   show=Alias&ratings=6.5|show=Lost&ratings=14.2|show=Six%20Degrees&ratings=9.1
   
   使用XML格式：
   <ratings>
    <show>
     <title>Alias</title>
     <rating>6.5</rating>
    </show>
    <show>
     <title>Lost</title>
     <rating>14.2</rating>
    </show>
    <show>
     <title>Six Degrees</title>
     <rating>9.1</rating>
    </show>
   </ratings>
   

5、从服务器接收XML

从服务器返回的响应信息以纯文本的格式放在xmlHttp.responseText中。如果服务器返回的XML格式文本，可以将其作为普通文本用responseText和split函数进行拆分，通过基本的字符串操作获得元素的名称和值。也可以使用DOM将XML当成XML来获得元素。第二种方式更加简便和清晰。以上述电视剧的收视率XML文本为例，具体过程如下：

• 获得responseXML属性。
• 获得所有show元素。

• 遍历所有show元素。

  function updatePage() {
    if (request.readyState == 4) {
      if (request.status == 200) {
        var xmlDoc = request.responseXML;//获得responseXML
  
        var showElements = xmlDoc.getElementsByTagName("show");//获得所有show元素
        for (var x=0; x<showElements.length; x++) {//遍历所有show元素
          var title = showElements[x].childNodes[0].value;
          var rating = showElements[x].childNodes[1].value;
  
          // Now do whatever you want with the show title and ratings
        }
      }
    }
  }