反向Ajax简单概述

最新推荐文章于 2018-10-21 15:15:00 发布

李武杨

最新推荐文章于 2018-10-21 15:15:00 发布

阅读量1.4k

点赞数

分类专栏： ajax 文章标签： ajax web服务器框架

本文链接：https://blog.csdn.net/liwuyang2013/article/details/18934647

版权

反向Ajax允许服务器端向客户端推送数据，用于实现低延迟通信。文章介绍了轮询、JSONP、捎带轮询、Comet、流、Forever Iframe、Multi-part XMLHttpRequest等多种实现方式，探讨了各自的优缺点，提供了实现实时Web应用的技术方案。

摘要由CSDN通过智能技术生成

1、什么是反向ajax

反向Ajax（Reverse Ajax）本质上则是这样的一种概念：能够从服务器端向客户端发送数据。在一个标准的HTTPAjax请求中，数据是发送给服务器端的，反向Ajax可以某些特定的方式来模拟发出一个Ajax请求，这些方式本文都会论及，这样的话，服务器就可以尽可能快地向客户端发送事件（低延迟通信）。

2、反向ajax的目的

反向Ajax的目的是允许服务器端向客户端推送信息。Ajax请求在缺省情况下是无状态的，且只能从客户端向服务器端发出请求。你可以通过使用技术模拟服务器端和客户端之间的响应式通信来绕过这一限制。

3、为什么使用反向ajax

web开发在过去的几年中有了很大的进展，我们已经远超了把静态网页链接在一起的做法，这种做法会引起浏览器的刷新，并且要等待页面的加载。现在需要的是能够通过web来访问的完全动态的应用，这些应用通常需要尽可能的快，提供近乎实时的组件。

4、实现反向ajax

a、轮询（polling）

轮询（polling）涉及了从客户端向服务器端发出请求以获取一些数据，这显然就是一个纯粹的Ajax HTTP请求。为了尽快地获得服务器端事件，轮询的间隔（两次请求相隔的时间）必须尽可能地小。但有这样的一个缺点存在：如果间隔减小的话，客户端浏览器就会发出更多的请求，这些请求中的许多都不会返回任何有用的数据，而这将会白白地浪费掉带宽和处理资源。

JSONP轮询基本上与HTTP轮询一样，不同之处则是JSONP可以发出跨域请求（不是在你的域内的请求）。清单1使用JSONP来通过邮政编码获取地名，JSONP请求通常可通过它的回调参数和返回内容识别出来，这些内容是可执行的JavaScript代码。

用JavaScript实现的轮询的优点和缺点：

1. 优点：很容易实现，不需要任何服务器端的特定功能，且在所有的浏览器上都能工作。

2. 缺点：这种方法很少被用到，因为它是完全不具伸缩性的。试想一下，在100个客户端每个都发出2秒钟的轮询请求的情况下，所损失的带宽和资源数量，在这种情况下30%的请求没有返回数据。

5、客户端代码实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>HTTP Polling</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
    <script type="text/javascript">
        jQuery(function($) {
            setInterval(function() {
                $('body').append('<span>[client] checking for events...</span><br/>');
                $.getJSON('events', function(events) {
                    if(events.length) {
                        $('body').append('<span style="color: blue;">[client] ' + events.length + ' events</span><br/>');
                    } else {
                        $('body').append('<span style="color: red;">[client] no event</span><br/>');
                    }
                    for (var i in events) {
                        $('body').append('<span>[event] ' + events[i] + '</span><br/>');
                    }
                });
            }, 2000);
        });
    </script>
</head>
<body style="font-family: monospace;">
</body>
</html>

6、服务器端代码实现

public final class PollingServlet extends HttpServlet {

    private final Random random = new Random();
    private final BlockingQueue<String> messages = new LinkedBlockingQueue<String>();
    private final Thread generator = new Thread("Event generator") {
        @Override
        public void run() {
            while (!Thread.currentThread().isInterrupted()) {
                try {
                    Thread.sleep(random.nextInt(5000));
                } catch (InterruptedException e) {
                    Thread.currentThread().interrupt();
                }
                messages.offer("At " + new Date());
            }
        }
    };

    @Override
    public void init() throws ServletException {
        generator.start();
    }

    @Override
    public void destro