此文档解决以下问题：

一、原生的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. mysql安装与卸载（非绿色版）

    一.安装和卸载 Mysql安装路径: C:\Program Files\MySQL\MySQL Server 5.5\ Mysql数据文件存放的路径: C:\Documents and Setting ...

  2. linux 平台core dump文件生成

    1. 在终端中输入ulimit -c 如果结果为0,说明当程序崩溃时,系统并不能生成core dump. root@hbg:/# ulimit -c0root@hbg:/# 2.使用ulimit -c ...

  3. RestTemplate的使用

    1.postForObject :传入一个业务对象,返回是一个String 调用方: BaseUser baseUser=new BaseUser(); baseUser.setUserid(user ...

  4. Expm 1_2 实现快速排序的算法,并尝试采用不同的方法实现线性的划分过程.

    package org.xiu68.exp.exp1; public class Exp1_2 { //实现快速排序算法,采用不同的方法实现线性划分的过程 public static void mai ...

  5. android 手机拍照返回 Intent==null 以及intent.getData==null

    手机拍照第一种情况:private void takePicture(){ Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);Si ...

  6. Oracle 数据库逻辑结构

    注:本文来源于 <腾科OCP培训课堂>.非准许商业活动. Oracle 数据库逻辑结构 一.存储关系 Oracle 数据库逻辑上是由一个或多个表空间组成的,表空间物理上是由一个或多个数据 ...

  7. Windows环境selenium+Python环境配置

    1.安装Python 访问Python官方网站. 根据自己的操作系统32/64 位,选择相应的版本. 安装过程我就不详细描述了,动动手指头,Google一下,你就知道.我的安装目录为:C:\Pytho ...

  8. MySQL学习笔记：一道group by+group_concat解决的小问题

    闲来无事,逛逛V2EX发现一道MySQL数据库题目,原题如下: 遂打开很长一段时间都没用过SQLyog,噗呲噗呲的干起活来…… 建测试表: CREATE TABLE test_001 ( id INT ...

  9. linux下安装ruby环境

    安装步骤: ruby的shell叫irb,我们可以输入irb -v查看下irb的版本号 1.安装ruby解释器shell: yum install ruby-irb -y Installed: rub ...

  10. JavaScript常见的真值

    值 说明 var a =true  值等于true: var a = 1 非0的数字 var a =“hello” 有内容的字符串 var a=20/5 运算结果非0 var a='true' 有内容 ...