<Web> XmlHttpRequest简介

前言

　　web开发经常用到的一个技术就是无刷新提交表单，这个一般是利用ajax实现的，而ajax是利用XmlHttpRequest实现的。

XMLHttpRequest简介

　　什么叫无刷新：对用户来说，就是向服务器提交数据的时候，页面不会duang的闪一下（form提交的时候就是这样）。对程序员来说，就是客户端不需要向服务端发送整个页面的数据，而只需要发送少量的数据，返回的数据也一样，只需要少量的动态数据就够了，而不需要重载整个页面。

　　XmlHttpRequest是ajax的核心，所以说掌握了XmlHttpRequest，用ajax就跟玩儿一样。

　　XmlHttpRequest是IE5中引入的一个Html对象，它在现在几乎所有的浏览器中都存在。但是在IE5和6中有点不一样，为了兼容所有浏览器，一般在声明的时候会这样：

var xhr;
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest();  
}else{
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest详细介绍

　　作为一个html对象，当然要有构造器、属性和方法（这点和java一样）。

　　构造器：options中可以传入一个json对象，

　　　　

　　属性：

　　　　

　　readyState:一共有五个常量值，分别如下：0-未发送，1-已经调用了xhr.open()方法，2-已经调用了xhr.send()方法，并且已经接收完响应头，3-正在接收响应体，4-完全接收。

　　　　

　　responseText:返回报文的body，它只有在满足一下几个条件的情况下才会接收到。

　　　　1、如果responseType不为空又不为"text"，那么会报InvaliedStateError错误。

　　　　2、如果readyState状态不是3或4，返回空字符串。

　　　　3、如果已经设置了error flag，返回空字符串。

　　responseXML：和responseText差不多，只是返回的格式不一样，这个是XML文档对象。接收条件和上面一样，只是把"text"改为"document"。

　　status：Http的响应状态，也就是200，404，502那些，这里就不赘述了。

　　statusText：就是http响应状态的对应的信息。200-OK，404-not found。

　　方法：

　　　　

　　abort()：请求被中止。

　　getAllResponseHeaders()：获取响应头的所有信息。除了set-cookie和set-cookie2，要注意以下情况：

　　　　1、对象状态是0和1的时候，返回空字符串。

　　　　2、已经设置了error flag的时候，返回空字符串。

　　　　3、返回的时候，是将所有header中的键值对通过U+000D CR U+000A LF来分隔开，并作为单个string返回。

　　getResponseHeader(header)：返回除set-cookie和set-cookie2外的指定head值。

　　setRequestHeader(head, value)：设置请求head。

　　open(method, url [, async = true [, username = null [, password = null]]])：设置请求方法（Post、Get），请求地址，可选项（是否同步（默认异步），用户名，密码）；

　　send(data)：发起请求，data是可选的，需要注意：

　　　　1、如果没有调用open()就send，或者已经设置了send flag则会报InvalidStateError错误。

　　　　2、如果是Get请求，设置data为null。

　　　　3、请求的encode和type需要按照data的类型来设置：

　　　　　　1、ArrayBufferView或者Blob：不用任何编码，直接发送原生数据就行。

　　　　　　2、document：encode为"utf-8"，type则是"text/html"或者"application/xml"，然后在后面加上";charset=UTF-8"。

　　　　　　3、string：encode为"utf-8"，type为"text/plain;charset=UTF-8"。

　　　　　　4、formdata：type为"multipart/form-data"。

　　以上就是XmlHttpReques一般t详细介绍。

XMLHttpRequest2的一些东西

　　下面我再稍微XmlHttpRequest 2，也就是所谓的ajax2.0。

　　　　

　　1、可以看到，在H5中XmlHttpRequest多了两个属性：

　　　　1、responseType：可以在发送请求之前，设置好响应类型，如"text","arraybuffer","blob","document",默认为text。

　　　　2、response：浏览器将响应根据responseType转换成相应的数据。

　　　　如下：

　　　　　　

　　2、发送数据：

　　　　

　　3、提交表单：FormData是2.0新加的的对象，它能非常方便的创建表单对象，如下：

　　　　

　　　4、跨域资源共享：

　　　　比如你在aaa.com去请求一个在www.aaa2.com的数据，在之前的ajax版本中，是会报错误的。

　　　　现在只需要在requestheader中添加一个 Access-Control-Allow-Origin: http://example.com或者全域匹配：Access-Control-Allow-Origin: *。如下：

　　　　

结语

　　熟练掌握XmlHttpRequest是精通ajax的基础，同时也可以通过XmlHttpRequest的深入学习，来强化加深对http协议的了解。