AJAX

Asynchronous Javascript And XML ：异步的JS和XML

AJAX作用

客户端可以使用AJAX技术从服务器端获取到需要的数据，然后绑定在页面中显示，在前后端分离项目中，AJAX/JSONP是最主要的一种技术之一

AJAX的语法

1.var xhr=new XMLHttpRequest(); //->创建一个AJAX对象
2.xhr.open([method],[request url],[async],[user name],[user pass]); //->打开一个请求连接(做AJAX发送前请求前的配置准备)
3.xhr.onreadystatechange=function(){
4.    //->只要AJAX状态发生改变，事件就会被触发，绑定的方法也会被执行
5.    if(xhr.readyState===4 && xhr.status===200){
6.        //->xhr.readyState:AJAX状态码
7.        //->xhr.status:服务器状态码
8.
9.        xhr.responseText; //->获取服务器返回的响应主体内容
10.    }
11.}
12.xhr.send(null); //->发送AJAX请求给服务器,在没有执行send之前,AJAX请求这件事不算开始,只有执行了SEND后，AJAX这件事才算开始；当我们客户端已经获取到响应主体内容的时候(xhr.readyState===4的时候)，AJAX这件事才算结束；SEND中放入的是请求主体内容；

第一步：创建AJAX对象

var xhr=new XMLHttpRequest();
在IE6及以下版本的浏览器中不兼容，我们需要使用ActiveXObject来处理

1.function createXHR() {
2.    var xhr = null,
3.        flag = false,
4.        ary = [
5.            function () {
6.                return new XMLHttpRequest;
7.            },
8.            function () {
9.                return new ActiveXObject("Microsoft.XMLHTTP");
10.            },
11.            function () {
12.                return new ActiveXObject("Msxml2.XMLHTTP");
13.            },
14.            function () {
15.                return new ActiveXObject("Msxml3.XMLHTTP");
16.            }
17.        ];
18.    for (var i = 0, len = ary.length; i < len; i++) {
19.        var curFn = ary[i];
20.        try {
21.            xhr = curFn();
22.            createXHR = curFn;
23.            flag = true;
24.            break;
25.        } catch (e) {
26.        }
27.    }
28.    if (!flag) {
29.        throw new Error("your browser is not support ajax,please change your browser,try again!");
30.    }
31.    return xhr;
32.}

第二步：打开一个请求的连接地址

xhr.open([method],[request url],[async],[username],[userpass]);

1、method设置请求的方式

GET系列

• get 获取
• delete 删除
• head 只获取服务器响应头信息

POST系列

• post 推送
• put 放

……

GET系列和POST系列的区别:

GET主要应用于给服务器的少，从服务器获取的多，例如：获取服务器上的数据进行展示和数据绑定…
POST主要应用于给服务器的多，从服务器获取的少，例如：用户注册…
在真实项目中，我们使用GET请求，会把传递给服务器的内容“通过问号传参的方式”传递给服务器；而POST请求是把内容放在“请求主体”中传递给服务器的；

1)GET请求专递给服务器的内容有大小限制

xhr.open(‘get’,’/temp?name=zf&age=8…’);
每一个浏览器对于URL的长度是有限制的(谷歌8KB、火狐7KB、IE2KB)，如果传递的内容比较的多，URL会很长，超出的部分，浏览器会截取。
POST理论上没有大小的限制，真实项目中为了节约网络消耗和提高性能，我们自己会做最大的限制

2)GET请求不安全,POST相对安全

GET是通过问号传参传递信息的，很容易被url劫持，导致信息的泄露或者恶意修改等

3)GET请求容易出现缓存(并且这个缓存不被我们控制)

还是因为GET是通过问号传参传给服务器的
xhr.open(‘get’,’/temp?id=12’); 只要我们两次及以上请求相同的地址传递相同的内容，浏览器很容易就把第一次的结果作为缓存
我们可以使用在URL末尾追加随机数的方式清除缓存：xhr.open(‘get’,’/temp?id=12&_=’+Math.random())

2、request url 请求的URL地址(真实项目中的这个地址是服务器告诉我们的)

3、设置同步异步，默认是true，代表异步，传递的是false，代表同步

4、设置用户名和密码(基本上不用)

第三步：监听AJAX状态的改变

xhr.onreadystatechange=function(){
//->js code
}

AJAX的各种状态

xhr.readyState

• 0 UNSEND 未发送，创建一个AJAX对象，默认的状态就是零
• 1 OPENED 已打开，也就是把xhr.open(…)执行了
• 2 HEADERS_RECEIVED 已经获取到服务器的响应头信息了
• 3 LOADING 响应主体内容正在加载
• 4 DONE 响应主体内容加载完成

服务器响应状态码(HTTP网络状态码):

200 成功
301 永久重定向(永久转移)
302 临时重定向(临时转移) 服务器负载均衡
304 读取缓存数据(对于不经常改变的CSS/JS等文件,我们可以做304缓存)
400 传递参数有误
401 没权限
404 找不到
500 未知的服务器错误
503 服务器超负载

获取服务器响应主体的内容：

xhr.responseText 获取的一般都是JSON格式的字符串数据或者是纯文本数据再或者二进制文本数据
xhr.responseXML 获取的是XML格式的数据

第四步：SEND发送请求

xhr.send([requestBodyContent]); 只有POST系列请求，才会把传递给服务器的内容，通过请求主体传递给服务器，GET系列下，我们直接传递null即可;

AJAX实战开发

案例一：客户端获取服务器端的时间
在限时抢购或者倒计时的案例中，我们不能用客户端本地的时间做为参考依据，需要从服务器上获取服务器时间来处理…

1.var xhr = new XMLHttpRequest;
2.xhr.open('head', 'student.xml?_=' + Math.random());
3.xhr.onreadystatechange = function () {
4.    if (xhr.status !== 200) return;
5.    if (xhr.readyState === 2) {
6.        //->HEADERS_RECEIVED
7.        //响应头信息已经接收了,在响应头中就已经有服务器的时间了
8.
9.        //->xhr.getResponseHeader:获取响应头信息
10.        //获取到的服务器时间是格林尼治时间GMT(字符串类型),我们还需要把获取的时间转换为北京标准时间
11.        var time = xhr.getResponseHeader('Date');
12.        time = new Date(time);
13.        console.log(time);
14.    }
15.};
16.xhr.send(null);

以上是AJAX的基础知识，在后面的文章中，我们还会继续介绍AJAX库的编写以及实战开发技巧，敬请关注…