Ajax異步請求原理和過程

1.什麼是Ajax

Ajax是一種異步請求數據的web開發技術，對於改善用戶的體驗和頁面性能很有幫助。簡單地說，在不需要重新刷新頁面的情況下，Ajax 通過異步請求加載後臺數據，並在網頁上呈現出來。

2.AJAX創建異步對象XMLHttpRequest ( 考慮兼容性 )

AJAX 的要點是 XMLHttpRequest 對象。

不同的瀏覽器創建 XMLHttpRequest 對象的方法是有差異的，IE瀏覽器使用 ActiveXObject，而其他的瀏覽器使用名爲 XMLHttpRequest 的 JavaScript 內建對象。

例如：

　　var xhr=null; 
　　if (window.XMLHttpRequest)
　　 {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
    　　    xhr=new XMLHttpRequest();
   } else{// 兼容 IE6, IE5 
 　　 xhr=new ActiveXObject("Microsoft.XMLHTTP");  
    }
 

3.操作XMLHttpRequest 對象

（1）設置請求參數（請求方式，請求頁面的相對路徑，是否異步）

 xhr.open(method,url,async);  
 send(string);//post請求時才使用字符串參數，否則不用帶參數。

method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）

注意：post請求一定要設置請求頭的格式內容，get請求的參數拼接在url後面

（2）設置回調函數，一個處理服務器響應的函數，使用 onreadystatechange ，類似函數指針，如

　xhr.onreadystatechange=function()
　　{
　　　　// 相應的執行代碼
　　}

（3）獲取異步對象的readyState 屬性

該屬性存有服務器響應的狀態信息。每當 readyState 改變時，onreadystatechange 函數就會被執行。

readyState 屬性可能的值：

0：未初始化 – 尚未調用.open()方法；
1：啓動 – 已經調用.open()方法，但尚未調用.send()方法；
2：發送 – 已經調用.send()方法，但尚未接收到響應；
3：接收 – 已經接收到部分響應數據；
4：完成 – 已經接收到全部響應數據，而且已經可以在客戶端使用了；

在調用時，我們要向這個 onreadystatechange 函數添加一條 If 語句，來測試我們的響應是否已完成（意味着可獲得數據）：

　　xhr.onreadystatechange=function()
　　{
　　　　if(xhr.readyState==4)
　　　　{
　　　　　　// 從服務器的response獲得數據
　　　　}
　　}

（4）判斷響應報文的狀態，若爲200說明服務器正常運行並返回響應數據，
（5）讀取響應數據，可以通過 responseText 屬性來取回由服務器返回的數據。

xhr.onreadystatechange=function()
　　{
　　　　if(xhr.readyState==4){

　　　　　　if(xhr.status==200){

　　　　　　　　document.myForm.time.value=xmlHttp.responseText;

　　　　　　}
　　　　}
　　}

整體示例如下：

<form name="myForm"> 
　　用戶: <input type="text" name="username" onkeyup="ajaxFunction();" /> 
　　時間: <input type="text" name="time" /> 
</form> 


function ajaxFunction()
 {
 　　var xhr=null; //定義XMLHttpRequest對象
　　 if (window.XMLHttpRequest)
　　 {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
    　　    xhr=new XMLHttpRequest();
     } else{// 兼容 IE6, IE5 
 　　 		xhr=new ActiveXObject("Microsoft.XMLHTTP");  
    }
　　
　　xhr.open("GET","****.ashx",true)//設置請求方法，請求的目標頁面，以及是否異步
　　xhr.setRequestHeader("If-Modified-Since","0");

　　xhr.onreadystatechange=function(){　　//定義XMLHttpRequest對象的onreadystatechange屬性  　　

　　　　if(xhr.readyState==4)　{　　　//判斷XMLHttpRequest對象的狀態 
　　　　　　if(xhr.status==200){
　　　　　　　　document.myForm.time.value=xhr.responseText;//通過XMLHttpRequest對象的responseText屬性獲取回傳的數據 
　　　　　　} 
　　　　}
　　} 
　　xhr.send(null);//發送異步請求 
}