此文档解决以下问题：

一、原生的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. 【转】C语言正确使用extern关键字

    利用关键字extern,可以在一个文件中引用另一个文件中定义的变量或者函数,下面就结合具体的实例,分类说明一下. 一.引用同一个文件中的变量 #include<stdio.h> int f ...

  2. redis安全 (error) NOAUTH Authentication required

    Redis 安全 我们可以通过 redis 的配置文件设置密码参数,这样客户端连接到 redis 服务就需要密码验证,这样可以让你的 redis 服务更安全. 实例 我们可以通过以下命令查看是否设置了 ...

  3. ubuntu 14.04 上配置vlc组播源

    VLC:  Video LAN多媒体播放器,是一个跨平台开源的软件,支持主流的编码格式MPEG-2.H.264等. (1)ubuntu上安装vlc: sudo  apt-get install vlc ...

  4. 利用navcat为mysql数据库单独的表赋权限及表结构同步

    为mysql数据库单独的表赋权限 场景:考勤系统需要拿OA数据库td_oa中的flow_run和flow_run_data表中的数据做考勤计算 考勤系统只需要读取这两张表的数据,所以只需要开通一个单独 ...

  5. tomcat8配置SSL

    参考网址:http://www.micmiu.com/enterprise-app/sso/sso-cas-sample/#viewSource 1.生成证书 keytool -genkey -ali ...

  6. gitlab代码仓库迁移

    有的时候我们需要对gitlab上的代码进行迁移,希望在迁移后能保持原有的branch.tag.commit记录等.可以使用以下方式: 1.clone代码到本地. 2.修改remote仓库的地址,添加新 ...

  7. 如何把JS对象转成数组

    1. 前言 首先,当JS对象是键值对的情况时(Json对象),因为数组时以数字为索引的,所以只能把JS对象中的Key或者Value组成数组使用. 2. 样例如下: var obj={"one ...

  8. EntityFramework codefirst Enable-Migrations No context type was found in the assembly “MyApp.Web” error

    Enable-Migrations -Force -ContextTypeName "MyApp.Repository.DataContext" -ProjectName &quo ...

  9. 关于java中生产者消费者模式的理解

    在说生产者消费者模式之前,我觉得有必要理解一下 Obj.wait(),与Obj.notify()方法.wait()方法是指在持有对象锁的线程调用此方法时,会释放对象锁,同时休眠本线程.notify() ...

  10. java 对象锁学习

    机制 锁机制是用来解决多线程共享资源时产生的冲突问题的.java 为每一个对象关联一个对象锁,通常把锁分为对象锁和类锁,他们的本质都是对象锁,只不过对象锁关联的是类的 Object 对象 (java. ...