Implementing Ajax long polling (LongPoll) based on jQuery and PHP_PHP tutorial

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.

Reverse AJAX, which is 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 there is data.

The requested 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.

<ol class="dp-xml">
<li class="alt"><span><span class="tag"><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"msg"</span><span class="tag">></span><span class="tag"></span><span class="tag-name">div</span><span class="tag">></span><span>     </span></span></span></li>
<li><span class="tag"><span class="tag-name">input</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"btn"</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span> </span><span class="attribute">value</span><span>=</span><span class="attribute-value">"测试"</span><span> </span><span class="tag">/></span><span>    </span></span></li>
</ol>

PHP

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

And accepts 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)

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

Operating effect: In the picture, you can see that the request time without data reaches 40S. In the 40S request, if Request to close when data is obtained.

<ol class="dp-c">
<li class="alt"><span><span class="keyword">if</span><span>(</span><span class="func">empty</span><span class="keyword">empty</span><span>(</span><span class="vars">$_POST</span><span>[</span><span class="string">'time'</span><span>]))</span><span class="func">exit</span><span>();      </span></span></li>
<li>
<span>set_time_limit(0);</span><span class="comment">//无限请求超时时间     </span><span> </span>
</li>
<li class="alt">
<span class="vars">$i</span><span>=0;      </span>
</li>
<li>
<span class="keyword">while</span><span> (true){      </span>
</li>
<li class="alt">
<span>    </span><span class="comment">//sleep(1);     </span><span> </span>
</li>
<li>
<span>    usleep(500000);</span><span class="comment">//0.5秒     </span><span> </span>
</li>
<li class="alt">
<span>    </span><span class="vars">$i</span><span>++;      </span>
</li>
<li><span>          </span></li>
<li class="alt">
<span>    </span><span class="comment">//若得到数据则马上返回数据给客服端，并结束本次请求     </span><span> </span>
</li>
<li>
<span>    </span><span class="vars">$rand</span><span>=rand(1,999);      </span>
</li>
<li class="alt">
<span>    </span><span class="keyword">if</span><span>(</span><span class="vars">$rand</span><span></span>
</li>
<li>
<span>        </span><span class="vars">$arr</span><span>=</span><span class="keyword">array</span><span>(</span><span class="string">'success'</span><span>=></span><span class="string">"1"</span><span>,</span><span class="string">'name'</span><span>=></span><span class="string">'xiaocai'</span><span>,</span><span class="string">'text'</span><span>=></span><span class="vars">$rand</span><span>);      </span>
</li>
<li class="alt">
<span>        </span><span class="func">echo</span><span> json_encode(</span><span class="vars">$arr</span><span>);      </span>
</li>
<li>
<span>        </span><span class="func">exit</span><span>();      </span>
</li>
<li class="alt"><span>    }      </span></li>
<li><span>          </span></li>
<li class="alt">
<span>    </span><span class="comment">//服务器($_POST['time']*0.5)秒后告诉客服端无数据     </span><span> </span>
</li>
<li>
<span>    </span><span class="keyword">if</span><span>(</span><span class="vars">$i</span><span>==</span><span class="vars">$_POST</span><span>[</span><span class="string">'time'</span><span>]){      </span>
</li>
<li class="alt">
<span>        </span><span class="vars">$arr</span><span>=</span><span class="keyword">array</span><span>(</span><span class="string">'success'</span><span>=></span><span class="string">"0"</span><span>,</span><span class="string">'name'</span><span>=></span><span class="string">'xiaocai'</span><span>,</span><span class="string">'text'</span><span>=></span><span class="vars">$rand</span><span>);      </span>
</li>
<li>
<span>        </span><span class="func">echo</span><span> json_encode(</span><span class="vars">$arr</span><span>);      </span>
</li>
<li class="alt">
<span>        </span><span class="func">exit</span><span>();      </span>
</li>
<li><span>    }      </span></li>
<li class="alt"><span>}   </span></li>
</ol>

http://www.bkjia.com/PHPjc/445814.html

www.bkjia.com
true

http: //www.bkjia.com/PHPjc/445814.html

TechArticleIn 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 data...