使用Ajax長輪詢跨頁資料查詢操作-教學撰寫:徐嘉裕Neil hsu

會使用到Ajax長輪詢功能也是意外，本來是想用JS跨域查詢，由A頁面查詢B頁面執行ajax程序後返回值做同步處理，結果經測試JS跨域查詢只能查到讀取頁面的原始資料，無法取得JS程序處理過後的變動數值，試了半天，只好用Ajax長輪詢來解決問題了，順便寫一個工作心得做為紀錄

Ajax長輪詢跨頁資料查的運作原理如下圖

以上圖解也就是使用Ajax長輪詢保持連線持續查詢資料庫，若有比對到資料則返回數值後以非同步方式更新內容，沒有就繼續查，保持連線狀態，舉一個Ajax長輪詢應用實例大家就清楚了，FB上貼文留言，即便未更新頁面，有其他用戶的的留言也會即時顯示在留言處，這就是使用了Ajax長輪詢的效果讓Ajax一直保持在連線查詢返回更新狀態，即時同步資料。

以下為Ajax長輪詢CODE 範例

//HTML結構
<div id='showbox'><span id='numberbox'>30</span></div>
<script>ajaxlongpolling();</script>
//30為固定值，透過JS取值後傳送到ajax.php比對資料

//JS結構-$.ajax
function ajaxlongpolling() {
$.ajax({
url: 'ajax.php',
timeout: '80000', //ajax請求超時時間80秒
type: 'POST',
data: {
var1: $("#numberbox").text(), //取的#numberbox中數值
timedate: '80' //40秒後無論結果伺服器都返回數據
},
success: function(response) {
var $response_arr = response.split(','); //切割陣列
//返回1->查詢到資料-重新讀取ajaxlongpolling();
if ($response_arr['0'] == '1') {
alert('查詢到資料');
$("#showbox").html($response_arr['1']); //更新#showbox中數值
ajaxlongpolling();
}
//返回0->未查詢到資料-重新讀取ajaxlongpolling();
if ($response_arr['0'] == '0') {
alert('未查詢到資料');
ajaxlongpolling();
}
},
error: function() {
console.log('ajax error!');
}
})
}

//PHP結構-ajax.php
if(empty($_POST['timedate']))exit();
set_time_limit(0); //無限請求超時時間
$i=0;
while (true) { //無限迴圈開始
usleep(500000); //while每次迴圈延遲0.5秒
$i++;

//查詢資料庫MYSQL程式可以放這裡

//select * from CODE............略

$datavar=rand(1,50); //rand()可改為查詢資料表後返回結果值

//$_POST['var1']為傳入值

//$datavar為比對值

//查詢條件成立，得到數據返回前端並結束本次查詢
if($datavar==$_POST['var1']) {
//返回頁面後更新#showbox中數據
$returnvar="<span id='numberbox'>".$datavar."</span>";
$state=1;
echo $state.','.$returnvar;
unset($datavar,$returnvar);//刪除變數
exit();
}

//伺服器($_POST['timedate']*0.5)秒後返回前端無數據
if($i==$_POST['timedate']) {
$state=0;
echo $state.','.false;
unset($datavar,$returnvar);//刪除變數
exit();
}
}

這樣就能做到跨頁即時資料同步了，重點是【資料必須儲存在資料庫】，若只是A頁面向B頁面的ajax.php傳送數值是無效的，必須透過資料庫提供給Ajax查詢返回，才能達成跨頁資料查詢操作。

以上工作心得分享，有需要的朋友參考看看

參考資料來源：https://www.aiwalls.com/php%E7%B7%A8%E7%A8%8B%E6%95%99%E5%AD%B8/25/36623.html

工作心得撰寫：徐嘉裕 Neil hsu