1，首先我们先了解下什么是Ajax以及为什么要使用ajax？
Ajax（Asynchronous JavaScript and XML），即为异步的JavaScript和xml，是指一种创建交互式网页应用的网页开发技术。首先，我们要知道，Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。其次，了解到它是异步，这样就可使网页从服务器请求少量的信息，而不是整个页面。
而什么是异步？跟同步有什么区别呢？当你理解这个之后，你就明白为什么要使用ajax了。在Ajax之前，当我们需要先服务器请求数据时，我们向服务器发送一个请求，发送之后我们只能等待服务器的响应，给我们返回数据回来，而在这个期间我们什么都干不了，只能等待，这就是同步。而ajax的出现则帮我们解决了这个问题，我们先看下ajax的工作原理，如图1所示
有了ajax之后，我们只需要把请求服务器这一块，交给ajax去做就行了，ajax就相当于“中间商”或者“中介”什么的，替我们去“跑腿”，这样，我们就不需要刷新整个页面去等待服务器的响应了，只需要利用JavaScript向服务器发送请求即可，就可以再不刷新页面的情况下，实现局部页面数据更新的效果。
2，Ajax本地运行的环境搭建。
在ajax运行之前，我们要先搭建好环境。使用wampServer或者xampp都可以，浏览器搜索下载即可。以wampserver为例来说明，下载完之后运行即可。在安装的目录中，有一个叫www的文件夹，我们把要运行的的文件放在它里面即可。首先，检查wampserver是否运行了，在浏览器输入localhost回车，看到图2说明已经启动了。之后我们输入要执行的文件。假如我要执行的是www目录下的index.html文件，在浏览器输入localhost/index.html回车即可运行。
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：服务器内部错误。
