此文档解决以下问题：

一、原生的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. 转载：Linux操作系统（1.3.1）《深入理解Nginx》（陶辉）

    原文:https://book.2cto.com/201304/19611.html 1.3 准备工作 由于Linux具有免费.使用广泛.商业支持越来越完善等特点,本书将主要针对Linux上运行的Ng ...

  2. Spark学习之Spark安装

    Spark安装 spark运行环境 spark是Scala写的,运行在jvm上,运行环境为java7+ 如果使用Python的API ,需要使用Python2.6+或者Python3.4+ Spark ...

  3. pytorch实现花朵数据集读取

    import os from PIL import Image from torch.utils import data import numpy as np from torchvision imp ...

  4. Oracle 服务器结构

    [学习目标] 作为一个数据库管理员(DBA),经常会遇到各种没有见过的问题.除了宝贵的经验外, 通过理论基础去对问题进行判断.解决是至关重要的.因此,Oracle 服务器的结构和组成 是学习Oracl ...

  5. OCM_第三天课程：Section1 —》表空间的操作和管理、服务配置

    注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...

  6. 前景检测（1）：VIBE

    参考:http://blog.csdn.net/zouxy09/article/details/9622285 看论文很多细节不明白,看这位博主实现的代码就能明白了.

  7. python接口自动化测试六：时间戳，防重复处理

    对于不可重复参数,可以用时间戳,防重复 import time title = '这是我的标题:%s'%str(int(time.time())) print(title) 转化成时间格式 t = t ...

  8. python 全栈开发，Day133(玩具与玩具之间的对话,基于jieba gensim pypinyin实现的自然语言处理,打包apk)

    先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.6.zip 注意:由于涉及到 ...

  9. DDD领域模型数据访问权限之用户权限（十）

    BAS_PRService岗位和角色服务: public class BAS_PRService { //岗位 private IRepository<BAS_Post> ireposit ...

  10. ASP.NET Identity详解

      Asp.Net Identiy是ASP.NET身份验证机制. 如何构建安全的Web应用? 我们先来思考一个问题:如何构建安全的WEB应用? 一直以来,这都是比较热门的话题.不幸的是,目前还没有一种 ...