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

來源:互聯網
上載者:User

標籤: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次)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.