JavaScript之Ajax

2005年Jesse James Garrett 发表了一篇文章，标题为：“Ajax： A newApproach to WebApplications”。他在这篇文章里介绍了一种技术，用他的话说，就叫：Ajax，是 AsynchronousJavaScript + XML 的简写。这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新) ，会带来更好的用户体验。一时间，席卷全球。

一． XMLHttpRequest

Ajax 技术核心是 XMLHttpRequest 对象(简称 XHR)，这是由微软首先引入的一个特性 ，其他浏览器提供商后来都提供了相同的实现。XHR 的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。

虽然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和数据格式无关，也就是说这种技术不一定使用 XML。

在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的请求类型(get 、post)、请求的 URL 和表示是否异步。

open()方法并不会真正发送请求，而只是启动一个请求以备发送。通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填 null 。执行 send()方法之后，请求就会发送到服务器上。

当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。那么一共有四个属性：

接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般而已 HTTP 状态代码为 200 作为成功的标志。除了成功的状态代码，还有一些别的：

同步调用固然简单，但使用异步调用才是我们真正常用的手段。使用异步调用的时候 ，需要触发 readystatechange 事件，然后检测 readyState 属性即可。这个属性有五个值：

使用 abort()方法可以取消异步请求，放在 send()方法之前会报错。放在 responseText之前会得到一个空值。

二． GET 与 与 POST

在提供服务器请求的过程中，有两种方式，分别是：GET 和 POST。在 Ajax 使用的过程中，GET 的使用频率要比 POST 高。

在了解这两种请求方式前，我们先了解一下 HTTP 头部信息，包含服务器返回的响应头信息和客户端发送出去的请求头信息。我们可以获取响应头信息或者设置请求头信息。我们可以在 Firefox 浏览器的 firebug 查看这些信息。

我们只可以获取服务器返回回来响应头信息，无法获取向服务器提交的请求头信息，自然自定义的请求头，在 JavaScript 端是无法获取到的。

GET 请求

GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。

xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);

通过 URL 后的问号给服务器传递键值对数据，服务器接收到返回响应数据。特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理，中文字符的返回及传参，可以讲页面保存和设置为 utf-8 格式即可。

当没有 encodeURIComponent()方法时，在一些特殊字符比如“&”，会出现错误导致无法获取。

POST 请求

POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的 POST传输方式。

xhr.open('post', 'demo.php', true);

而发送 POST 请求的数据，不会跟在 URL 的尾巴上，而是通过 send()方法向服务器提交数据。

xhr.send('name=Lee&age=100');

一般来说，向服务器发送 POST 请求由于解析机制的原因，需要进行特别的处理。因为POST 请求和 Web 表单提交是不同的，需要使用 XHR 来模仿表单提交。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

从性能上来讲 POST 请求比 GET 请求消耗更多一些，用相同数据比较，GET 最多比 POST 快两倍