Jquery重新学习之六[操作XML数据]

上一章整理有关Jquery操作JSON格式数据，本章则是整理Jquery与XML的交互，因为XML简单易用及运用在很跨平台上的优点，所以项目运用Jquery操作XML还是比较常见；下面的代码来自Jquery权威指南；

1：使用传统JavaScript调用XML的方法(使用Get方式获得数据)；

<head>

    <title>使用传统JavaScript调用XML的方法</title>

    <script type="text/javascript">

        //加载xml文件

        function loadXML(xmlFile) {

            var xmlDoc, xmlhttp;

            if (window.XMLHttpRequest) {//兼容 IE7+, Firefox, Chrome, Opera, Safari

                xmlhttp = new XMLHttpRequest();

            }

            else {//兼容 IE5、IE6

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

            }

            xmlhttp.open("GET", xmlFile, false);  //使用HTTP GET初始化HTTP请求

            xmlhttp.send(); //发送HTTP请求并获取HTTP响应

            xmlDoc = xmlhttp.responseXML;  //获取XML文档

            return xmlDoc;

        }

        //按钮单击事件

        function btn_Click() {

            var strHTML = ""; //初始化保存内容变量

            var NewXmlDoc = loadXML("Xml/7-4.xml");

            var NewTmpTag = NewXmlDoc.getElementsByTagName("User");  //获得标签

            strHTML += "姓名：" + NewTmpTag[].getElementsByTagName("name")[].firstChild.nodeValue + "<br>";

            strHTML += "性别：" + NewTmpTag[].getElementsByTagName("sex")[].firstChild.nodeValue + "<br>";

            strHTML += "邮箱：" + NewTmpTag[].getElementsByTagName("email")[].firstChild.nodeValue + "<hr>";

            document.getElementById("Tip").innerHTML = strHTML; //显示处理后的数据

        }

    </script>

</head>

<body>

   <div class="iframe">

         <div class="title">

              <input type="button" onclick="btn_Click()"

                     class="btn" value="获取数据" />

         </div>

         <div class="content">

              <div id="Tip"></div>

         </div>

    </div>

</body>

</html>

Xml/7-4.xml的XML文件内容如下：

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

<Info>

  <User>

    <name>小明</name>

    <sex>男</sex>

    <email>w123@.com</email>

  </User>

</Info>

注意：Microsoft.XMLHttp组件的属性方法

一、使用步骤：

1：创建XMLHTTP对象 //需MSXML4.0支持

2：打开与服务端的连接，同时定义指令发送方式，服务网页(URL)和请求权限等。客户端通过Open命令打开与服务端的服务网页的连接。与普通HTTP指令传送一样，可以用"GET"方法或"POST"方法指向服务端的服务网页。

3：发送指令。

4：等待并接收服务端返回的处理结果。

5：释放XMLHTTP对象

二、XMLHTTP属性：

1：Open方法中包含了5个参数，前三个是必要的，后两个是可选的(在服务器需要进行身份验证时提供)。参数的含义如下所示：

(a):http-method：HTTP的通信方式，比如GET或是POST

(b):url：接收XML数据的服务器的URL地址。通常在URL中要指明ASP或CGI程序

(c):async：一个布尔标识，说明请求是否为异步的。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作

(d):userID：用户ID，用于服务器身份验证

(e):password：用户密码，用于服务器身份验证

2：XMLHTTP对象的Send方法用Open方法对Request对象进行初始化后，调用Send方法发送XML数据：objXML.send();Send方法的参数类型是Variant，可以是字符串、DOM树或任意数据流。发送数据的方式分为同步和异步两种。在异步方式下，数据包一旦发送完毕，就结束Send进程，客户机执行其他的操作；而在同步方式下，客户机要等到服务器返回确认消息后才结束Send进程。

3：xmlhttp.responseXML; //获取XML文档
onreadystatechange：在同步执行方式下获得返回结果的事件句柄。只能在DOM中调用。
responseBody：结果返回为无符号整数数组。
responseStream：结果返回为IStream流。
responseText ：结果返回为字符串。
responseXML：结果返回为XML格式数据。

