首頁 > 開發者 > Ajax

ajax基礎讀書筆記 第三章（發送請求與處理響應）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

通過XMLHttpRequest.responseXML;

將響應解析為XML

獲得對象有下面的屬性和方法

 

表3-1  用於處理XML文檔的DOM元素屬性

 

 

屬性名稱
 描述
 
childNodes
 返回當前元素所有子項目的數組
 
firstChild
 返回當前元素的第一個下級子項目
 
lastChild
 返回當前元素的最後一個子項目
 
nextSibling
 返回緊跟在當前元素後面的元素
 
nodeValue
 指定表示元素值的讀/寫屬性
 
parentNode
 返回元素的父節點
 
previousSibling
 返回緊鄰當前元素之前的元素
 

表3-2　用於遍曆XML文檔的DOM元素方法

方法名
 描述
 
getElementById(id) (document)
 擷取有指定惟一ID屬性值文檔中的元素
 
getElementsByTagName(name)
 返回當前元素中有指定標記名的子項目的數組
 
hasChildNodes()
 返回一個布爾值，指示元素是否有子項目
 
getAttribute(name)
 返回元素的屬性值，屬性由name指定

 

下面看一個執行個體

 

面的例子可以看到，使用遵循W3C DOM的JavaScript來讀取XML文檔是何等簡單。代碼清單3-3顯示了伺服器向瀏覽器返回的XML文檔的內容。這是一個簡單的美國州名列表，各個州按地區劃分。

代碼清單3-3  伺服器返回的美國州名列表

這裡是個xml

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

<states>

    <north>

        <state>Minnesota</state>

        <state>Iowa</state>

        <state>North Dakota</state>

    </north>

    <south>

        <state>Texas</state>

        <state>Oklahoma</state>

        <state>Louisiana</state>

    </south>

    <east>

        <state>New York</state>

        <state>North Carolina</state>

        <state>Massachusetts</state>

    </east>

    <west>

        <state>California</state>

        <state>Oregon</state>

        <state>Nevada</state>

    </west>

</states>

在瀏覽器上會產生具有兩個按鈕的HTML頁面。點擊第一個按鈕，將從伺服器載入XML文檔，然後在警告框中顯示列於文檔中的所有州。點擊第二個按鈕也會從伺服器載入XML文檔，不過只在警告框中顯示北部地區的各個州（見圖3-2）。

 

圖3-2  點擊頁面上的任何一個按鈕都會從伺服器載入XML文檔，並在警告框中顯示適當的結果

代碼清單3-4顯示了parseXML.html。

代碼清單3-4  parseXML.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Parsing XML Responses with the W3C DOM</title>

 

<script type="text/javascript">

var xmlHttp;

var requestType = "";

 

function createXMLHttpRequest()

{

    if (window.ActiveXObject)

    {

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

 

    else if (window.XMLHttpRequest)

{

        xmlHttp = new XMLHttpRequest();

    }

}

 

function startRequest(requestedList)

{

    requestType = requestedList;

    createXMLHttpRequest();

    xmlHttp.onreadystatechange = handleStateChange;

    xmlHttp.open("GET", "parseXML.xml", true);

    xmlHttp.send(null);

}

 

function handleStateChange()

{

    if(xmlHttp.readyState == 4)

{

        if(xmlHttp.status == 200)

 {

            if(requestType == "north")

            {

                listNorthStates();

            }

            else if(requestType == "all")

            {

                listAllStates();

            }

        }

    }

}

 

function listNorthStates() {

    var xmlDoc = xmlHttp.responseXML;

    var northNode = xmlDoc.getElementsByTagName("north")[0];

 

    var out = "Northern States";

    var northStates = northNode.getElementsByTagName("state");

 

    outputList("Northern States", northStates);

}

 

function listAllStates() {

    var xmlDoc = xmlHttp.responseXML;

    var allStates = xmlDoc.getElementsByTagName("state");

 

    outputList("All States in Document", allStates);

}

 

function outputList(title, states) {

    var out = title;

    var currentState = null;

    for(var i = 0; i < states.length; i++) {

        currentState = states[i];

        out = out + "/n- " + currentState.childNodes[0].nodeValue;

    }

    alert(out);

}

</script>

</head>

 

<body>

    <h1>Process XML Document of U.S. States</h1>

    <br/>

   <br/>

    <form action="#">

        <input type="button" value="View All Listed States"

                onclick="startRequest('all');"/>

        <br/>

      <br/>

        <input type="button" value="View All Listed Northern States"

                  onclick="startRequest('north');"/>

    </form>

</body>

</html>

 

解析：

listNorthStates和listAllStates函數則不同，它們使用了XMLHttpRequest對象的responseXML屬性，將結果擷取為XML文檔，這樣一來，你就可以使用W3C DOM方法來遍曆XML文檔了。

 

仔細研究一下listAllStates函數。它首先建立了一個局部變數，名為xmlDoc，並將這個變數初始化設定為伺服器返回的XML文檔，這個XML文檔是使用XMLHttpRequest對象的responseXML屬性得到的。利用XML文檔的getElementsByTagName方法可以擷取文檔中所有標記名為state的元素。getElementsByTagName方法返回了包含所有state元素的數組，這個數組將賦給名為allStates的局部變數。

 


listNorthStates函數與listAllStates是類似的，只不過增加了一個小技巧。你只想得到北部地區的州，而不是所有州。為此，首先使用getElementsByTagName方法擷取north標記，從而獲得XML文檔中的north元素。因為文檔只包含一個north元素，而且getElementsByTagName方法總是返回一個數組，所以要用[0]記法來抽出north元素。這是因為，在getElementsByTagName方法返回的數組中，north元素處在第一個位置上（也是惟一的位置）。既然有了north元素，接下來調用north元素的getElementsByTagName方法，就可以得到north元素的state子項目。有了north元素所有state子項目的數組後，再使用outputList方法在警告框中顯示這些州名。


 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More