上一章整理有关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数据]的更多相关文章

  1. Jquery重新学习之五[操作JSON数据]

    Jquery操作Json格式的数据在我们平时的项目中也经常运用:最近看Jquery权威指南中就有一章节是对这方面的整理总结:最后通过一个Asp.net结合一般处理程序ashx的实例,基本上能满足项目中 ...

  2. T-Sql操作Xml数据(转)

    T-Sql操作Xml数据 一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和 ...

  3. 使用dom4j处理xml操作xml数据

    使用dom4j处理xml操作xml数据 示例代码: public class TestDom4j { public static void main(String[] args) { String x ...

  4. 使用Dom4j操作XML数据

    --------------siwuxie095                             dom4j 是一个非常优秀的 Java XML 的 API, 用来读写 XML 文件 和操作 ...

  5. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  6. jQuery源代码学习之六——jQuery数据缓存Data

    一.jQuery数据缓存基本原理 jQuery数据缓存就两个全局Data对象,data_user以及data_priv; 这两个对象分别用于缓存用户自定义数据和内部数据: 以data_user为例,所 ...

  7. Android(java)学习笔记187:Android中操作XML数据(使用Pull解析器)

    1. Pull解析器的运行方式与 SAX 解析器相似.它提供了类似的事件,如:开始元素和结束元素事件,使用parser.next()可以进入下一个元素并触发相应事件.跟SAX不同的是, Pull解析器 ...

  8. Android(java)学习笔记130:Android中操作XML数据(使用Pull解析器)

    1. Pull解析器的运行方式与 SAX 解析器相似.它提供了类似的事件,如:开始元素和结束元素事件,使用parser.next()可以进入下一个元素并触发相应事件.跟SAX不同的是, Pull解析器 ...

  9. SQL Server 操作XML数据

    .xml.exist 输入为XQuery表达式,返回0,1或是Null.0表示不存在,1表示存在,Null表示输入为空 .xml.value 输入为XQuery表达式,返回一个SQL Server标量 ...

随机推荐

  1. WC2018伪题解

    NOIP分数过低的场外选手,一个月之后才有幸膜到这套卷子.感觉题目质量很不错啊,可惜了T1乱搞可过,T2题目出锅非集训队员没有通知到,导致风评大幅被害. 感觉Cu的话随手写两个暴力就稳了,Ag的话T3 ...

  2. [Codeforces 1060F] Shrinking Tree

    Link: 传送门 Solution: 原来CF的官方题解也能鸽啊…… 详细题解 该题思路: 1.对于每个点删边方案数为$fac[n-1]$,总贡献为每种方案下满足的概率的和,接下来直接求贡献 2.每 ...

  3. 【期望DP】BZOJ3450- Tyvj1952 Easy

    ---恢复内容开始--- [题目大意] 有n次点击要做,成功了就是o,失败了就是x,分数是按comb计算的,连续a个comb就有a*a分,comb就是极大的连续o.求期望分数. [思路] 比之前的OS ...

  4. 【动态规划/多重背包问题】POJ1014-Dividing

    多重背包问题的优化版来做,详见之前的动态规划读书笔记. dp[i][j]表示前i中数加得到j时第i种数最多剩余几个(不能加和得到i的情况下为-1)递推式为: dp[i][j]=mi(dp[i-1][j ...

  5. ZOJ 3687 The Review Plan I 容斥原理

    一道纯粹的容斥原理题!!不过有一个trick,就是会出现重复的,害我WA了几次!! 代码: #include<iostream> #include<cstdio> #inclu ...

  6. JDK源码(1.7) -- java.util.Deque<E>

    java.util.Deque<E> 源码分析(JDK1.7) -------------------------------------------------------------- ...

  7. python开发_python日期操作

    在python中对日期进行操作的库有: import datetime import time 对日期格式化信息,可以参考官方API: time.strftime datetime 下面是我做的dem ...

  8. JavaScript面向对象编程指南(第2版)》读书笔记

    一.对象 1.1 获取属性值的方式 water = { down: false } console.log(water.down) // false console.log(water['down'] ...

  9. openfire在网络不好或掉线时消息丢失的处理方法

    在服务端收到消息后增加如下代码 //保存到离线消息表,客户端收到后调用删除离线消息功能,这样可确保即使网络突然掉线或不好的情况下消息丢失的问题 OfflineMessageStore offlineM ...

  10. MS Sql Server 中主从库的配置和使用介绍

    网站规模到了一定程度之后,该分的也分了,该优化的也做了优化,但是还是不能满足业务上对性能的要求:这时候我们可以考虑使用主从库. 主从库是两台服务器上的两个数据库,主库以最快的速度做增删改操作+最新数据 ...