AJAX入門---五步使用XMLHttpRequest對象

標籤：ajax xmlhttprequest

         XMLHttpRequest簡介：

         XMLHttpRequest對象可以在不向伺服器提交整個頁面的情況下，實現局部更新網頁。當頁面全部載入完畢後，用戶端通過該對象向伺服器請求資料，伺服器端接受資料並處理後，向用戶端反饋資料。XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或非同步返回 Web 服務器的響應，並且能以文本或者一個 DOM 文檔形式返回內容。儘管名為 XMLHttpRequest，它並不限於和 XML 文檔一起使用：它可以接收任何形式的文字文件。

         五步使用XMLHttpRequest對象         1．  建立XMLHttpRequest對象如下：

         （不同瀏覽器中XMLHttpRequest對象建立的方式不同：IE7以上，FireFox，Safari，Opera等中直接newXMLHttpRequest()；IE6，IE5.5等則需要通過用一個正確的ActiveXObject控制項名稱通過new ActiveXObject(控制項名)的方式）

if (window.XMLHttpRequest) {    xmlhttp=new XMLHttpRequest();    if (xmlhttp.overrideMimeType) {        xmlhttp.overrideMimeType("text/xml");    }}else if (window.ActiveXObject) {    var activexName=["MSXML.2.XMLHTTP.6.0","MSXML.2.XMLHTTP.5.0",                    "MSXML.2.XMLHTTP.4.0","MSXML.2.XMLHTTP.3.0",                    "MSXML.2.XMLHTTP","Miscrosoft.XMLHTTP"];    for (var i = 0; i <activexName.length; i++) {        try {            xmlhttp=new ActiveXObject(activexName[i]);        } catch (e) {        }    }}

         2．  註冊回呼函數

         （設定回呼函數是，不要在函數名後面加括弧。加括弧表示將回呼函數的返回值註冊給onreadystatechange屬性）

xmlhttp.onreadystatechange=callback; 

         3．  使用open方法設定伺服器端互動的基本資料

         （open方法最多有五個參數局，其中頭三個參數是必須的）

//使用GET方式時，請求資料位元於url連結中，後面的send方法的參數直接寫nullxmlhttp.open("GET","Ajax?name="+ userName,true );      //使用POST方式時，open方法後面需要先調用setRequestHeader方法，來設定Content-Type的值，然後調用send方法，send的參數就是請求的資料xmlhttp.open("POST","Ajax", true); xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

         4．  設定發送的資料，開始和伺服器端互動

//GET方式xmlhttp.send(null); //POST方式xmlhttp.send("name=" + userName);

         5．  在回呼函數中判斷互動是否結束，響應是否正確，並根據需要擷取伺服器端返回的資料，更新頁面的內容

         （回呼函數中，最好將判斷readyState和status的兩個if條件，分開來寫）

function callback(){    //5.判斷和伺服器端的互動是否完成，還要判斷伺服器端是否正確返回了資料    if (xmlhttp.readyState == 4) {        //表示和伺服器端的互動已經完成        if (xmlhttp.status==200) {            //表示和伺服器的響應代碼是200，正確的返回了資料            //純文字資料的接受方法             var message =xmlhttp.responseText;            //Xml資料對應的Dom對象的接受方法            //使用的前提是，伺服器端需要設定content-type為text/xml            //var domXml=xmlhttp.responseXML;            //向div標籤中填充常值內容的方法            var div=document.getElementById("message");            div.innerHTML=message;        }    }}

         總結：

         當然通過這個小小的例子，我們只能說是經曆了一個從不知道到知道的過程，初步瞭解了一下XMLHttpRequest對象的用法，更加深刻的理解還需要我們更加深入的學習和在實踐中加以利用。

文中demo源碼免費下載連結：http://download.csdn.net/detail/senior_lee/7707257