[ JS 进阶 ] Ajax 详解 (1) ：XHR 对象

Ajax是一种可以向服务器请求额外的数据而无需卸载页面(无刷新)的技术，是对Asynchronous Javascript + XML的简写，因其良好的用户体验，现已成为web不可或缺的技术。咱们所熟知的Jquery的封装的ajax方法，也是经过这种技术实现的。

1. 没有 XHR 对象以前咱们怎么实现 Ajax

在XHR出现以前，Ajax式的通讯必须借助一些hack手段来实现，大多数是使用隐藏的框架或内联框架，还可使用script标签和img标签；

<iframe> : iframe元素仍是挺强大的，咱们首先须要把发送给web服务器的数据编码到URL中，如：pages/index.html?name='jozo'&age=22,而后设置iframe的src属性为该URL，服务器能建立一个包含响应内容的HTML文档，那么咱们就能够把响应信息保存在该文档中返回web浏览器。这样实现的话，须要让iframe元素对用户不可见，能够经过CSS来隐藏它。

<script>: script标签的src属性也能发起HTTP GET请求，并且它能够跨域通讯而不受同源策略的限制。经过这种方式交互时，服务器的响应须要采用JSON编码的数据格式，并用一个指定的回调函数名包裹须要返回的数据：callBack({"name":"jozo","age":22}),这个包裹的响应会成为script标签的里的内容来执行，就至关于执行了callBack()这个函数，因此在web端须要定义一个同名函数。这个就是JSONP跨域，详细请自行查阅。

<img>:img标签一样也是利用src属性发起的HTTP GET 请求，但它的功能没有上面二者的全，由于它只能实现单向的通讯，只能由客户端发送数据到服务器，服务器则响应对应的图片，而咱们没法轻易从图片中获取数据，并且这个图片必须不可见，好比透明的1x1PX的图片。

2. XHR 对象

Ajax技术的核心是XMLHttpRequest对象，XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能以异步的方式从服务器取得更多的信息，意味着用户单击后，能够没必要刷新页面也能取得数据。这个单词包含XML,Http,Rquest,的确，ajax与这三者都有关系 ：

• XML ：可做为ajax交互数据的数据类型，固然也不只局限于xml，像咱们所知的json,jsonp,html,script,text均可以做为数据类型。

• http : 使用ajax技术其实就是经过发送HTTP请求和接收响应的来达到目的。能够经过配置发送请求头信息来使服务器作出相应的响应。

• request ：说宽泛一些就是request和response，请求和响应，get请求，post请求，而后操做响应信息。

下面来看下具体的XHR对象有哪些属性和方法。

3. XHR 对象的属性和方法

属性：

1. readyState：HTTP 请求的状态
2. responseText：响应体（不包括头部）
3. responseXML：对请求的响应，解析为 XML 并做为 Document 对象返回。
4. status：由服务器返回的 HTTP 状态代码，如 200 表示成功
5. statusText：这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。

方法：

1. abort() : 取消当前响应，关闭链接而且结束任何未决的网络活动。
2. getAllResponseHeaders()：把 HTTP 响应头部做为未解析的字符串返回。
3. getResponseHeader()：返回指定的 HTTP 响应头部的值。
4. open()：初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，可是并不发送请求。
5. send()：发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
6. setRequestHeader()：向一个打开但未发送的请求设置或添加一个 HTTP 请求。

标红的属性和方法都是比较经常使用的，偷个懒，具体的属性和方法的介绍去 w3school 看下了哈，⊙▂⊙。

属性和方法都要熟悉掌握才能很好的掌握后面的内容。

4. 跨浏览器的 XHR 对象

IE7以前的浏览器都是不支持原生的XMLHttpRquest对象的，IE5,6中是经过MSXML库中的一个ActiveX对象实现的。《JS高级程序设计》和《JS权威指南》都是经过检测MSXML库中XMLHttp的版原本建立XHR对象的，看起来比较麻烦，咱们仍是用w3school的吧 o(╯□╰)o：

var xhr = null;
function createXHR(){
    if (window.XMLHttpRequest){
         // 新浏览器
         xhr = new XMLHttpRequest();
     }else if (window.ActiveXObject){
         // IE5,IE6
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
}

5. 一些细节

1. Ajax技术能够用于 HTTP 和 HTTPS 请求。

2. 咱们须要将ajax测试代码部署到服务器上，才能正常工做。可是，在firefox浏览器上测试则不用。

3. 请求的方式除了get,post 外还支持：delete,head,option,put.请求方式名称大小写不敏感。

4. 当咱们给请求设置了onreadystatechange事件时，当readyState改变为0或1时可能没有触发这个事件，通过测试，当为0时确实没有触发，为1时触发了，我也不知道为啥 ⊙▂⊙。

5. 若是你获取的表单数据只是用来读取服务器数据，并且表单数据是公开的，那么用get方式的请求吧，由于少许数据的get请求的效率比post快多了。后面能够测试来测试下。

6. HTTP请求的各部分的指定顺序是：请求方法和URL--> 请求头-->请求主体。并且在使用XHR对象的时候，当调用了send()方法才开始启动网络。而XHR API 的设计使每一个方法都会写入网络流，因此在send()方法后面定义的事件或属性会被忽略。因此，调用XHR对象的方法要有必定的顺序，好比：在send()方法注册onreadystatechange()事件。