In the traditional AJAX round-robin mode, the customer service end queries the latest data on the server at a user-defined interval. This data pulling method requires a short time interval to ensure data accuracy. However, the customer service end sends multiple requests to the server within a short time interval.
Reverse AJAX is called long polling or COMET. The server and the client need to maintain a long request so that the server can return a message to the client when there is data.
XHTML
- <Div id = "msg"> </div>
- <Input id = "btn" type = "button" value = "test"/>
JQuery
Here, we use AJAX to request the data. php page to obtain the 'success' value. The request time reaches 80 seconds. If 'success 'is not returned from the server during the 80 seconds, the connection remains established until data is returned or the value of 'success' is 0. The next request is continued after the connection is closed.
- $ (Function (){
- $ ("# Btn"). bind ("click", {btn: $ ("# btn")}, function (evdata ){
- $. Ajax ({
- Type: "POST ",
- DataType: "json ",
- Url: "data. php ",
- Timeout: 80000, // ajax request timeout time 80 seconds
- Data: {time: "80"}, // after 40 seconds, no matter the result server returns data
- Success: function (data, textStatus ){
- // Obtain data from the server, display the data, and continue querying
- If (data. success = "1 "){
- $ ("# Msg"). append ("<br> [with data]" + data. text );
- Evdata. data. btn. click ();
- }
- // If no data is obtained from the server, continue to query
- If (data. success = "0 "){
- $ ("# Msg"). append ("<br> [no data]");
- Evdata. data. btn. click ();
- }
- },
- // The Ajax request times out and the query continues.
- Error: function (XMLHttpRequest, textStatus, errorThrown ){
- If (textStatus = "timeout "){
- $ ("# Msg"). append ("<br> [timeout]");
- Evdata. data. btn. click ();
- }
- }
- });
- });
- });
PHP
Here is an infinite loop, and the end condition of the loop is to get the returned result and return Json data.
In addition, the $ _ POST ['time'] parameter is used to limit the cycle timeout to avoid excessive resource waste. (When the browser is closed, messages will not be sent to the server, and the usage may keep repeating)
- If (emptyempty ($ _ POST ['time']) exit ();
- Set_time_limit (0); // unlimited request timeout
- $ I = 0;
- While (true ){
- // Sleep (1 );
- Usleep (500000); // 0.5 seconds
- $ I ++;
- // If data is obtained, the system immediately returns the data to the customer service end and ends the request.
- $ Rand = rand (1,999 );
- If ($ rand <= 15 ){
- $ Arr = array ('success' => "1", 'name' => 'xiaocai ', 'text' => $ rand );
- Echo json_encode ($ arr );
- Exit ();
- }
- // After the server ($ _ POST ['time'] * 0.5) seconds, the server notifies the customer service that there is no data.
- If ($ I ==$ _ POST ['time']) {
- $ Arr = array ('success' => "0", 'name' => 'xiaocai ', 'text' => $ rand );
- Echo json_encode ($ arr );
- Exit ();
- }
- }
Running effect: the figure shows that the request time without data reaches 40 S, and the request is closed if data is obtained in 40 S.