上一篇了解了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
前五步涉及的点比较多，最重要的是我手写也累了…嘿嘿 ~~
今天我饶过我自己啦，第六步等明天更 ~~
网友评论