ajax教程栏目介绍实时刷新处理

　　（免费）：ajax教程
 

　　作为一个老前端，本案例是基于jquery来写的。

　　前端渲染页面拿数据，无非就是ajax、socket，其他的暂时没有用过，但项目还是使用ajax比较多。

　　下面来看一下一个简单基于ajax短轮询的请求

　　function req() { $.ajax({ type: 'get', url: 'demo.php', dataType: 'json', success: function(res) { console.log(res); }, error: function() { console.log('请求失败~'); } }); } req(); setInterval(req, 3000);

　　如果网速快而稳定的话，可以这样使用，但网速谁能确定呢，如果网速不稳定的线秒，这样就会造成ajax请求堆积，近而引发不可估量的问题，那么怎样去避免这个问题呢？

　　方式一：给请求赋上一个变量，然后每次轮询先abort掉上一个请求

　　var ajaxReq = null; function req(isLoading) { if(ajaxReq !== null) { ajaxReq.abort(); ajaxReq = null; } ajaxReq = $.ajax({ type: 'get', url: 'demo.php', dataType: 'json', beforeSend: function() { if(isLoading) { $('.zh-loading').show(); } }, success: function(res) { console.log(res); }, complete: function() { if(isLoading) { $('.zh-loading').hide(); } }, error: function() { console.log('请求失败~'); } }); } req(true); setInterval(function() { req(false); }, 3000);

　　猛一看，感觉还行，差不多就OK了，但作为前端的我们要不断的去寻找更合适的方式，所以有个下面这个。

　　方式二：每一次轮询都判断上一次请求是否完成，完成了才会执行下一次的请求（）

　　上面的 isLoaded && req({"init": 0}); 表示前面一个条件正确，则执行&&后面的方法

　　正常的写法是

　　if(isLoaded) req({"init": 0});

　　另外注意一点：isLoaded=true 要在complete里加，如果只在success里加的话， 请求失败了就不会轮询再请求了。complete不管success或error都会执行

　　代码就到这里了，thank you for attention~

　　相关免费学习：javascript