jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML

好的！下面是关于jquery ajax使用XMLHttpRequest对象的responseXML的完整攻略：

1. AJAX工作原理回顾

在讲解jquery ajax使用XMLHttpRequest对象的responseXML前，我们先来回顾一下ajax的工作原理。当使用ajax发送一个请求时，发生的具体步骤如下：

创建XMLHttpRequest对象
向服务器发送请求
接受来自服务器的响应
处理服务器响应的数据并更新页面

其中，第3步接受来自服务器的响应是ajax最重要的一步。服务器响应的数据可以是文本格式的，也可以是XML格式的。

2. 服务器返回XML格式数据

如果服务器返回XML格式的数据，那么我们就可以使用XMLHttpRequest对象的responseXML属性来访问这些数据。responseXML属性返回XML格式的文档，我们可以像操作DOM一样来操作这个文档。具体示例如下：

首先，我们需要准备一个返回XML格式数据的服务器接口，这里使用PHP语言实现：

<?php
header('Content-Type:text/xml');
echo '<?xml version="1.0" encoding="UTF-8"?>
<books>
  <book>
    <title>JavaScript高级程序设计</title>
    <author>张三</author>
    <price>39.90</price>
  </book>
  <book>
    <title>深入浅出Node.js</title>
    <author>李四</author>
    <price>45.00</price>
  </book>
</books>';
?>

这个接口会返回一组XML格式的图书数据。接下来，我们通过jquery ajax的封装来访问这个接口并使用XMLHttpRequest对象的responseXML属性来解析返回的XML文档：

$.ajax({
  url: 'book.php',
  type: 'GET',
  dataType: 'xml',
  success: function(data) {
    var books = data.getElementsByTagName('book');
    for (var i = 0; i < books.length; i++) {
      var book = books[i];
      var title = book.getElementsByTagName('title')[0].childNodes[0].nodeValue;
      var author = book.getElementsByTagName('author')[0].childNodes[0].nodeValue;
      var price = book.getElementsByTagName('price')[0].childNodes[0].nodeValue;
      console.log('书名：' + title + '，作者：' + author + '，价格：' + price);
    }
  }
});

在这个示例中，我们通过url指定了要访问的服务器接口，并指定了dataType为xml。当接口返回的数据格式为xml时，jquery会自动将数据解析为XML文档，并传递给我们的success回调函数的data参数。我们可以通过getElementsByTagName方法来获取文档中的所有book元素，并依次遍历每个book元素，提取出元素中的title、author和price元素值。

3. 将XML格式文档转化为JSON格式数据

如果需要将XML格式的文档转换为JSON格式数据，需要进行一些额外的处理。jquery提供了一个xml2json插件，可以方便地实现这个功能。具体示例如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>使用XMLHttpRequest对象的responseXML</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>书名</th>
        <th>作者</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <script src="jquery.js"></script>
  <script src="jquery.xml2json.js"></script>
  <script>
    $.ajax({
      url: 'book.php',
      type: 'GET',
      dataType: 'xml',
      success: function(data) {
        var json = $.xml2json(data);
        $.each(json.book, function(index, value) {
          $('tbody').append('<tr><td>' + value.title 
                            + '</td><td>' + value.author 
                            + '</td><td>' + value.price 
                            + '</td></tr>');
        });
      }
    });
  </script>
</body>
</html>

在这个示例中，我们通过使用xml2json插件将XML格式文档转换为JSON格式数据，并通过循环遍历json对象来动态生成HTML标签来展现读取到的图书数据。

以上就是jquery ajax使用XMLHttpRequest对象的responseXML的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML - Python技术站

jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML

1. AJAX工作原理回顾

2. 服务器返回XML格式数据

3. 将XML格式文档转化为JSON格式数据

相关文章