- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>ajax长轮询和短轮询</title>
- </head>
- <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
- <script type="text/javascript">
- // 使用定时器实现短轮询
- function shortPolling() {
- setInterval(shortAjax,5000);
- }
- function shortAjax() {
- $.ajax({
- type:"get",
- url:"/javatest/student/findOneShort/" + 10001,
- dataType:"json",
- success:function(result) {
- var msg = $("#message").html() + result.id+':'+result.name+'='+result.score+'\n';
- $("#message").html(msg);
- },
- timeout:10000, //测试超时10s会不会报错，实际可以调大一点
- error:function (error) {
- console.log("ajax执行失败");
- }
- })
- }
- // 长轮询
- function longPolling() {
- $.ajax({
- type:"get",
- url:"/javatest/student/findOneLong/" + 10001,
- dataType:"json",
- success:function(result) {
- var msg = $("#message").html() + result.id+':'+result.name+'='+result.score+'\n';
- $("#message").html(msg);
- longPolling(); // 正常获取数据马上发起新请求
- },
- timeout:15000, //测试超时15s会不会报错，实际可以调大一点
- error:function (error) {
- console.log("ajax执行失败");
- longPolling(); // 超时或报错则重新发起请求
- }
- })
- }
- </script>
- <body>
- <p>【操作】：<div><input type="button" id="short" onclick="shortPolling()" value="ajax短轮询"/><br/>
- <p>【操作】：<div><input type="button" id="long" onclick="longPolling()" value="ajax长轮询"/><br/>
- <p>【接收内容】：<div><textarea id="message" rows="10" cols="30"></textarea></div>
- </body>
- </html>
以上就是AJAX轮询示例的详细内容，更多关于AJAX轮询示例的资料请关注九品源码其它相关文章！