javascript代码实例教程-Jquery重新学习之六[操作XML数据]_js

上一篇: javascript代码实例教程-extjs 云... 下一篇:javascript代码实例教程-JavaScr...

javascript代码实例教程-Jquery重新学习之六[操作XML数据]

发布时间：2019-02-08 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Jquery重新学习之六[操作XML数据]，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。上一章整理有关jquery操作JSON格式数据，本章则是整理Jquery与XML的交互，因为XML 简单易用及运用在很跨平台上的优点，所以项目运用Jquery操作XML还是比较常见；下面的代码来自Jquery权威指南；

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

复制代码

<head>

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

//加载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>

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

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

</p>

</p>

</body>

</html>

复制代码

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

复制代码

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

<Info>

<User>

</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>

$(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>

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

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

</p>

</p>

</body>

</html>

复制代码

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

复制代码

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

<Info>

</User>

</Info>

复制代码

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

复制代码

<head>

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

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>

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

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

</p>

</p>

</body>

</html>

复制代码

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

复制代码

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

<Info>

</User>

</User>

</User>

</User>

</Info>

复制代码

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

复制代码

<head>

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

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>

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

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

</p>

</p>

</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>

</Info>

觉得可用，就经常来吧！脚本宝典欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Jquery重新学习之六[操作XML数据]全部内容，希望文章能够帮你解决javascript代码实例教程-Jquery重新学习之六[操作XML数据]所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：AJAX Array Array Array Class DOM HTML jQuery jQuery let Map Map post-format-gallery State this 数组数组

上一篇: javascript代码实例教程-extjs 云... 下一篇:javascript代码实例教程-JavaScr...

猜你在找的js相关文章

全站导航更多