4：XMLHTTP对象中的readyState属性,其能够反映出服务器在处理请求时的进展状况。客户机的程序可以根据这个状态信息设置相应的事件处理方法。属性值及其含义如下表所示：

值　　说明
0 　　Response对象已经创建，但XML文档上载过程尚未结束
1 　　XML文档已经装载完毕
2 　　XML文档已经装载完毕，正在处理中
3 　　部分XML文档已经解析
4 　　文档已经解析完毕，客户端可以接受返回消息

补充实例（与本文主题关系不大,javascript的Ajax操作）：Microsoft.XMLHttp以Post方式进行操作；

var userName;

var passWord;

var xmlHttpRequest;    

//XmlHttpRequest对象

function createXmlHttpRequest(){

    if(window.ActiveXObject){ //如果是IE浏览器

        return new ActiveXObject("Microsoft.XMLHTTP");

    }else if(window.XMLHttpRequest){ //非IE浏览器

        return new XMLHttpRequest();

    }

}    

function onLogin(){

    userName = document.f1.username.value;

    passWord = document.f1.password.value;      

    var url = "Login.aspx";       

    //1.创建XMLHttpRequest组建

    xmlHttpRequest = createXmlHttpRequest();    

    //2.设置回调函数

    xmlHttpRequest.onreadystatechange = zswFun;    

    //3.初始化XMLHttpRequest组建

    xmlHttpRequest.open("POST",url,true);    

    //4.发送请求

    xmlHttpRequest.send(null);

}       

//回调函数

function zswFun(){

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

        var b = xmlHttpRequest.responseText;

        if(b == "true"){

            alert("登录成功！");

        }else{

            alert("登录失败！");

        }

    }

}

2：jQuery方式解析XML数据

<head>

    <title>jQuery 解析XML 数据</title>

    <script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function() {

            $("#Button1").click(function() { //按钮单击事件

                var strHTML = ""; //初始化保存内容变量

                $.ajax({

                    url: 'Xml/7-5.xml',

                    dataType: 'xml',

                    success: function(data) {

                        var $strUser = $(data).find("User");

                        strHTML += "编号：" + $strUser.attr("id") + "<br>";

                        strHTML += "姓名：" + $strUser.children("name").text() + "<br>";

                        strHTML += "性别：" + $strUser.children("sex").text() + "<br>";

                        strHTML += "邮箱：" + $strUser.children("email").text() + "<hr>";

                        $("#Tip").html(strHTML); //显示处理后的数据

                    }

                });

            });

        });

    </script>

</head>

<body>

   <div class="iframe">

         <div class="title">

              <input id="Button1" type="button"

                     class="btn" value="获取数据" />

         </div>

         <div class="content">

              <div id="Tip"></div>

         </div>

    </div>

</body>

</html>

Xml/7-5.xml的XML文件内容如下：

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

<Info>

  <User id="">

    <name>小明</name>

    <sex>男</sex>

    <email>@.com</email>

  </User>

</Info>

2.1：jQuery方式解析XML数据（带分组形式）

<head>

    <title>jQuery 读取XML 数据</title>

    <script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var arrGrade = new Array(, );

        $(function() {

            $("#Button1").click(function() { //按钮单击事件

                var strHTML = ""; //初始化保存内容变量

                $.ajax({

                    url: 'Xml/7-6.xml?',

                    dataType: 'xml',

                    success: function(data) {

                        $.each(arrGrade, function(i) {

                            var $strUser = $(data).find("User[grade=" + arrGrade[i] + "]");

                            strHTML += "<h3>年级：" + arrGrade[i] + "</h3>";

                            $strUser.each(function() {

                                strHTML += "姓名：" + $(this).children("name").text() + "<br>";

                                strHTML += "性别：" + $(this).children("sex").text() + "<br>";

                                strHTML += "邮箱：" + $(this).children("email").text() + "<hr>";

                            });

                        });

                        $("#Tip").html(strHTML); //显示处理后的数据

                    }

                });

            });

        });

    </script>

