此文档解决以下问题：

一、原生的JavaScript从服务器端输出XML格式数据

1.XMLHttpRequest对象的运用

　　XMLHttpRequest对象的open()方法

　　XMLHttpRequest对象的send()方法

　　XMLHttpRequest对象的onreadystatechange事件运用

　　XMLHttpRequest对象的readyState属性

　　XMLHttpRequest对象的status属性

　　XMLHttpRequest对象的responseXML属性

2.document对象的运用

　　createTextNode()方法

　　getElementsByTagName() 方法

3.元素对象的运用

　　appendChild() 方法

　　childNodes 属性

　　nodeValue 属性

4.Table对象的运用

　　insertRow() 方法

5.tr对象的运用

　　insertCell()方法

二、jQuery的$.ajax()从服务器端输出XML格式数据

7.$.ajax()方法

8.find()方法

9.each()方法

10.append()方法

一、原生的JavaScript从服务器端输出XML格式数据

1）index01.html：

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title></title>

        <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            var xhtp;

            function createXMLhttpRequet() {

                //创建XMLHttpRequest对象

                if(window.XMLHttpRequest) {

                    //支持ie6 以上

                    xhtp = new XMLHttpRequest();

                } else {

                    xhtp = new ActiveXObject("Microsoft.XMLHTTP");

                }

                //return xhtp;

            }

            function addTableRow(title, author, year) {

                //为表格添加新行

                var oTable = document.getElementById("member");

                //insertRow() 方法用于在表格中的指定位置插入一个新行

                var oTr = oTable.insertRow(oTable.rows.length);

                var aText = new Array();

                //createTextNode() 方法 创建一个文本节点:

                aText[] = document.createTextNode(title);

                aText[] = document.createTextNode(author);

                aText[] = document.createTextNode(year);

                for(var i = ; i < aText.length; i++) {

                    //insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。

                    var oTd = oTr.insertCell(i);

                    //appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

                    oTd.appendChild(aText[i]);

                }

            }

            function DrawTable(xhtp) {

                //循环显示xml文件的数据，DOM方法操作XML文档

                xmlDocs = xhtp.getElementsByTagName("book");

                for(var i = ; i < xmlDocs.length; i++) {

                    //获取xml文件的指定元素节点的文本节点的值

                    xmlDoc = xmlDocs[i];

                    Node1 = xmlDoc.getElementsByTagName("title")[].childNodes[].nodeValue;

                    Node2 = xmlDoc.getElementsByTagName("author")[].childNodes[].nodeValue;

                    Node3 = xmlDoc.getElementsByTagName("year")[].childNodes[].nodeValue;

                    //把获取的文本节点的值显示在表格的新行中

                    //$("#member").append("<tr><td>"+Node1+"</td><td>"+Node2+"</td><td>"+Node3+"</td></tr>");

                    addTableRow(Node1, Node2, Node3);

                }

            }

            function handleStateChange() {

                //响应请求

                if(xhtp.readyState ==  && xhtp.status == ) {

                    DrawTable(xhtp.responseXML);

                }

            }

            function getXML(addressXML) {

                var url = addressXML;

                //1.创建XMLHttpRequest对象，调用createXMLhttpRequet函数

                createXMLhttpRequet();

                //2.规定请求，get方式请求，true异步传输

                xhtp.open("GET", url, true);

                //3.发送请求

                xhtp.send(null);

                //4.响应请求，调用handleStateChange函数

                xhtp.onreadystatechange = handleStateChange;

            }

        </script>

    </head>

    <body>

        <div id="myDiv"></div>

        <br />

        <input type="text" name="txtin" id="txtin" value="" />

        <input type="text" name="txtage" id="txtage" value="" />

        <input type="button" name="btn" id="btn" value="提交" onclick="getXML('books.xml')" />

        <table border="" cellspacing="" cellpadding="" id="member">

            <tr>

                <th>title</th>

                <th>author</th>

                <th>year</th>

            </tr>

        </table>

    </body>

</html>

2）books.xml:

<?xml version="1.0" encoding="utf-8"?>

<bookstore>

    <book category="CHILDREN">

        <title>Harry Potter1</title>

        <author>J K. Rowling</author>

        <year></year>

        <price>29.99</price>

    </book>

    <book category="WEB">

        <title>Learning XML1</title>

        <author>Erik T. Ray</author>

        <year></year>

        <price>39.95</price>

    </book>

</bookstore>

3)运行结果：

二、jQuery的$.ajax()从服务器端输出XML格式数据

1）index02.html：

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <title></title>

        <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

//            function addTableRow(title, author, year) {

//                var oTable = document.getElementById("member");

//                //insertRow() 方法用于在表格中的指定位置插入一个新行

//                var oTr = oTable.insertRow(oTable.rows.length);

//                var aText = new Array();

//                //createTextNode() 方法 创建一个文本节点:

//                aText[0] = document.createTextNode(title);

//                aText[1] = document.createTextNode(author);

//                aText[2] = document.createTextNode(year);

//

//                for(var i = 0; i < aText.length; i++) {

