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增删改查
感谢您的阅读,坚持每天进步一点点,离成功就更新一步;希望文章对您有所帮助;
最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;
【推荐】中国电信天翼云云端翼购节,2核2G云服务器一口价38元/年
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 时间轮在 Netty , Kafka 中的设计与实现
· MySQL 优化利器 SHOW PROFILE 的实现原理
· 在.NET Core中使用异步多线程高效率的处理大量数据
· 聊一聊 C#前台线程 如何阻塞程序退出
· 几种数据库优化技巧
· 跟着 8.6k Star 的开源数据库,搞 RAG!
· 夜莺 v8 第一个版本来了,开始做有意思的功能了
· 推荐一个C#轻量级矢量图形库
· .NET 9 增强 OpenAPI 规范,不再内置swagger
· 3款.NET开源、功能强大的通讯调试工具,效率提升利器!
2012-02-07 EXT.net GridPanel行双击响应事件