使用AJAX技术发送异步请求，HTTP服务端推送

Posted 2021-02-10 夏晓旭

使用AJAX技术发送异步请求

什么是AJAX

AJAX指一步javascript和XML（Asynchronous JavaScript And XML），它是一些列技术的组合，简单来说AJAX基于XMLHttpRequest让我们在不重载页面的情况下和服务器进行数据交换。

加上JavaScript和DOM（Document Object Model,文档对象模型），我们就可以在接收到响应数据后局部更新页面。XML指的是数据的交互模式，可以是纯文本（Plain Text）、html或JSON。

 

使用jQuery发送AJAX请求

jQuery是流行的JavaScript库，它包装了JavaScript，让我们通过更简单的方式编写JavaScript代码。对于AJAX，它提供了多个相关的方法，使用它可以很方便地实现AJAX操作。更重要的是，jQuery处理了不同浏览器的AJAX兼容问题，我们只需要编写一套代码，就可以在所有主流浏览器上运行。

 

 

在示例中，使用全局jQuery函数ajax()发送AJAX请求。ajax()函数是底层函数，有丰富的自定义配置，支持的主要参数如下：

 

jQuery还提供了快捷方法：用户发送GET请求的get()方法和用于发送POST请求的post()方法，还有直接用于获取json数据的getjson()以及获取脚本的getscript()方法。这些方法都是基于ajax()方法实现的。

 

返回“局部数据”

对于处理AJAX请求的视图函数来说，不会返回完整的HTML响应，这时一般会返回局部数据，常见的类型有纯文本或局部HTML模板、JSON数据或者空值

 

下面程序对应的页面中，我们显示一片很长的虚拟文章，文章正下方有一个”Load More”的按钮，当按钮被单击时，会发送一个AJAX请求获取文章的更多内容并直接动态插入到文章下方。

用来显示虚拟文章视图是show_post

 

文章的随机正文通过Jinja2提供的generate_Jorem_ipsum()函数生成，n参数用来指定段落的数量，默认为5，它会返回由随机字符组成的虚拟文章。文章下面添加了一个”Load More”按钮。按钮下面是两个<script></script>代码块，第一个script是从CDN加载jQuery资源。

在第二个script标签中，我们在代码的最外层创建了一个$(function(){…})函数，这个函数是常见的$(document).ready(function(){…})函数的简写形式。这个函数用来在页面DOM加载完毕后执行代码，类似传统JavaScript中的window.onload方法，所以我们通常会将代码包装在这个函数中。美元符号是jQuery的简写，我们通过它来调用jQuery提供的多个方法，所以$.ajax()等同于jQuery.ajax()。

 

在$(function(){…})中，$(‘#load’)被称为选择器，我们在括号中传入目标元素的id、class或是其他属性来定位对应的元素，将其创建为jQuery对象。我们传入了”Load More”按钮的id值以定位到加载按钮。在这个选择器上，我们附加了.click(function(){…})，这会为加载按钮注册一个单击事件处理函数，当加载按钮被单击时就会执行单击事件回调函数。在这个回调函数中，我们使用$.ajax()方法发送一个AJAX请求到服务器，通过url将目标URL设为”/more”，通过type参数将请求的类型设为GET。当请求成功处理并返回2xx响应或304响应，会触发success回调函数。success回调函数接收的第一个参数为服务器端返回的响应主体，在这个回调函数中，我们在文章正文(通过$(‘.body’)选择)底部使用append()方法插入返回的data数据。

 

 

from jinja2.utils import generate_lorem_ipsum



@app.route(\'/post\')

def show_post():

    post_body = generate_lorem_ipsum(n=2)#生成两段随机文本

    return u\'\'\'

    <h1>A very long post</h1>

    <div class="body">%s</div>

    <button id="load"> Load More</button>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">

    $(function() {

        $(\'#load\').click(function() {

            $.ajax({

                url: \'/more\', // 目标URL

                type: \'get\', // 请求方法

                success: function(data){ // 返回2XX响应后触发的回调函数

                    $(\'.body\').append(data); // 将返回的响应插入到页面中

                    }

                })

            })

    })

    </script>\'\'\' %post_body





@app.route(\'/more\')

def load_post():

    return generate_lorem_ipsum(n=1)





if __name__ == \'__main__\':

    app.run(debug = True)

结果：

访问127.0.0.1:5000/post页面

 

点击Load More按钮，浏览器会在后台发送一个GET请求到/more，这个视图返回的随机字符会被动态的插入到文章下方

可以看到页面没有刷新，只是在底部多显示了一段内容

 

再次点击按钮

 

HTTP服务器端推送

不论是传统的HTTP请求-响应式的通信模式，还是一部的AJAX式请求，服务器端始终处于被动的应答状态，只有在客户端发出请求的情况下，服务器端才会返回响应。这种通信模式被称为客户端拉取。

在某些场景下，需要的通信模式是服务器端的主动推送。比如一个聊天室有很多用户，当某个用户发送消息后，服务器接收到这个请求，然后把消息推送给聊天室的所有用户。

类似这种关注实时性的情况还有很多，比如社交网站的导航栏实时显示新提醒和私信的数量，用户的在线状态更新，股价行情监控、显示商品库存信息、多人游戏、文档协作等。

 

实施服务器桂松的一些列技术被合称为HTTP Server push（http服务器端推送），目前常用的推送技术如下：

 

 

轮询（polling）这类使用AJAX技术模拟服务器端推送的方法实现起来比较简单，但通常会造成服务器资源上的浪费，增加服务器的负担，而且会让用户的设备消耗更多的电量（频繁的发起异步请求）。SSE效率更高，在浏览器的兼容性方面，除了windows IE/Edge，SSE（server-sent event）基本支持所有主流浏览器，但浏览器通常会限制标签页的链接数量。

 

除了这些推送技术，在HTML5的API中还包含了一个WebSocket协议，和HTTP不同，它是一种基于TCP协议的全双工通信协议。和前面说的服务器端推送技术相比，WebSocket实时性更强，而且可以实现双向通信。另外，WebSocket的浏览器兼容性要强于SSE。