Ajax核心物件 XMLHTTPRequest 五步學會使用

NO IMAGE

首先還是先了解Ajax

AJAX = Asynchronous JavaScript andXML(非同步的 JavaScript 和 XML)。通過在後臺與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。Ajax的核心思想在於非同步互動。

要明白非同步互動可以通過同步和非同步的對比很容易明白:

    -同步互動,就是最常見的click-refresh模式,點一個連線或提交一個表單,然後就必須過載整個頁面

    -非同步互動,提交請求返回物件是不可見的層,通過javascripts根據返回資料,不重新整理頁面而改變當前頁面的顯示,例如:新浪微博,百度地圖

顯而易見,Ajax使得web應用更加完善,和使用者的互動更加友好。

 

    Ajax的非同步互動如何開始的,那就是從XMLHttpRequest這個物件開始,它允許通過javascript來執行HTTP請求,並且將會解析一個XML格式的伺服器響應,這個過程使用者不用等待伺服器的響應,使用者可以繼續進行其它操作,然後,伺服器將資料返回JavaScript(仍然在
Web 表單中),然後對資料進行處理。這個過程可以迅速更新表單資料,可以不重新整理頁面使得使用者得到了新資料。

  下面就來看XMLHTTPRequest的五步使用法,來實現非同步互動:

  1.建立XMLHTTPRequest物件

        //1.建立XMLHttpRequest物件
if (window.XMLHttpRequest) {
//IE7 8,firefox,chrome
//alert("IE7 8,firefox,chrome");
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
}else if (window.ActiveXObject) {
//IE6 及以下
//alert("IE6 -");
var activexName = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0"];
for (var i = 0; i < activexName.length; i  ) {
try {
var xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
}
if (xmlhttp === undefined || xmlhttp === null) {
alert("當前瀏覽器不支援XMLHttpRequest物件");
return;
}

  
注意事項:

  不同瀏覽器中XMLHttpRequest物件的建立方式是不同的,其實只分為兩類,主要是IE版本的問題:

  一是IE6
及以下版本,需要通過某一個正確的ActiveXObject控制元件的名稱通過new
ActiveXObject(控制元件名)的方式

  二是IE7
及以上版本,firefox,chrome等非IE瀏覽器,直接new
XMLHttpRequest()

詳見以上程式碼!

  2.註冊回撥函式

          //狀態檢測
//array.push(xmlhttp.readyState);
//2.註冊回撥函式
xmlhttp.onreadystatechange = callback;
      //回撥函式callback見第5步

   

   注意事項:   

     設定回撥函式時,不要再函式名後面加括號。加括號表示將回撥函式的返回值註冊給onreadystatechange屬性,正確的方式應該是將回撥函   數的名字註冊給這個屬性。

     實際上每次readyState的值發生變化時,回撥函式都會被呼叫,但是一般我們只關心狀態4,表示響應已經完全接受。

   如果只關心正確的響應資料,只要在執行send方法之前設定回撥函式即可,但是仍然建議在XMLHttpRequest物件建立後就先設定回撥函式,這樣   回撥函式還可以處理其他的狀態。

  3.使用open方法設定和伺服器端互動的基本資訊

     程式碼見4

  4.設定傳送的資料,開始和伺服器端互動

        //從文字框中獲取內容
var userName = document.getElementById("UserName").value;
//alert(userName);//測試
//Get方式,傳輸的資料都在url中,?後面
//3.設定和伺服器端互動的相應引數,true表示非同步方式互動
xmlhttp.open("GET","AJAX?name="   userName,true);
//4.設定伺服器端傳送的資料,啟動和伺服器端的互動
xmlhttp.send(null);//get方式不需要資料,null
/*
//post方式互動
//3.設定和伺服器端互動的相應引數
xmlhttp.open("POST","AJAX",true);
//設定post請求頭資訊
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.設定伺服器端傳送的資料,啟動和伺服器端的互動
xmlhttp.send("name="   userName);
//alert("test");
*/

   注意事項:

     open方法最多可以有五個引數,其中前三個引數是必須的。

     使用GET方式時,請求資料位於url連線中,後面的send方法的引數直接寫null。

     使用POST方式時,open方法後面需要先呼叫setRequestHeader方法,來設定Content-Type的值,然後呼叫send方法,send的引數就是請求的資料。

     回撥函式中,最好將判斷readyState和statue的兩個if條件分來寫,readyState的判斷位於外層,status的位於內層。以便於分別處理伺服器不是200響應的情況和readyState不是4的情況。

  5.在回撥函式中判斷互動是否結束,響應是否正確,並根據需要獲取伺服器端返回的資料,更新頁面內容

      //回撥函式
function callback(){              
//狀態檢測
//array.push(xmlhttp.readyState);
//alert("1122");
//5.判斷和伺服器端的互動是否完成,還要判斷伺服器是否正確返回了資料
if (xmlhttp.readyState === 4) {
//表示和伺服器端的互動已經完成
if (xmlhttp.status === 200) {
//表示伺服器的相應程式碼是200,正確的返回了資料
//兩個判斷成功後,從XMLHttpRequest物件中取回伺服器端返回的資料,可以通過兩種方式返回:
//純文字方式或XML對應的DOM物件
//純文字資料的接受方式
var message = xmlhttp.responseText;
//alert("1122");
//XML對應的DOM物件的接受方式
//使用前提是,伺服器端需要設定contenttype為text/xml
//var domXml = xmlhttp.responseXML;
//記憶向div標籤中填充文字內容的方法
var div = document.getElementById("message");
div.innerHTML = message;
//輸出狀態
//alert(array);
}
}
}

   注意事項:

          當伺服器端沒有正確返回XML資料時,在js中使用responseXML的方式獲取返回的XML資料對應的DOM物件是,firefox和ie的結果是有差別的,ie獲取根元素節點為null,而firefox獲取根元素節點則是一個表示解析錯誤的元素節點。

  簡單的五步學會使用XMLHTTPRequest
物件,一個Ajax非同步互動客戶端js程式碼就完成了,當然這並不代表XMLHttpRequest物件的終結,接下來會對其存在的一些問題進行分析,下次見!