1. 程式人生 > >使用原生ajax進行巢狀請求伺服器回送值為空的完美解決方案

使用原生ajax進行巢狀請求伺服器回送值為空的完美解決方案

在進行Web開發時候使用Ajax技術進行前後臺的互動是非常的常用的技術手段,而當你面臨著以下的業務需求的時候你就需要進行Ajax的巢狀請求

業務需求

現在需要向伺服器傳送請求,我需要根據伺服器那邊的響應來決定是否發出另外一個請求,這叫做請求的巢狀
看以下的程式碼這是一個典型的請求範例
以下ajax例項程式碼

<script>
window.onload=function()
{
    var TBtn = document.getElementById("btn1");
    TBtn.onclick = function()
    {
        //如果有XMLHttpRequest,那就是非IE6瀏覽器。()裡面加window的原因下面會有描述。
if(window.XMLHttpRequest) { var TAjax = new XMLHttpRequest();//建立ajax物件 } else//如果沒有XMLHttpRequest,那就是IE6瀏覽器 { var TAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器建立ajax物件 } TAjax.open("GET","a.txt?t='+new Date().getTime()"
,true);//加上t='+new Date().getTime()"的目的是為了消除快取,每次的t的值不一樣。 //傳送請求 TAjax.send(); //接收返回 //客戶端和伺服器端有互動的時候會呼叫onreadystatechange TAjax.onreadystatechange=function() { if(TAjax.readyState==4) { if(TAjax.status==200)//判斷是否成功,如果是200,就代表成功
{ alert("成功"+TAjax.responseText); } else { alert("失敗"); } } }; } };
</script>

我們可以看見在傳送請求的時候我們使用這句話來決定傳送什麼樣的請求
TAjax.open(“GET”,”a.txt?t=’+new Date().getTime()”,true);
//非同步傳輸
//非同步:多件事一件一件的做
//同步:多件事情一起進行
//但是js裡面的同步和非同步和現實的同步非同步相反。
//同步:多件事一件一件的做
//非同步:多件事情一起進行
//ajax天生是用來做非同步的

問題

使用原生ajax進行巢狀請求伺服器回送值為空,我們需要明白下巢狀使用的時候伺服器幹了啥事情,首先先發送請求的ajax物件會獲得一把鎖名為非同步鎖,那麼一直到函式執行完畢這把鎖也不會釋放,所以第二層請求壓根不會被執行。

解決方案

所以當我們在寫第二層請求的時候就要注意傳送同步請求,也就是將ajax請求的引數設為false;這樣他會避開非同步鎖,去要同步鎖
比如說按照先後順序
1. TAjax.open(“GET”,”a.txt?t=’+new Date().getTime()”,true);
2. TAjax2.open(“GET”,”b.txt?t=’+new Date().getTime()”,false);