ajax之請求對象的建立以及它與伺服器之間的4次“握手”（好吧其實只有3次）

標籤：style   http   java   os   使用   io   ar   資料   2014   

request對象的建立

對於request對象的建立，我們總會第一時間反映到下列語句

var request=new XMLHttpRequest();

不過因為各大瀏覽器之間的相互鬥毆行為，事情是不會這麼簡單的。

比如非常經典的：IE瀏覽器沒有XMLHttpRequest函數。

但這難不倒我們聰明機智的程式員，我們也有經典的應對措施：

function createRequest(){    try{        request=new XMLHttpRequest();    }catch(tryMS){        try{            request=new ActiveXObject("Msxml2.XMLHTTP");        }catch(otherMS){            try{                request=new ActiveXObject("Microsoft.XMLHTTP");            }catch(failed){                request=null;            }        }    }    return request;}var request=createRequest();

此方法相容各大瀏覽器，可收藏至自己的utils.js當中。

request對象與伺服器的幾次“握手”

其實就本質而言，request對象是先向瀏覽器請求，然後瀏覽器再向伺服器請求；然後伺服器做出反饋，瀏覽器接收到返回後對request對象做出修改。

首先是checkName.php的代碼：

<?php$takenUsernames = array (‘bill‘, ‘ted‘);sleep(2);if (!in_array( $_REQUEST[‘username‘], $takenUsernames )) {echo ‘okay‘;} else {echo ‘denied‘;}?>

注意sleep(2)這個語句。

然後是JavaScript的代碼：

function checkUsername(){    var url="checkName.php?username="+userName;    request.onreadystatechange=showUsernameStatus;    request.open("GET",url,true);    request.send(null);}function showUsernameStatus(){    console.info((new Date)+"request.readyState : "+request.readyState+"request.responseText : "+request.responseText);}

當checkUsername被執行且username不為“bill”或“ted”時，可在控制台看到：

Mon Aug 25 2014 21:37:01 GMT+0800 (中國標準時間)request.readyState : 1 request.responseText :  Mon Aug 25 2014 21:37:03 GMT+0800 (中國標準時間)request.readyState : 2 request.responseText :  Mon Aug 25 2014 21:37:03 GMT+0800 (中國標準時間)request.readyState : 3 request.responseText :  Mon Aug 25 2014 21:37:03 GMT+0800 (中國標準時間)request.readyState : 4 request.responseText : okay

可以看到request.onreadystatechange事件被觸發了4次。這4次具體是這樣子的：

第一次：request.open("GET",url,true)執行完畢，request.readyState為1，請求已準備好可以發送

第二次：request.readyState為2，表示伺服器已接收到請求並正在處理

第三次：request.readyState為3，資料下載到請求對象，但相應資料還沒有完全準備好，還不能使用

第四次：request.readyState為4，伺服器處理完請求，資料可以使用，可以看到，此時request.responseText已有“okay”這個值

以上就是request和伺服器的4次“握手”。

如果我們在進行ajax編程時無法得到返回的資料，可以看看請求對象的readyState屬性的值，便可以知道伺服器那邊的處理是進行到哪一步再出現問題。

ajax之請求對象的建立以及它與伺服器之間的4次“握手”（好吧其實只有3次）