上一篇理解了Ajax是什么，以及为什么使用Ajax，不知道小伙伴还记忘记？忘记的可以去瞄一眼，嘿嘿 ~ 那么接下来详情Ajax的使用。
在Ajax讲解之前呢，我们得先详情一个对象，即XMLHttpRequest对象。
Ⅰ、那么什么是XMLHttpRequest呢？
即XMLHttpRequest是一种支持异步请求的技术，它是Ajax的核心。那么为什么它是Ajax核心呢？那就来絮叨一下它的作用了。
Ⅱ、XMLHttpRequest的作用：
⑴在与服务器通讯的过程中，能向服务器提出请求并解决响应，从而不阻塞客户；
⑵可以在页面加载完成后进行页面的局部升级，表现在Ajax技术上，而这个技术是通过XMLHttpRequest对象来实现的。
So，它就是Ajax的核心。
Ⅲ、如何使用Ajax？
⑴ 创立XMLHttpRequest对象，即创立一个异步调用对象；
⑵ 创立一个新的HTTP请求，并指定该HTTP请求的方法、URL；
⑶ 设置响应HTTP请求状态变化的函数；
⑷ 发送HTTP请求；
⑸ 获取异步调用返回的数据；
⑹ 使用JS 和 DOM 实现局部刷新。
那么知道了这几个步骤怎样来实现呢？稍等片刻，我们先来说一下步骤中我标注的加粗字体。
HTTP是一种无状态的协议，也就是不建立持久的连接。
一个HTTP请求一般由四部分组成：
a. HTTP请求的方法(get? |? ?post)，get通常用来获取信息，post 用于新建、修改、删除信息，相对安全些；
b. 正在请求的URL地址；
c. 请求头，它包含少量身份验证信息，用户端环境信息等；
d. 请求体，即正文。它包含了客户提交的表单信息、查询的信息等。
而一个完整的HTTP请求过程大致分为以下几个步骤：
a. 建立TCP连接；
b. web浏览器向web服务器发送请求命令；? ?
c.?web浏览器发送请求头信息；? ?
d.?web服务器应答； ??
e.?web服务器发送应答头信息；? ? ?
f.?web服务器向浏览器发送数据； ??
g.?web服务器关闭TCP连接。??
HTTP状态码是由3个数字组成的，其中首位数字定义了状态码的类型，常见的有以下几种：
1xx 表示收到了web浏览器的请求，正在进一步解决。
2xx 客户请求被接收完成。eg：200 →OK
3xx 请求未成功。
4xx 表示用户端提交的请求有误。? ?eg： 400?→ Not Found?
5xx? 表示服务器不能完成对请求的解决? ? eg： 500
压轴菜来啦 ~
我们不能像之前一样，用浏览器直接打开一个页面即可以运行了，是不行的。所以我们需要一个服务器来支持，我安装的是wampserver，在这里我放一下下载地址：http://www.wampserver.com/en/#wampwerver-64-bits-php-5-6-25-php-7
将下载好的压缩包解压，双击应用程序进行安装，进入安装页面后，直接傻瓜式安装，ok,下一步,是等等…..如若没有出现问题，当图标是绿色的时候代表安装成功，而后再浏览器中进行测试。
在我们运行一个页面时，仍然不能单击鼠标右键去运行的，需要把浏览器打开，而后输入要访问的主目录下的页面。接下来进行Ajax异步调用第一步，实例化对象，为了能兼容各大浏览器，我们创立t对象过程中做一个封装通用的XMLHttpRequest对象
function createXHR(){
// 先判断浏览器能否将XMLHttpRequest作为本地对象实现的
if(typeof XMLHttpRequest != “undefined”){
????????return new XMLHttpRequest();
}else if (typeof ActiveXObject() != “undefined”){
????????// 将所有可能出现的ActiveXObject版本放在一个数组内
????????var xhrArr = [‘Microsoft.XMLHTTP’,’MSXML2.XMLHTTP.6.0′,’MSXML2.XMLHTTP.5.0′,’MSXML2.XMLHTTP.4.0′,’MSXML2.XMLHTTP.3.0′,’MSXML2.XMLHTTP.2.0′];
????????// 遍历创立XMLHttpRequest对象
????????var len = xhrArr.length;
????????for(var i = 0;i < len;i++;){
????????????????try{
????????????????????// 创立对象
????????????????????var xhr = new ActiveXObject(xhrArr[i]);
????????????????????break;
????????????????}catch(ex){
????????????????}
????????}
????return xhr;
????}else{
????throw new Error(‘不支持xhr对象’);
????}
}
第一步 over
第二步：创立HTTP请求，语法：open(method,url,async)
参数解释：① method请求类型，GET或者POST，可选参数，GET是默认的请求方式? ?② url 请求的文件地址 ，该文件可以是任何类型的文件，必须参数 ③ async true异步(默认)? 或者 false(同步)?，可选参数
// XMLHttpRequest对象
var xhr = createXHR();
// 创立请求
xhr.open(‘get’,’./server/slider.json’,true);
第二步over
第三步：设置响应XMLHttpRequest对象状态变化的函数
// 响应XMLHttpRequest对象状态变化的函数,onreadystatechange在readystatechange属性发生改变时触发
xhr.onreadystatechange = function(){
????????// 异步调用成功,响应完成
????????if(xhr.readyState === 4){
????????????????if((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304){
????????????????????????// 第四步：获取服务器返回的数据
? ? ? ? ? ? ? ? ? ? }
????????}
}
第三步over
响应能否成功是通过onreadystatechange这个监听事件来得知的：
0 代表 请求未初始化，open未调用
1 代表服务器连接并建立，open已调用
2 代表请求已接收
3 代表请求解决中
4 代表请求已完成，即响应成功
第四步：发送请求? ? ? ? 语法：send(string)? ?
参数解释：string仅仅用于post请求，不需要时就发送null
在用POST请求的时候就要增加HTTP头，假如需要像HTML表单那样POST数据，就要用setRequsetHeader()来增加HTTP头，而后send()方法中规定发送的数据
语法：xmlhttp.setRequsetHeader(header,value)
使用：xmlhttp.setRequsetHeader(“Content-type”,”application/x-www-form-urlencoded”);
并且设置http头信息必需写在open 和send中间，否则需要抛出异常
xhr.send(null);
第四步over
第五步：获取返回的数据
console.log(xhr.responseText);? // 就能查看我们从服务器中响应的数据
第五步over
前五步涉及的点比较多，最重要的是我手写也累了…嘿嘿 ~~
今天我饶过我自己啦，第六步等明天更 ~~?
