Ajax入门第3部分使用XML向服务器发送请求和从服务器接收 XML

最新推荐文章于 2021-04-02 17:32:02 发布

wzwjr

最新推荐文章于 2021-04-02 17:32:02 发布

阅读量1k

点赞数

文章标签：服务器 xml ajax javascript xmlhttprequest function

本文链接：https://blog.youkuaiyun.com/wzwjr/article/details/3957824

版权

向服务器发送 XML

当向服务器发送 XML 的时候，更多的代码用于获取数据和包装成 XML，而不是真正的传输数据。实际上，只要准备好发送到服务器的 XML 字符串，发送工作就和普通文本一样了，如清单 2 所示。

清单 2. 用 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 之后，按照和发送文本基本相同的方式打开连接。对于 XML 最好使用 POST 请求，因为有些浏览器限制了 GET 请求字符串的长度，而 XML 可能很长，可以看到清单 2 中把 GET 改成了 POST 方法。此外，XML 通过 send() 方法发送，而不是附加在请求 URL 最后的参数。这些都是非常细微的区别，很容易修改。
但是必须编写一行新的代码：
     
     xmlHttp.setRequestHeader("Content-Type", "text/xml");




看起来很难理解，它只不过是告诉服务器要发送的是 XML 而不是一般的名/值对。无论哪种情况，发送的数据都是文本，但这里使用 text/xml 或者 XML 作为普通文本发送。如果使用名/值对，对应的行应该是：

     
     
xmlHttp.setRequestHeader("Content-Type", "text/plain");




如果忘记告诉服务器发送的是 XML，就会出现问题，因此不要忘掉这一步骤。
完成这些之后，剩下的就是调用 send() 并传入 XML 字符串了。服务器将收到您的 XML 请求，并（假设已经做好了准备工作）接受 XML，解释它，然后返回响应。实际上要做的只有这么多 —— XML 请求只需要稍微修改代码。

从服务器接收 XML

将 XML 作为纯文本处理

处理 XML 的最简单的选择，就是用与处理服务器返回的其他文本片段相同的方法来处理它。在这种情况下，您要使用请求对象的 responseText 属性，就像在服务器向您发送非 XML 响应时一样：

function updatePage() {
if (request.readyState == 4) {
    if (request.status == 200) {
      var response = request.responseText;

      // response has the XML response from the server
      alert(response);
    }
}
}

假设服务器端回应的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>
那么这时，上面的位于 response 变量之中的输出值将会类似于如下结果：（请注意，清代码在正常情况下应该是连续的一个代码行。这里采用多行形式是为了显示正常）

<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>

在这里，您可以使用 JavaScript split 函数来拆分此数据，并通过基本的字符串操作来获得元素的名称和值。毫无疑问，这是个令人头疼的过程，它无视于您花费了大量时间来阅读前几期文章中 DOM（Document Object Model）相关内容这一事实。因此，我要强调，您应该牢记：利用 responseText，可以轻松使用和输出服务器的 XML 响应，但我不会为您展示太多的代码，在能够使用 DOM 时，您不应选择这种方法来获得 XML 数据，下面您会看到这一点。

将 XML 当成 XML

尽管可以将服务器的 XML 格式的响应视同为其他任何文本响应来处理，但这样做没有很好的理由。首先，如果您一直忠实地阅读这个系列，那么您已经学会了如何使用 DOM 这种对 JavaScript 友好的 API 来操纵 XML。还有更好的事情，JavaScript 和 XMLHttpRequest 对象提供了一个属性，它能完美地获取服务器的 XML 响应，并且是以 DOM Document 对象的形式来获取它。

清单 6 给出了一个实例。这段代码与清单 4 类似，但没有使用 responseText 属性，回调函数使用的是 responseXML 属性。该属性在 XMLHttpRequest 上可用，它以 DOM 文档的格式返回服务器的响应。

清单 6. 将 XML 当作 XML

function updatePage() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      var xmlDoc = request.responseXML;

      // work with xmlDoc using the DOM
    }
  }
}

现在您有了一个 DOM Document，可以像处理其他任何 XML 一样处理它。例如，随后可能要获取所有 show 元素，如清单 7 所示。

清单 7. 获取所有 show 元素

function updatePage() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      var xmlDoc = request.responseXML;

      var showElements = xmlDoc.getElementsByTagName("show");
    }
  }
}

如果您熟悉 DOM，从这儿开始，看起来就应该有几分熟悉了。您可以使用您所了解的全部 DOM 方法，轻松操纵从服务器处接收到的 XML。

当然，您也可以混用普通的 JavaScript 代码。例如，可以遍历所有 show 元素，如清单 8 所示。

清单 8. 遍历所有 show 元素

function updatePage() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      var xmlDoc = request.responseXML;

      var showElements = xmlDoc.getElementsByTagName("show");
      for (var x=0; x<showElements.length; x++) {
        // We know that the first child of show is title, and the second is rating
        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
      }
    }
  }
}

通过这段非常简单的代码，您正是将 XML 响应作为 XML 而不是无格式的纯文本进行了处理，还使用了一点 DOM 和简单的 JavaScript 来处理服务器响应。更重要的是，您使用了标准化的格式 —— XML，而不是以逗号分隔的值或以竖线分隔的名称/值对。换句话说，您将 XML 用在了最适合它的地方，避免了在不适合的地方使用它（比如说向服务器发送请求时）。

您应能够使用您偏爱的服务器端语言以类似的方式输出 XML。IBM developerWorks 上有许多文章可以帮助您了解如何使用您喜爱的服务器端语言生成 XML 文档（相关链接请参见参考资料）。

回页首

解释 XML 的其他可选方法

除将 XML 作为无格式文本处理或使用 DOM 处理之外，还有一种非常流行的选择很重要，值得一提。那就是 JSON（JavaScript Object Notation），这是一种绑定在 JavaScript 内的自由文本格式。这篇文章中没有足够的空间介绍 JSON，在后续文章中将探讨相关内容；只要提起 XML 和 Ajax 应用程序，您就很可能会听到有人谈论 JSON，因此现在我将告诉您，您的工作伙伴们在谈论的究竟是什么。

大体上，可以用 JSON 做的事，用 DOM 都可以完成，反之亦然；选择主要取决于偏好，当然也要为特定的应用程序选择正确的方法。就现在而言，您应坚持使用 DOM，在接收服务器响应的过程中熟悉 DOM。我将占用几期文章的篇幅、用大量的时间去探讨 JSON，之后您就可以随意选择在下一个应用程序中使用那种技术了。请继续关注本系列：后续文章中将介绍关于 XML 的更多内容。