你知道反向ajax吗?知道反向ajax是怎么实现的吗?都不知道,还不快来看这篇文章,介绍了关于反向ajax的详细信息。下面开始阅读本篇
什么是反向ajax
反向 Ajax (Reverse Ajax) 本质上则是这样的一种概念:能够从服务器端向客户端发送数据。在一个标准的 HTTP Ajax 请求中,数据是发送给服务器端的,反向 Ajax 可以某些特定的方式来模拟发出一个 Ajax 请求,这样的话,服务器就可以尽可能快地向客户端发送事件(低延迟通信)。
反向ajax实现方式
1. 轮询 (Polling)
轮询其实是一种最笨的实现反向ajax的方法:用javascript在客户端定时发送ajax请求。
setInterval(function() { $.getJSON('events', function(events) { console.log(events); }); }, 2000);12345
为了尽快地获得服务器端事件,轮询的间隔(两次请求相隔的时间)必须尽可能地小。这样做的缺点就十分明显:如果间隔减小的话,客户端浏览器就会发出更多的请求,这些请求中的许多都不会返回任何有用的数据,而这将会白白地浪费掉带宽和处理资源。
2.PiggyBack(捎带轮询)
捎带轮询是一种比轮询更加聪明的做法,因为它会删除掉所有非必需的请求(没有返回数据的那些)。
它是一种半主动的方式,也就是说还是由Browser主动发出请求,但是每次请求的响应中除了当次的响应之外,还会把上次请求以来已经发生的变化同时发给Browser。
也就是说,当次请求的更新会搭载到下一次请求的响应一并发回。这样,在Browser的感觉就好像上一次请求又有了更新。但是这种感觉取决于Browser向Server发出请求的频率。如果,第二次请求迟迟没有发出,那么上一次的更新就不会取到。
3. Comet(服务器推)
这是一种基于 HTTP 长连接的“服务器推”技术。
实现方式主要有下面两种:
1)HTTP 流(HTTP Streaming)
在页面里嵌入一个隐蔵iframe,将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求,服务器端就能源源不断地往客户端输入数据。
优点:消息即时到达,不发无用请求;管理起来也相对方便。
缺点:服务器维护一个长连接会增加开销。
实例:Gmail聊天
<script type="text/javascript"> $(function () { (function iframePolling() { var url = "${pageContext.request.contextPath}/communication/user/ajax.mvc?timed=" + new Date().getTime(); var $iframe = $('<iframe id="frame" name="polling" style="display: none;" src="' + url + '"></iframe>'); $("body").append($iframe); $iframe.load(function () { $("#logs").append("[data: " + $($iframe.get(0).contentDocument).find("body").text() + " ]<br/>"); $iframe.remove(); // 递归 iframePolling(); }); })(); });</script>
2)HTTP 长轮询(HTTP Long Polling)
这种情况下,由客户端向服务器端发出请求并打开一个连接。这个连接只有在收到服务器端的数据之后才会关闭。服务器端发送完数据之后,就立即关闭连接。客户端则马上再打开一个新的连接,等待下一次的数据。(想看更多就到PHP中文网AJAX开发手册栏目中学习)
优点:在无消息的情况下不会频繁的请求,耗费资源小。
缺点:服务器hold连接会消耗资源,返回数据顺序无保证,难于管理维护。
实例:WebQQ、Hi网页版、Facebook IM。
<script type="text/javascript"> $(function () { (function longPolling() { $.ajax({ url: "${pageContext.request.contextPath}/communication/user/ajax.mvc", data: {"timed": new Date().getTime()}, dataType: "text", timeout: 5000, error: function (XMLHttpRequest, textStatus, errorThrown) { $("#state").append("[state: " + textStatus + ", error: " + errorThrown + " ]<br/>"); if (textStatus == "timeout") { // 请求超时 longPolling(); // 递归调用 // 其他错误,如网络错误等 } else { longPolling(); } }, success: function (data, textStatus) { $("#state").append("[state: " + textStatus + ", data: { " + data + "} ]<br/>"); if (textStatus == "success") { // 请求成功 longPolling(); } } }); })(); }); </script>
本篇文章到这就结束了(想看更多就到PHP中文网AJAX使用手册栏目中学习),有问题的可以在下方留言提问。
Atas ialah kandungan terperinci 反向ajax是什么?如何实现反向ajax?(精选版). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!