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

Posted 夏晓旭

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用AJAX技术发送异步请求,HTTP服务端推送相关的知识,希望对你有一定的参考价值。

使用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。

 

以上是关于使用AJAX技术发送异步请求,HTTP服务端推送的主要内容,如果未能解决你的问题,请参考以下文章

Ajax

AJAX的简单梳理

原生JS的Ajax技术

HTTP管线化技术--ajax请求

使用原生JavaScript发送ajax请求

websocket入门代码