1，首先我们先了解下什么是Ajax以及为什么要使用ajax？

        Ajax（Asynchronous JavaScript and XML），即为异步的JavaScript和xml，是指一种创建交互式网页应用的网页开发技术。首先，我们要知道，Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。其次，了解到它是异步，这样就可使网页从服务器请求少量的信息，而不是整个页面。

       而什么是异步？跟同步有什么区别呢？当你理解这个之后，你就明白为什么要使用ajax了。在Ajax之前，当我们需要先服务器请求数据时，我们向服务器发送一个请求，发送之后我们只能等待服务器的响应，给我们返回数据回来，而在这个期间我们什么都干不了，只能等待，这就是同步。而ajax的出现则帮我们解决了这个问题，我们先看下ajax的工作原理，如图1所示

图1 ajax的工作原理

有了ajax之后，我们只需要把请求服务器这一块，交给ajax去做就行了，ajax就相当于“中间商”或者“中介”什么的，替我们去“跑腿”，这样，我们就不需要刷新整个页面去等待服务器的响应了，只需要利用JavaScript向服务器发送请求即可，就可以再不刷新页面的情况下，实现局部页面数据更新的效果。

2，Ajax本地运行的环境搭建。

       在ajax运行之前，我们要先搭建好环境。使用wampServer或者xampp都可以，浏览器搜索下载即可。以wampserver为例来说明，下载完之后运行即可。在安装的目录中，有一个叫www的文件夹，我们把要运行的的文件放在它里面即可。首先，检查wampserver是否运行了，在浏览器输入localhost回车，看到图2说明已经启动了。之后我们输入要执行的文件。假如我要执行的是www目录下的index.html文件，在浏览器输入localhost/index.html回车即可运行。

图2 wampServer成功执行界面

3，Ajax的运行流程是怎样的？

使用ajax只需要以下几个步骤即可：

1，创建XMLHTTPRequest对象

var xhr = new XMLHttpRequest();在ie6及以下，我们要这样设置xhr = new ActiveXObject('Microsoft.XMLHTTP');将其合并为：

var xhr = null;

try {

xhr = new XMLHttpRequest();

} catch (e) {

xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

2，创建http请求

利用open方法，有三个参数：第一个，设置请求方式get/post；第二个，设置请求地址，url；第三个，是否为异步，默认为true，即为异步，可不填。如：

xhr.open(method,url,true);

3，发送请求

xhr.send();

4，服务器响应

xhr.onreadystatechange = function(){

if (xhr.readyState==4 && xhr.status==200 ) {

console.log(xhr.responseText);//请求成功后我们可以在这处理数据

} else {

alert('出错了,Err：' + xhr.status);

}

}

readyState: ajax的工作状态,存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

responseText: ajax的请求返回的数据（字符串形式）

state: 服务器状态,服务器常用的状态码及其对应的含义如下：

200：服务器响应正常。

304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。

400：无法找到请求的资源。

401：访问资源的权限不够。

403：没有权限访问资源。

404：需要访问的资源不存在。

405：需要访问的资源被禁止。

407：访问的资源需要代理身份验证。

414：请求的URL太长。

500：服务器内部错误。