</head>

<body>

   <div class="iframe">

         <div class="title">

              <input id="Button1" type="button"

                     class="btn" value="获取数据" />

         </div>

         <div class="content">

              <div id="Tip"></div>

         </div>

    </div>

</body>

</html>

Xml/7-6.xml的XML文件内容如下：

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

<Info>

  <User grade="">

    <name>小明</name>

    <sex>男</sex>

    <email>@.com</email>

  </User>

  <User grade="">

    <name>李建</name>

    <sex>女</sex>

    <email>455i@.com</email>

  </User>

  <User grade="">

    <name>张天虎</name>

    <sex>男</sex>

    <email>@.com</email>

  </User>

  <User grade="">

    <name>陈小燕</name>

    <sex>女</sex>

    <email>@.com</email>

  </User>

</Info>

2.2：jQuery操作XML数据，通过结合一般处理程序进行操作；

<head>

    <title>jQuery 操作XML数据</title>

    <script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var arrGrade = new Array(, );

        function lnk_Delete(i) {

            var btnYN = confirm("您真的要删除吗？");

            if (btnYN) {

                $.post("7-7.ashx?Id=" + i, function(data) {

                    if (data) {

                        $("#Button1").click();

                    } else {

                        alert(data);

                    }

                });

            }

        }

        $(function() {

            $("#Button1").click(function() { //按钮单击事件

                var strHTML = ""; //初始化保存内容变量

                $.ajax({

                    url: 'Xml/7-7.xml?',

                    dataType: 'xml',

                    success: function(data) {

                        $.each(arrGrade, function(i) {

                            var $strUser = $(data).find("User[grade=" + arrGrade[i] + "]");

                            strHTML += "<h3>年级：" + arrGrade[i] + "</h3>";

                            $strUser.each(function() {

                                var $strId = $(this).children("id").text();

                                strHTML += "编号：" + $strId + "<a href='javascript:' onclick='lnk_Delete(" + $strId + ")'>删除</a><br>";

                                strHTML += "姓名：" + $(this).children("name").text() + "<br>";

                                strHTML += "性别：" + $(this).children("sex").text() + "<br>";

                                strHTML += "邮箱：" + $(this).children("email").text() + "<hr>";

                            });

                        });

                        $("#Tip").html(strHTML); //显示处理后的数据

                    }

                });

            });

        });

    </script>

</head>

<body>

   <div class="iframe">

         <div class="title">

              <input id="Button1" type="button"

                     class="btn" value="获取数据" />

         </div>

         <div class="content">

              <div id="Tip"></div>

         </div>

    </div>

</body>

</html>

一般处理程序7-7.ashx代码如下：

using System;

using System.Web;

using System.Xml;

public class _7_7 : IHttpHandler {

    public void ProcessRequest(HttpContext context)

    {

        context.Response.ContentType = "text/plain";

        string strId = context.Request.QueryString["Id"].ToString();

        int intStatus = ;

        XmlDocument xmlDoc = new XmlDocument();

        try

        {

            xmlDoc.Load(context.Server.MapPath("Xml/7-7.xml"));

            XmlNodeList xmlNodeList = xmlDoc.SelectNodes("Info/User[id='" + strId + "']");//查找

            XmlNode xmlNode = xmlNodeList.Item();

            xmlNode.ParentNode.RemoveChild(xmlNode);

            xmlDoc.Save(context.Server.MapPath("Xml/7-7.xml"));

            intStatus = ;

        }

        catch (Exception)

        {

            throw;

        }

        context.Response.Write(intStatus);

    }

    public bool IsReusable {

        get {

            return false;

        }

    }

}

Xml/7-7.xml的XML文件内容如下：

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

<Info>

  <User grade="">

    <id></id>

    <name>陈小燕</name>

    <sex>女</sex>

    <email>@.com</email>

  </User>

</Info>

若要查看NET如何操作XML可以查看以前写过的一篇：Linq To Xml操作XML增删改查

感谢您的阅读，坚持每天进步一点点，离成功就更新一步；希望文章对您有所帮助；

