Ajax和Comet技术总结


Posted in Javascript onFebruary 19, 2017

Ajax是一种技术,一种能够向服务器请求额外的数据而无需卸载页面的技术,能够使网页具备更优的用户体验。Ajax技术的核心是XMLHttpRequest对象(XHR)。本文从XHR开始谈起,理解Ajax技术的特点,再对跨域以及Comet等技术进行简要理解和总结。

XMLHttpRequest基本用法

XHR对象有两个常用的方法open和send。open方法用户启动一个HTTP请求,不过它不会真的发送HTTP请求。open方法接收3个参数,分别表示请求的HTTP方法、请求的URL、是否异步。XHR对象的第二个方法send用于发送open所启动的请求。send方法接收1个参数,表示HTTP请求的主体数据。如果发送的是GET请求这种没有附带主体数据的HTTP请求,则传入null即可。如果是POST请求,则传入需要POST的数据。下面是一个简单示例,向/api/data发起一个GET请求,并且是采取异步的方式发送请求,即该请求不会阻塞页面中其他js代码的执行。

var xhr = new XMLHttpRequest()
xhr.open("get", "/api/data", true)
xhr.send(null)

请求得到的响应数据会自动填充到XHR对象的属性上,主要有下面4个属性:

* responseText: 响应主体文本
* responseXML: 如果响应内容类型是"text/xml"或"application/xml", 这个属性中将包含响应数据的XML DOM文档
* status: 响应的HTTP状态码,一般可以将HTTP状态吗200视为成功的标识
* statusText: HTTP状态的说明

XHR对象有1个readyState属性记录了该对象从创建到收到响应数据可能会经历的5种状态,readyState的可能取值如下:

0: 还没有调用open()方法初始化请求

1: 已经调用open()方法但是还没有调用send()方法

2: 已经调用send()方法但是还没有收到响应

3: 收到部分响应数据,还有部分数据没收到

4: 收到全部响应数据,即响应结束,数据完备

当readyState从一个值变到另一个值的时候会触发readystatechange事件,当这个事件触发的时候只需要在事件处理器里面检查一下readyState的值是否为4,当其值为4的时候就可以对响应的数据做后续处理了。给readystatechange事件指定处理器必须在调用open()方法之前完成才能确保跨浏览器兼容性。下面是简单示例。

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.status, xhr.responseText)
 }
}
xhr.open("get", "/api/data", true)
xhr.send(null)

XHR对象提供setRequestHeader()方法可以设置请求的自定义HTTP头部信息,该方法接收两个参数,要设置的字段和该字段的值。在调用open()启动一个请求之后并且在send()发送请求之前调用setRequestHeader()才能设置成功。请求得到响应之后,可以通过getResponseHeader()方法获取响应的HTTP头部信息,该方法接收1个参数,即要获取的字段名。而通过getAllResponseHeaders()则可以获得所有头部信息组成的长字符串。下面是简单示例。

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.status, xhr.responseText)
  console.log(xhr.getResponseHeader('SomeKey'))
  console.log(xhr.getAllResponseHeaders())
 }
}
xhr.open("get", "/api/data", true)
xhr.setRequestHeader("SomeKey", "SomeValue")
xhr.send(null)

FormData

XMLHttpRequest 2级定义了FormData类型为序列化表单、创建与表单格式相同的数据、用于XHR传输提供便利。FormData提供append()方法可以直接添加数据,该方法接收两个参数键和值。FormData的构造函数可以不传参数,也可以直接传入1个表单元素。传入表单元素之后会利用该表单元素的数据来向FormData对象预先填入键值对。下面是简单示例。

var form = document.getElementById('myForm')
var data = new FormData(form)
data.append('someKey', 'someValue')
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText)
 }
}
xhr.open('post', '/api/upload', true)
xhr.send(data)

跨域资源共享

通过XHR实现Ajax通信会遇到一个限制,即跨域安全策略。跨域安全策略限制了“相同域名、相同端口、相同协议”,当XHR想要访问限制之外的资源就会引发安全错误。CORS(Cross-Origin Resource Sharing),跨域资源共享,其思想是通过使用自定义HTTP头部让浏览器与服务器进行沟通从而决定请求或者响应的成功与失败,需要浏览器和服务器同时支持才能实现正常的访问。目前大部分浏览器已经支持了CORS,所以写起代码跟普通的同域资源访问几乎一样,就只是把URL用绝对路径表示。因此,要实现跨域的关键还是在服务器,具体如何实现本文不深入讨论。下面是前端js的简单示例。

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText)
 }
}
xhr.open('get', 'http://www.otherserver.com/api/data', true)
xhr.send(null)

JSONP

