整理Ajax的点点滴滴

最近看了下《Javascript高级程序设计》(第三版)关于Ajax部分，作了这篇笔记。

 

1、常规用法

 

第一步，建立XHR对象
var xhr = new XMLHttpRequest();
此方法兼容IE7+, 针对IE6须要使用new ActiveXObject("Microsoft.XMLHTTP");

 

第二步，准备请求
xhr.open("get","/testajax",false);
参数分别为: 请求类型 、url、是否异步

 

第三步，发送请求
get请求的话就是xhr.send(null)
send须要一个参数，由于get请求中参数会在url中，因此这里写null（之因此写null是由于不写的话在某些浏览器会有问题）。
若是是post请求，那么这里面就写post请求须要的参数。
可是首先须要设置content-type，例如:
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
而后发送数据xhr.send("fname=Bill&lname=Gates");

 

第四步，请求发出去后，服务器响应的内容会自动填充到xhr对象的属性上
有这些属性
responseText 返回的文本
responseXML 若是content-type为"text/xml'或者"application/xml"就把数据放这个属性
status HTTP状态码
statusText 状态说明

 

第五步、根据status检查请求状态
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText )
}else{}

不管类型是什么，响应主题内容都会保存在responseText属性中。
对于非xml格式数据而言，responseXML为null。

 

第六步，若是是异步请求，那么须要监听readyState来判断请求的状态
经过onreadystatuschange事件判断readyState的值

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
console.log("success")
}
};

 

其余注意点:
setRequestHeader用来设置头信息
getResponseHeader获得响应头信息
getAllResponseHeaders获得所有响应头信息

get请求中，对参数使用encodeURIComponent方法

post请求中，设置content-type，参数序列化传入，格式和get请求同样
若是不设置content-type，那么后台就必须从raw request header中去获得参数

 

2、xhr2中的功能

1: FormData()序列化表单数据
var data = new FormData();
data.append("hello","world");
xhr.send(data);
或者
xhr.send(document.forms[0])
这样能够快速传入post参数，并且无需设置content-type。

 

2: timeout超时
xhr.timeout = 1000; //设置超时时间
xhr.ontimeout = function(){}; //处理超时状况
xhr.send(null);

 

3:overrideMimeType
重写MIME,MIME决定了你的responseXML或者responseText的值是否存在
MIME由content-type设置

 

4:进度事件，用来监视xhr的进度。
提供了一系列的事件，能够作相似网页加载进度条的效果。

 

3、跨域
CORS实现ajax的跨域访问

1: 标准的实现:
首先，先发送一个跨域ajax请求（这里能够检测是否支持CORS，经过新建一个xhr对象，检测xhr2中的属性是否存在在这个对象来实现）。
而后，普通状况下，咱们确定会发现控制台报错，相似没法访问跨域资源这种错误。
这时须要服务器设置
Access-Control-Allow-Origin:* 表明全部域名均可以访问到
Access-Control-Allow-Origin: http://www.cnblogs.com 限定了域名
请求和响应均不包含cookie信息

 

2: IE的实现:
经过XDomainRequest()来实现。
直接改变contenttype属性来实现post请求
xdr.contentType= "";
不能发送同步请求

 

3: 自定义头部：
在CORS中是不支持的，可是有固定接口能够设置的头部来传输信息。

 

4: 带凭证的请求（cookie、ssl等）:
客服端经过withCredentials设置为true来实现
服务器返回相应的头部来确认便可。

4、其余跨域技术

1: 动态建立一个图片，src跨域，而后能够返回一个像素图或者204;
返回后的处理在onload和onerror里面
能够用于一些数据统计方面。

2: JSONP

 

5、服务器推送
一、轮询
二、长轮询
三、HTTP流
四、SSE
五、Web Sockets
先发一个http请求过去，服务器相应后会把http协议变为web socket协议
连接变为 ws://
var socket = new WebSocket("ws://xxx.com")
没有同源限制
经过 socket.readyState 来判断连接状态
socket.close()关闭

数据交互
socket.send("xxx");发送消息
消息内容只能是纯文本，因此对于复杂的数据须要序列化
socket.onmessage = function(event){
var data = event.data; //这里是服务器返回的数据
}