原生ajax详解_H5之家 - 中国HTML5教程资源分享第一站

Ajxa局部刷新用于提高用户体验。Ajax技术的核心是XMLHttpRequest对象（简称XHR）

XMLHttpRequest对象

XMLHttpRequest对象在ie7及更高版本可以这样申明。

var xhr=new XMLHttpRequest();

XHR的用法

发送get请求写法是这样：

xhr.open(“get”,”example”,false); xhr.send(null);

由于这次请求时同步的，JavaScript代码会等到服务器响应之后再继续执行，在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性如下：

在接收到响应后，第一步是检查status属性，以确定响应已经成功返回，为确保接收到适当的相应，应该像下面这样写：

xhr.open(“get”,”example.txt”,false); xhr.send(null); if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ alert(xhr.responseText); }else{ alert(“Request was unsuccessful:”+xhr.status); }

很多情况下，我们还是要发送异步请求，才能让JavaScript继续执行而不必等待响应，此时，可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段：

只要readyState属性的值右一个值变成另一个值，都会触发一次readystatechange事件，可以利用这个事件来检测每次状态变化后的readyState的值，通常我们只对readyState值为4的阶段感兴趣，不过必须在调用open之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。代码如下：

以上代码利用DOM0级方法为XHR对象添加了事件处理程序，原因是并非所有浏览器都支持DOM2级方法，与其他事件处理程序不同，这里没有向onreadystatechange事件处理程序中传递event对象；必须通过XHR对象本身确定下一步该怎么做。

在接收到响应之前还可以调用abort()方法来取消异步请求，如下：

xhr.abort();

调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性，在终止请求之后，还应该对XHR对象进行解引用操作，不建议重用XHR对象。

HTTP头部信息

每个HTTP请求和响应都会带有相应的头部信息，头部信息有：

虽然不同浏览器实际发送的头部信息会有所不同，但以上列出的基本上是所有浏览器都会发送的，使用setRequestHeader方法可以设置自定义的请求头部信息，这个方法接受两个参数：头部字段的名称和头部字段的值。如：

调用XHR对象的getResponseHeader方法并传入头部字段名称，可以取得相应的响应头部信息，而调用getAllResponseHeaders方法则可以取得一个包含所有头部信息的长字符串。

Get请求

Get是最常见的请求类型，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器，使用get请求经常会发送的一个错误就是查询字符串的格式问题，查询字符串中的每个参数名和值都必须使用encodeURIComponent进行编码，然后在放到URL的末尾，而且所有名-值对都必须由&分隔。

POST请求

使用频率仅次于get，post请求应该把数据作为请求的主体提交，可以包含非常多的数据，而且格式不限，用过ajax来提交表单要先将Content-Type头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型。代码如下：

XMLHttpRequest 2级：FormData

FormData为序列化表单以及创建与表单格式相同的数据提供了便利。

var data=new FormData(); data.append(“name”,”Nicholas”); var data=new FormData(doucument.forms[0])

超时设定

表示请求在等待响应多少毫秒之后就终止，在给定的时间内浏览器还没有接收到响应，那么就会触发timeout事件，进而会调用ontimeout事件出来程序，代码如下：

overrideMineType方法