Combining jquery and php to implement AJAX long polling-JS Tutorial-php.cn

Combining jquery and php to implement AJAX long polling

亚连

Release： 2018-05-24 16:23:14

Original

2070 people have browsed it

In the traditional AJAX polling method, the client queries the server for the latest data at user-defined intervals. This method of pulling data requires a short time interval to ensure the accuracy of the data, but if the time interval is too short, the customer service side will send multiple requests to the server in a short period of time.

HTTP is a stateless, one-way protocol. Users can only send requests to the server through the client and the server will process and send back a response. To implement instant messaging applications such as chat rooms, WEBQQ, online customer service, and mailboxes, "server push technology (Comet)" must be used.

Reverse AJAX, which is the so-called long polling or COMET. The server and client need to maintain a long-term request, which allows the server to return messages to the client when it has data.

XHTML

<p id="msg"></p>  
<input id="btn" type="button" value="测试" />

Copy after login

jQuery

Here we use AJAX to request the data.php page to get the value of 'success', the requested The time reaches 80 seconds. If no 'success' is returned from the server during these 80 seconds, the connection status will remain until data is returned or the value of 'success' is 0 before the connection is closed. After closing the connection, continue with the next request.

$(function(){ 
 $("#btn").bind("click",{btn:$("#btn")},function(evdata){  
   $.ajax({  
    type:"POST",  
    dataType:"json",  
    url:"data.php",  
    timeout:80000,  //ajax请求超时时间80秒  
    data:{time:"80"}, //40秒后无论结果服务器都返回数据  
    success:function(data,textStatus){  
     //从服务器得到数据，显示数据并继续查询  
     if(data.success=="1"){  
      $("#msg").append("<br>[有数据]"+data.text);  
      evdata.data.btn.click();  
     }  
     //未从服务器得到数据，继续查询  
     if(data.success=="0"){  
     $("#msg").append("<br>[无数据]");  
     evdata.data.btn.click();  
     }  
    },  
    //Ajax请求超时，继续查询  
    error:function(XMLHttpRequest,textStatus,errorThrown){  
      if(textStatus=="timeout"){  
       $("#msg").append("<br>[超时]");  
       evdata.data.btn.click();  
      }  
    }  
   });  
 });  
});

Copy after login

PHP

This is an infinite loop. The end condition of the loop is to obtain the return result and return Json data.

And accept the $_POST['time'] parameter to limit the loop timeout to avoid excessive waste of resources. (The browser will not send a message to the server when it is closed, and the use may continue in a loop)

if(emptyempty($_POST[&#39;time&#39;]))exit();  
set_time_limit(0);//无限请求超时时间  
$i=0;  
while (true){  
 //sleep(1);  
 usleep(500000);//0.5秒  
 $i++;  
 //若得到数据则马上返回数据给客服端，并结束本次请求  
 $rand=rand(1,999);  
 if($rand<=15){  
  $arr=array(&#39;success&#39;=>"1",&#39;name&#39;=>&#39;xiaocai&#39;,&#39;text&#39;=>$rand);  
  echo json_encode($arr);  
  exit();  
 }  
 //服务器($_POST[&#39;time&#39;]*0.5)秒后告诉客服端无数据  
 if($i==$_POST[&#39;time&#39;]){  
  $arr=array(&#39;success&#39;=>"0",&#39;name&#39;=>&#39;xiaocai&#39;,&#39;text&#39;=>$rand);  
  echo json_encode($arr);  
  exit();  
 }  
}

Copy after login

Operation effect: In the figure, you can see that the request time without data reaches 40S. If the data is obtained during the 40S request, The request is closed.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Jquery specific examples introduce when to use AJAX and where AJAX should be used

About Ajax cross-domain issues Two solutions

js ajax progress bar code when loading

The above is the detailed content of Combining jquery and php to implement AJAX long polling. For more information, please follow other related articles on the PHP Chinese website!