AJAX學習筆記：建立XMLHttpRequest對象的五步驟

XMLHttpRequest對象在大部分瀏覽器上已經實現而且擁有一個簡單的介面允許資料從用戶端傳遞到服務端，但並不會打斷使用者當前的操作。這是一個非常流行的做法，那麼如何建立一個XMLhttpRequest對象呢？

1、建立XMLHttpRequest對象

2、註冊回呼函數

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

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

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

下面就通過代碼來具體的來闡釋這五步。（首先介紹的是使用GET方式）

//定義全域變數var　xmlhttp;/* 1、建立XMLHttpRequest對象*說明：這是一個相對複雜的過程，因為要使用不同的瀏覽器*/if(window.XMLHttpRequest){//適用於IE7、IE8、FireFox、Opera等瀏覽器xmlhttp = new XMLHttpRequest();if(xmlhttp.overrideMineType){xmlhttp.overrideMineType("text/xml")}}else if(window.ActiveXObject){//IE6、IE5、IE5.5var activexName = ["MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];for(var i =0 ;i<activexName.length;i++){try{xmlhttp = new ActiveXObject(activexName[i]);}catch(e){}}}if(xmlhttp == undefind || xmlhttp == null){alert("當前瀏覽器不支援建立XMLHttpRequest對象");return;}/*2、給XMLHttpRequest對象註冊回調方法*注意：雖然callback是一個方法，但是這裡必須使用方法名，後面不用加（）*/xmlhttp.onreadystatechange = callback;/**3、設定和伺服器互動的相應的參數*///UserName是頁面中的控制項idvar userName = document.getElementById("UserName").value;xmlhttp.open("GET","AJAX?name="+userName,true);//open方法幾個重要的參數：get/post，伺服器位址，//XMLhttpRequest對象的互動方式即同步/非同步,true表示非同步方式)/**4、設定向伺服器發送的資料，啟動和伺服器的互動*/xmlhttp.send(null);function callback(){/**5、判斷和伺服器互動是否完成，還要判斷伺服器是否正確返回了資料*/if(xmlhttp.readyState == 4){//表示和伺服器端的互動已經完成if(xmlhttp.status == 200){//表示伺服器的響應代碼是200，正確的返回了資料//純文字資料的接受方法var message = xmlhttp.responsText();//如果使用的是DOM對象的接受方法，則//var doxXml = xmlhttp.responseXML();//但是有一個前提，伺服器端需要設定content-type為text/xmlvar div = document.getElementById("頁面div的ID")div.innerHTML = message;}}}

上面的方法是用的是GET方式，下面再來介紹一下使用POST方法

使用POST方法與GET方式只有3、4兩步又差異，其他的相同

/**3、設定和伺服器互動的相應的參數*///UserName是頁面中的控制項idvar userName = document.getElementById("UserName").value;xmlhttp.open("POST","AJAX",true);//open方法幾個重要的參數：get/post，伺服器位址，//XMLhttpRequest對象的互動方式即同步/非同步,true表示非同步方式)/**4、設定向伺服器發送的資料，啟動和伺服器的互動*/xmlhttp.setRequestHeader("Content-Type","application/x-www-fora-urlencoded");xmlhttp.send("name="+userName);