最近有个妹子弄的一个关于扩大眼界跟内含的订阅号，每天都会更新一些深度内容，在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣)，当然可以关注后输入：github 会有我的微信号，如果有问题你也可以在那找到我；当然不感兴趣无视此信息；

Jquery重新学习之六[操作XML数据]的更多相关文章

Jquery重新学习之五[操作JSON数据]
Jquery操作Json格式的数据在我们平时的项目中也经常运用:最近看Jquery权威指南中就有一章节是对这方面的整理总结:最后通过一个Asp.net结合一般处理程序ashx的实例,基本上能满足项目中 ...
T-Sql操作Xml数据(转)
T-Sql操作Xml数据一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和 ...
使用dom4j处理xml操作xml数据
使用dom4j处理xml操作xml数据示例代码: public class TestDom4j { public static void main(String[] args) { String x ...
使用Dom4j操作XML数据
--------------siwuxie095 dom4j 是一个非常优秀的 Java XML 的 API, 用来读写 XML 文件和操作 ...
Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
jQuery源代码学习之六——jQuery数据缓存Data
一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所 ...
Android（java）学习笔记187：Android中操作XML数据（使用Pull解析器）
1. Pull解析器的运行方式与 SAX 解析器相似.它提供了类似的事件,如:开始元素和结束元素事件,使用parser.next()可以进入下一个元素并触发相应事件.跟SAX不同的是, Pull解析器 ...
Android（java）学习笔记130：Android中操作XML数据（使用Pull解析器）
1. Pull解析器的运行方式与 SAX 解析器相似.它提供了类似的事件,如:开始元素和结束元素事件,使用parser.next()可以进入下一个元素并触发相应事件.跟SAX不同的是, Pull解析器 ...
SQL Server 操作XML数据
.xml.exist 输入为XQuery表达式,返回0,1或是Null.0表示不存在,1表示存在,Null表示输入为空 .xml.value 输入为XQuery表达式,返回一个SQL Server标量 ...

随机推荐

【MPI】矩阵向量乘法
输入作乘法的次数K 然后输入矩阵和向量的维度n 然后输入一个n维向量然后输入K个n阶方阵程序会给出该向量连续与此K个方阵做乘法后的结果主要用了MPI_Gather, MPI_Allgather, ...
Flask请求上下文源码讲解，简单的群聊单聊web
请求上下文流程图群聊html代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
php 导出excel
<?phpclass Excel { var $inEncode; var $outEncode; public function _construct() { } public functio ...
zoj 3621 Factorial Problem in Base K 数论 s!后的0个数
Factorial Problem in Base K Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onli ...
CodeM资格赛5
早上起床太晚,最后没时间了.. 不是ac代码,下次题目在oj上线的时候再去做一下.. #include<iostream> #include<cstdio> #include& ...
UIColor和同 CIColor 与 CGColor 之间的联系、转换
1. 利用UIColor展现 #F6F6F6 这个传统的颜色 #F6F6F6 为一个 16 进制表示的RPG颜色,所以,需要先转换成 10进制,其中 F6 - 240,F6 - 240 ,F6 - ...
POJ 1755 Triathlon （半平面交）
Triathlon Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4733 Accepted: 1166 Descrip ...
Lower dc/dc-converter ripple by using optimum capacitor hookup
Low-ripple-voltage positive-to-negative dc/dc converters find use in many of today's high- frequency ...
Win8系统108个运行命令你能记住多少?
Win8运行命令:程序和功能取消了开始菜单的Win8让人感觉很不习惯,这才发现原来开始菜单可以做这么多事.不过Win8中的一些快捷键还沿用了Windows一直以来的习惯,比如按下Windows ...
使用 pm2-web 监控 pm2 服务运行状态
pm2-web 是一款 pm2 服务状态监控程序,基于 web . 安装 $ npm install -g pm2-web 运行(默认是在8080端口) $ pm2-web 配置 pm2-web 将会 ...

Jquery重新学习之六[操作XML数据]

Jquery重新学习之六[操作XML数据]的更多相关文章

随机推荐

热门专题