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[0].getElementsByTagName("name")[0].firstChild.nodeValue + "<br>";
            strHTML += "性别:" + NewTmpTag[0].getElementsByTagName("sex")[0].firstChild.nodeValue + "<br>";
            strHTML += "邮箱:" + NewTmpTag[0].getElementsByTagName("email")[0].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@126.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 == 4 && xmlHttpRequest.status == 200){    
        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="10001">
    <name>小明</name>
    <sex>男</sex>
    <email>124@163.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(980886, 980666);
        $(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="980886">
    <name>小明</name>
    <sex>男</sex>
    <email>123@163.com</email>
  </User>
  <User grade="980886">
    <name>李建</name>
    <sex>女</sex>
    <email>455i@163.com</email>
  </User>
  <User grade="980666">
    <name>张天虎</name>
    <sex>男</sex>
    <email>789@163.com</email>
  </User>
  <User grade="980666">
    <name>陈小燕</name>
    <sex>女</sex>
    <email>453@163.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(980886, 980666);
        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 = 0;
        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(0);
            xmlNode.ParentNode.RemoveChild(xmlNode);
            xmlDoc.Save(context.Server.MapPath("Xml/7-7.xml"));
            intStatus = 1;
        }
        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="980666">
    <id>1004</id>
    <name>陈小燕</name>
    <sex>女</sex>
    <email>766@163.com</email>
  </User>
</Info>

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

 

 

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。