整理ajax笔记

最近看了《JavaScript高级程序设计》（第三版）关于Ajax的部分，做了这篇笔记。

一、常规用法

第一步，创建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对象的属性上

有这些属性：

1. responseText 返回的文本
2. responseXML 如果content-type为”text/xml’或者”application/xml”就把数据放这个属性
3. status HTTP状态码
4. 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")  }};

其他注意点：

1. setRequestHeader 用来设置头信息
2. getResponseHeader 得到响应头信息
3. getAllResponseHeaders 得到全部响应头信息

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

post请求中，设置content-type，参数序列化传入，格式和get请求一样。

如果不设置content-type，那么后台就必须从raw request header中去得到参数。

二、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的进度

提供了一系列的事件，可以做类似网页加载进度条的效果。

三、跨域

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来实现，服务器返回相应的头部来确认即可。

四、其他跨域技术

1、动态创建一个图片，src跨域，然后可以返回一个像素图或者204；返回后的处理在onload和onerror里面，可以用于一些数据统计方面。

2、JSONP