Jquery重新學習之六[操作XML數據]

本文轉載自查看原文 2014-02-07 19:42 5315 Jquery

上一章整理有關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 會有我的微信號，如果有問題你也可以在那找到我；當然不感興趣無視此信息；

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Jquery重新學習之五[操作JSON數據] C# Xml Linq XDocument 基本操作 -- 重新學習重新學習WCF Jquery重新學習之二[屬性attr(),removeAttr(),prop(),removeProp()] java 並發編程——Thread 源碼重新學習重新學習idea的基礎知識線性代數重新學習之lambda矩陣重新學習 react 中編程式的路由 DIV+CSS布局重新學習之float/margin/padding DIV+CSS布局重新學習之css控制ul li實現2級菜單