//                    //insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。

//                    var oTd = oTr.insertCell(i);

//                    //appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

//                    oTd.appendChild(aText[i]);

//                }

//            }

            function getXML(addressXML) {

                $.ajax({

                    type: "GET",

                    url: addressXML,

                    dataType: "xml",

                    success: function(myXML) {

                        //myXML  相当于xhtp.responseXML

                        $(myXML).find("book").each(function() {

                            Node1 = $(this).find("title")[].childNodes[].nodeValue;

                            Node2 = $(this).find("author")[].childNodes[].nodeValue;

                            Node3 = $(this).find("year")[].childNodes[].nodeValue;

                            //addTableRow(Node1, Node2, Node3);

                            $("#member").append("<tr><td>"+Node1+"</td><td>"+Node2+"</td><td>"+Node3+"</td></tr>");

                        })

                    }

                })

            }

        </script>

    </head>

    <body>

        <div id="myDiv"></div>

        <br />

        <input type="text" name="txtin" id="txtin" value="" />

        <input type="text" name="txtage" id="txtage" value="" />

        <input type="button" name="btn" id="btn" value="提交" onclick="getXML('books.xml')" />

        <table border="" cellspacing="" cellpadding="" id="member">

            <tr>

                <th>title</th>

                <th>author</th>

                <th>year</th>

            </tr>

        </table>

    </body>

</html>

2）books.xml:

<?xml version="1.0" encoding="utf-8"?>

<bookstore>

    <book category="CHILDREN">

        <title>Harry Potter1</title>

        <author>J K. Rowling</author>

        <year></year>

        <price>29.99</price>

    </book>

    <book category="WEB">

        <title>Learning XML1</title>

        <author>Erik T. Ray</author>

        <year></year>

        <price>39.95</price>

    </book>

</bookstore>

3)运行结果：

正文结束！~~

异步处理XML异步数据——以原生的JavaScript与jQuery中的$.ajax()为例的更多相关文章

  1. 原生 JS 与 jQuery 中的 AJAX

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更 ...

  2. JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...

  3. js中的原生Ajax和JQuery中的Ajax

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). js中的Ajax: 参数介绍: open(String method,Str ...

  4. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

  5. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  6. JQuery中使用Ajax实现诸如登录名检测等异步请求Demo

    上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用jquery中ajax实现登录信息检测的异步请求功能的笔记,在各个网站进行信息用户注册时,需要在不刷新页面的情况下对注册 ...

  7. JQuery -- Jquery 中的Ajax, Jquery解析xml文件

    1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript ...

  8. json数据的格式，JavaScript、jQuery读取json数据

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON的特点: JSON 是纯文本 JSON 具有“自我描述性”(人类可读) JSON 具有层级 ...

  9. jquery中获取ajax请求返回数据的方法

    function getPageTotalAndDataTotal(page) { //设置一个变量用于接收ajax返回的值 var pageTotal = 0; // 获取页数与数据总数 $.aja ...

随机推荐

  1. elasticsearch5.0.1安装 marvel 插件

    elasticsearch5.0.1安装 marvel 插件 1.在elasticsearch上安装x-pach插件 在elasticsearch的根目录(每个节点),运行 bin/elasticse ...

  2. wap页面

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  3. CPU密集型 VS IO密集型

    CPU密集型 CPU密集型也叫计算密集型,指的是系统的硬盘.内存性能相对CPU要好很多,此时,系统运作大部分的状况是CPU Loading 100%,CPU要读/写I/O(硬盘/内存),I/O在很短的 ...

  4. myEclipse配置java版本（环境、项目、编译）

    从别的地方导入一个项目的时候,经常会遇到eclipse/Myeclipse报Description  Resource Path Location Type Java compiler level d ...

  5. MVC开发中的常见错误-06-"无法在发送 HTTP 标头之后进行重定向。"

    通过监视可以看到: 原来是跳转到登录页面后,登录页面中又发送了一个GeMneuItems的请求,用于加载页面图片

  6. 《JavaScript 高级程序设计》第二章：在HTML中使用JavaScript

    script 标记是 netspace 公司最早为在 html中引入 javascript代码而创造的HTML元素,并最终被 HTML规范采纳. script 标记有四个比较重要的属性: src ty ...

  7. android app 流量统计

    https://blog.csdn.net/yzy9508/article/details/48300265 | android 数据流量统计 - CSDN博客https://blog.csdn.ne ...

  8. HashTable、HashMap、ConcurrentHashMap的区别

    HashTable是做了同步的,HashMap未考虑同步.所以HashMap在单线程情况下效率较高:HashTable在的多线程情况下,同步操作能保证程序执行的正确性. HashMap是非线程安全的, ...

  9. mysql 快速拷贝表

  10. 【前端基础系列】理解GET与POST请求区别

    语义区别 GET请求用于获取数据 POST请求用于提交数据 缓存 GET请求能被缓存,以相同的URL再去GET请求会返回304 POST请求不能缓存 数据长度 HTTP协议从未规定过GET/POST请 ...