Ajax,即Asynchronous Javascript+XML的核心是XMLHttpRequest对象,能够向服务器请求额外的数据而无需卸载页面,会带来更好的用户体验。
一、关于XMLHttpRequest对象
xhr.open()方法接收三个参数,
第一个参数请求的方式(post、get)
第二个参数请求的url,只能在同一个域中使用相同的端口和协议的url发送请求
第三个参数表示是否异步的布尔值,true表示异步,false表示不异步
xhr.open('get','example.txt',false);
xhr.send()方法接受一个参数,即要作为请求主体发送的数据,调用send后请求就会被发配到服务器去。浏览器就受到响应后,响应的数据会自动填充xhr对象的属性
如果不需要通过请求主体发送数据,则必须传入null
xhr.send(null);
xhr.responseText:作为响应主体被返回的文本,无论内容的类型是什么,响应的主体内容都会保存到这个属性中
xhr.responseXML:如果响应的内容类型是“text/xml”或“application/xml”,这个属性中将保存包含着响应数据的xml DOM文档。对于非XML数据而言,此属性的值为null
xhr.status:响应的HTTP状态
xhr.statusText:HTTP状态说明,
xhr.readyState:请求、响应过程的当前活动阶段
0:表示未初始化,未open
1:表示启动,未send
2:发送,send了,但未接收到响应
3:接收,接收到部分响应
4:完成,接收到全部响应,而且已经可以在客户端使用
只要readyState值有一个值变成另一个值,都会触发onreadystatechange事件
xhr.abort()方法:在接收到响应之前还可以调用这个函数来取消异步请求
在接收到响应的第一步,是检查status属性,304状态码表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本
二、关于HTTP头部信息
每一个HTTP请求和响应都会带来相应的头部信息
在发送这个xhr请求的同时,还会发送一些头部信息:
Accept:浏览器能够处理的内容类型
Accept-Charset:浏览器能够显示的字符集
Accept-Encoding:浏览器能够处理的压缩编码
Accept-Language:浏览器当前设置的语言
Connecttion:浏览器与服务器之间连接的类型
cookie:当前页面设置的任何cookie
Host:发出请求的页面所在的域
Referer:发出请求的页面的URI
User-Agent:浏览器的用户代理字符串
可以自定义请求头信息:setRequestHeader()接收两个参数,第一头部字段的名称和第二头部字段的值。必须在open之后,send之前调用
相应的使用getRequestHeader()可以得到相应的头部信息
三、get和post请求
get请求,通常向服务器查询某些信息,必要时,将查询字符串参数的名称和值追加到URL的末尾,以便发送给服务器
对于xhr,位于open()方法中的URL末尾的查询字符串必须经过正确的编码才行
参数的编码可以使用encodeURICoponent()
post请求,通常用于向服务器发送应该被保存的数据,将数据作为请求的主体提交。可以包含的数据比较多,而且格式不限
模仿表单提交,设置Content-Type
xhr.setRequestHeader("Content-Type",''application/x-www-form-urlencoded');
get请求速度比post快,post能发送的数据更多一些
二、关于XMLHttpRequest2级
1)FormData对象,为序列化表单以及创建与表单格式相同的数据提供方便
var data= new Formata();
data.append('name',lili");
或者
xhr.send(new FormData(document.form[0]));
2)超时设定
xhr的timeout属性,表示请求在等待响应多少毫秒之后就终止
3)overrideMimeType()
用于重写xhr响应的MIME类型,必须在send前调用,才能保证重写的MIME类型
4)进度事件
loadstart:在接收到响应数据的第一个字节时触发
progress:在接收响应期间持续不断地触发
error:在请求发生错误时触发
abort:在因为调用abort函数,终止连接时触发
load:在接收到完整的响应数据时触发
loadend:在通信完成,或者触发error、abort、load事件后触发
三、跨域资源共享
默认情况下,xhr对象只能访问与包含它的页面位于同一个域中的资源
1)cors:基本思想,就是使用自定的HTTP头部让浏览器进行沟通,从而决定请求或者响应是该成功,还是应该失败
origin:http://www.nczonline.net
如果服务器接收请求,就在Access-Control-Allow-Origin头部中回发相同的源信息。注意,请求和响应都不包含cookie信息
2)图像ping
与服务器进行简单、单向的跨域通信的一种方式。浏览器得不到任何具体的数据,通过监听load和error事件,它能知道响应是什么时候接收到的
只发送get请求
无法访问服务器响应的文本
只能是浏览器与服务器的单向通信
var img= new Image();
img.load = img.onerror = function(){
alert("Done")
}
img.src="http://www.example.com/test?name=lili";
3)jsonp
由两部分组成:回调函数和数据
动态创建script
var script = document.createElement("script");
script.src= "http://a.net/json/callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);
function handleResponse(response){
alert(response.city);
}
能够访问响应文本,支持在浏览器与服务器之间双向通信
缺点:
JSONP是从其他域中加载代码执行,如果其他域不安全,可能夹杂一些恶意代码
要确定JSONP请求是否失败不容易,h5给script添加了onerror事件处理程序
4)comet
是服务器向页面推送数据的技术,方式有长轮询和HTTP流
短轮询,浏览器发送请求,服务器立即发送响应,无论数据是否有效
长轮询,浏览器发送请求,等待发送响应。浏览器定时向服务器发送请求,看有没有更新的数据
流在整个生命周期只使用一个HTTP链接,而服务器保持连接打开,然后周期性地向浏览器发送数据
5)sse
服务器发送事件,用于创建到服务器的单向链接,服务器通过这个链接可以发送任意数量的数据。支持长短轮询,HTTP流,而且能够在断开链接时,自动确定何时重新连接。
var sourse = new EventSource("my.php");
sourse.onmessage = function(event){
var data = event.data;
}
source.close();
6)web sockets
在单独的持久连接上提供全双工,双向通信
连接过程:
在js中创了web socket之后,会有一个HTTP请求发送服务器以发起连接。在取得服务器响应后,建立连接会使用HTTP升级从HTTP协议交换web socket协议
ws://或者wss://
使用自定义的协议,能够在客户端和服务器之间发送非常少量的数据,而不必担心HTTP那样字节级的开销。由于传送的数据包非常小,所以非常使用于移动应用
var scoket = new WebScocket('ws://a.com/b.php');
socket.send("lili");
socket.onmessage = function(event){
var data = event.data;
}
socket.close()
缺点:
制定协议的时间
必须给web socket构造函数传入绝对URL
只能传送纯文本