傳統(tǒng)的AJAX輪詢方式，客服端以用戶定義的時(shí)間間隔去服務(wù)器上查詢***的數(shù)據(jù)。種這種拉取數(shù)據(jù)的方式需要很短的時(shí)間間隔才能保證數(shù)據(jù)的精確度，但太短的時(shí)間間隔客服端會(huì)對(duì)服務(wù)器在短時(shí)間內(nèi)發(fā)送出多個(gè)請(qǐng)求。

反轉(zhuǎn)AJAX，就是所謂的長(zhǎng)輪詢或者COMET。服務(wù)器與客服端需要保持一條長(zhǎng)時(shí)間的請(qǐng)求，它使得服務(wù)器在有數(shù)據(jù)時(shí)可以返回消息給客戶端。

XHTML

<div id="msg"></div>     
<input id="btn" type="button" value="測(cè)試" />    

jQuery

這里使用AJAX請(qǐng)求data.php頁(yè)面獲得‘success’的值,請(qǐng)求的時(shí)間達(dá)到80秒。在這80秒中若沒(méi)有從服務(wù)端返回‘success’則一直保持連接狀態(tài)，直到有數(shù)據(jù)返回或‘success’的值為0才關(guān)閉連接。在關(guān)閉連接后在繼續(xù)下一次的請(qǐng)求。

$(function(){   
    $("#btn").bind("click",{btn:$("#btn")},function(evdata){      
         $.ajax({      
                type:"POST",      
                dataType:"json",      
                url:"data.php",      
                timeout:80000,     //ajax請(qǐng)求超時(shí)時(shí)間80秒      
                data:{time:"80"}, //40秒后無(wú)論結(jié)果服務(wù)器都返回?cái)?shù)據(jù)      
                success:function(data,textStatus){      
                    //從服務(wù)器得到數(shù)據(jù)，顯示數(shù)據(jù)并繼續(xù)查詢      
                    if(data.success=="1"){      
                     $("#msg").append("<br>[有數(shù)據(jù)]"+data.text);      
                     evdata.data.btn.click();      
                    }      
                 //未從服務(wù)器得到數(shù)據(jù)，繼續(xù)查詢      
                    if(data.success=="0"){      
                    $("#msg").append("<br>[無(wú)數(shù)據(jù)]");      
                    evdata.data.btn.click();      
                    }      
                },      
             //Ajax請(qǐng)求超時(shí)，繼續(xù)查詢      
             error:function(XMLHttpRequest,textStatus,errorThrown){      
                     if(textStatus=="timeout"){      
                         $("#msg").append("<br>[超時(shí)]");      
                         evdata.data.btn.click();      
                     }      
             }      
                      
            });      
    });      
          
});    

PHP

在這里是無(wú)限的循環(huán)，循環(huán)的結(jié)束條件就是獲取到了返回結(jié)果返回Json數(shù)據(jù)。

并且接受$_POST['time']參數(shù)來(lái)限制循環(huán)的超時(shí)時(shí)間，避免資源的過(guò)度浪費(fèi)。(瀏覽器關(guān)閉不會(huì)發(fā)消息給服務(wù)器，使用可能一直循環(huán)下去)

if(emptyempty($_POST['time']))exit();      
set_time_limit(0);//無(wú)限請(qǐng)求超時(shí)時(shí)間      
$i=0;      
while (true){      
    //sleep(1);      
    usleep(500000);//0.5秒      
    $i++;      
          
    //若得到數(shù)據(jù)則馬上返回?cái)?shù)據(jù)給客服端，并結(jié)束本次請(qǐng)求      
    $rand=rand(1,999);      
    if($rand<=15){      
        $arr=array('success'=>"1",'name'=>'xiaocai','text'=>$rand);      
        echo json_encode($arr);      
        exit();      
    }      
          
    //服務(wù)器($_POST['time']*0.5)秒后告訴客服端無(wú)數(shù)據(jù)      
    if($i==$_POST['time']){      
        $arr=array('success'=>"0",'name'=>'xiaocai','text'=>$rand);      
        echo json_encode($arr);      
        exit();      
    }      
}   

運(yùn)行效果:在圖中可以看到無(wú)數(shù)據(jù)的請(qǐng)求時(shí)間達(dá)到了40S，在40S的請(qǐng)求中若獲得數(shù)據(jù)則請(qǐng)求關(guān)閉。

原文鏈接：http://www.xiaocai.name/emlog/?post=32

【編輯推薦】

1. 如何理解與簡(jiǎn)化jQuery的closest函數(shù)
2. 手把手教你使用jQuery操作元素的屬性與樣式
3. 從零開(kāi)始學(xué)習(xí)jQuery之管理jQuery包裝集
4. jQuery性能指標(biāo)和調(diào)優(yōu)
5. jQuery實(shí)現(xiàn)仿人人網(wǎng)彈出層效果