JSONP(JSON with padding)是应用JSON实现跨域资源访问的一种方法。JSONP由两部分内容组成:回调函数和JSON数据。前面说过,XHR请求会遇到跨域安全策略的限制,但是HTML中的script标签则不会有这个限制,我们可以通过script标签引用不同域里面的js文件。JSONP便是钻了这个空子,它通过动态创建script元素,然后把src指向其他域的URL从而实现加载其他域的资源,然后通过回调函数来处理加载得到的数据。下面是一个简单示例。

function handler(res) {
 console.log(res)
}
var script = document.createElement('script')
script.src = 'http://www.otherserver.com/api/data/?callback=handler'
document.body.insertBefore(script, document.body.firstChild)

上述代码指定了动态创建的script元素的src为另一个域名下面的/api/data,然后指明回调函数为handler。将script插入到DOM里面之后会向对应的URL加载数据,完成之后会将得到的JSON数据解析成一个对象并调用handler进行处理。

JSONP是实现跨域访问的一种简单的方法,不过也存在一些安全问题,例如请求的其他域的URL响应给你一段恶意代码。JSONP还有一个问题,script标签引用的是js,json由于被js所支持所以也可以引用,因此在请求其他域的URL时需要确认它是否以json格式进行响应,而不是XML。

Comet

Ajax是一种从网页向服务器请求数据的技术,而Comet与之相反,它是从服务器向网页推送数据的技术,适用于实时性要求比较高的应用。实现Comet的方式有两种:长轮询和流。在说长轮询之前先说一下短轮询,它的思路很简单,就是客户端使用定时器,每隔一定的时间间隔就向服务器发送Ajax请求看看有没有数据更新,这个时间间隔一般很小。长轮询同样也是客户端不断向服务器发送请求,不同的是,客户端不需要按照时间间隔不断地发送请求,而是发起1个请求到服务器之后,客户端和服务器之间的HTTP连接保持打开,直到服务器有数据更新就通过这个连接向客户端响应数据,然后再关闭这个HTTP连接。关闭之后浏览器再发起一个新的连接继续重复前面的过程。相比短轮询,长轮询发起的HTTP连接次数更少了,不过如果HTTP连接长时间保持开放也是在占用服务器的资源。

第二种实现Comet的方式是基于HTTP流,客户端向服务器发起1个HTTP连接,全程保持这个连接打开,客户端周期性地通过这个连接向服务器获取数据查看更新。

SSE

SSE(Server-Send Events),服务器发送事件,是一种实现Comet交互的浏览器API,支持轮询也支持HTTP流。SSE API用于创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据给客户端。服务器响应的MIME类型为text/event-stream。下面是SSE的JavaScript API的简单示例。

var source = new EventSource("/api/events")
source.onmessage = function(event) {
 console.log(event.data)
}

如上面代码所示,要向服务器预定事件流获取服务器发送的数据,首先创建EventSource对象,然后在message事件触发的时候进行处理。服务器发送的数据以字符串形式保存在event.data中。EventSource对象会保持与服务器的活动连接,如果中间断开会重新连接,如果要真正地断开连接可以通过调用close()方法来实现。EventSource的message事件会在从服务器收到新事件的时候触发,除了message事件之外它还有另外2个事件open和error,open事件在建立连接的时候触发,error事件在无法建立连接的时候触发。

Web Sockets

Web Sockets是一种与服务器进行全双工双向通信的通道。Web Sockets不适用HTTP协议,而前面说的Ajax和Comet都是使用HTTP协议。篇幅关系本文对Web Sockets不作讨论。

总结

Ajax实现在不加载页面的情况下向服务器请求数据,提升网页的用户体验。实现Ajax技术的XHR会遇到跨域安全策略的限制,通过CORS解决跨域问题需要浏览器和服务器两端的配合。JSONP是一种实现跨域访问的”小技巧“但也是存在一些问题。Comet对Ajax进行了拓展,让服务器能够实时向浏览器推送数据,但从实现来看不管是轮询还是HTTP流,都是浏览器先向服务器发起请求连接。Web Sockets的全双工双向通信也有其特色,以后有时间可以继续了解。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
js特殊字符转义介绍
Nov 05 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
fetch 使用及如何接收JS传值
Nov 11 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 #Javascript
Angularjs中的ui-bootstrap的使用教程
Feb 19 #Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 #Javascript
RequireJs的使用详解
Feb 19 #Javascript
Vue.js -- 过滤器使用总结
Feb 18 #Javascript
JS打开摄像头并截图上传示例
Feb 18 #Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 #Javascript
You might like
PHP 翻页 实例代码
2009/08/07 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
python实现验证码识别功能
2018/06/07 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
python实现按首字母分类查找功能
2019/10/31 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
怎么样写好简历中的自我评价
2013/10/25 职场文书
数控专业推荐信范文
2013/12/02 职场文书
环保建议书作文
2014/03/12 职场文书
法语专业求职信
2014/07/20 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
质量负责人岗位职责
2015/02/15 职场文书
写给女朋友的保证书
2015/05/09 职场文书
中学团支部工作总结
2015/08/13 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis