DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> 在基於Mozilla的浏覽器中使用XMLHttpRequest對象
在基於Mozilla的浏覽器中使用XMLHttpRequest對象
編輯:XML詳解     

IE通過允許開發人員在Web頁面內部使用安全的ActiveX組件擴展自身的功能。微軟在無狀態連接方面的產品是XMLHTTP組件 使用XMLHTTP組件,開發人員可以不用從當前的Web頁面導航而直接傳輸數據到服務器上或者從服務器取數據。這個功能是重要的,因為它幫助減少了無狀態連接的痛苦。它還可以排除下載冗余Html的需要,從而提高進程的速度。

Mozilla做出的回應是創建它自己的繼承XML代理類:XMLHttpRequest類。對於大多數情況,XMLHttpRequest對象的行為很像XMLHTTP組件。這就意味著你可以使用很多與XMLHTTP組件相同的幫助信息。方法和屬性類似,然而,所有的方法和屬性都是以小寫字母開頭,並且還有一些屬性不支持。

下面是一個使用eXtensible Binding Language(XBL)將一個行為綁定到一個<INPUT>元素來更新XML數據島的簡單例子。數據被發送到服務器處理。

XML_http.ASP:

<%@ Language=VBScript %>
<%
Response.EXPires = -1
If Request("action") = "update" Then
    Dim XML
    Set xml = Server.CreateObject("MSXML2.DOMDocument")
    XML.load Request
    Response.Writexml.XML
    Set XML = Nothing
    Response.End
End If
%>
<Html>
<head>
<style>
.linkedData {
    -moz-binding: url(link_data.XML#link);
}
</style>
<script language="Javascript">
<!--
function test() {
    var xml = document.getElementById("XMLData");
    if (XML != null) {
        varxmlhttp = new XMLHttpRequest();
  xmlhttp.open("POST", "XML_http.ASP?action=update", false);

        xmlhttp.send(XML.innerHtml);
        alert(XMLhttp.responseText);
    }
}
//-->
</script>
</head>
<body>

<xml id="xmlData" name="XMLData" style="visibility:hidden;">
    <root>
        <link_data/>
    </root>
</XML>

<form id="thisForm" name="thisForm">

<input type="text" class="linkedData" name="txtLink" id="txtLink" size="25">
<br>
<input type="button" value="Test" onclick="test()">

</form>

</body>
</Html>

link_data.XML:

<?XML version="1.0"?>
<xbl:bindingsXMLns:xbl="http://www.mozilla.org/xbl">
    <xbl:binding id="link">
        <xbl:handlers>
            <xbl:handler event="change">
                var xml = document.getElementById("XMLData");
                var root = XML.childNodes[1];
                varlink_data = root.childNodes[1];
  link_data.childNodes[0].nodeValue = event.originalTarget.value;
            </xbl:handler>

        </xbl:handlers>
    </xbl:binding>
</xbl:bindings>
 


XML_http.ASP文件創建一個XML數據島,創建的數據島有一個重要節點:link_data。而且,這個Html的表現會創建一個文本框和一個用於創建發送XML數據給服務器的事件的按鈕。

IE允許你嵌入XML數據島並使用那個數據島將綁定Html元素到底層的數據。Mozilla靠XBL為每個元素創建行為。使用XBL,你可以為<INPUT>元素創建一個行為,所以在onChange事件發生時,“bound”XML節點就能夠被更新。“linkedData”樣式類通知Mozilla文件link_data.XML將要被用來創建綁定。這個類是在<INPUT TYPE=”text” … >元素中使用的。

如果你分析link_data.xml的代碼,你會注意到onchange事件處理程序只是簡單地獲取XML數據島的link_data節點然後更新text節點的值。對於這個解決方案這是一個非常簡單的方法;它只在文本框中的值有改動之後才會更新數據。這不屬於two-way綁定機制,因為如果節點的值改變了,其改變不會反映到文本框。

當用戶點擊Test按鈕的時候,奇怪的事情發生了。一個新的XMLHttpRequest對象被創建用來向服務器改善XML數據。然後,就像XMLHTTP組件在IE中的工作方式一樣,你使用open()方法打開遠程頁面。在這個例子中,我添加了一個查詢字符串到XML_http.ASP頁面中,所以我可以使用同一個頁面處理XML傳輸。使用send()方法,我傳遞XMLData數據島的innerHtml。(在IE中,這與指定xmlData數據島的XML屬性一樣)。

在XML_http.ASP頁面被裝載時,它檢查“action”參數是否傳遞給頁面,並且那個參數是否等於“update”。如果是——就是在我們發出XMLHttpRequest請求的時候——它創建一個DOMDocument組件,從Request對象裝載XML,然後返回DOMDocument的xml。Request對象暴露出IStream接口,允許DOMDocument直接從Request對象裝載XML。(在另外一種語言中,你可以使用從HTTP請求中發送過來的POST數據。)

這是一個非常簡單的例子,說明了Mozilla的XML能力。在Mozilla中操作XML的其中一個缺點就是文檔不怎麼樣。不過上面已經提到過,對於絕大多數部分,你可以使用針對微軟的XMLHTTP組件的文檔。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved