2.Web前端之封装自己的AJAX库

1.AJAX本质

AJAX是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写，它不是一门新的语言，而是对现有技术的一种综合应用。AJAX本质上是在Http协议的基础上以异步的方式与服务器端进行数据交互。

2.异步

异步指的是在某段程序执行的过程中，不会阻塞其他程序的正常执行，这里所说的异步跟java中的多线程有点类似，但是和多线程是有区别的，不要混淆。在JavaScript中通过浏览器内建对象XMLHttpRequest的方式，实现与服务器端进行通信。可以实现对网页的部分刷新。

3.Http请求与响应

HTTP请求3个组成部分与XMLHttpRequest方法的对应关系如下：

1.请求行

 

var xhrequest = new XMLHttpRequest();
xhrequest.open('get','1.php');

 

2.请求头

a.以post方式发送请求

xhrequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

b.以get方式发送请求（可以不写）

xhrequest.setRequestHeader('Content-Type', 'text/html');

 

3.请求主体

a.以get方式，此处写null,，但是请求头里面不许填写请求内容，如xhrequest.open('get','1.php?name=rui&age=10');

 

 

xhrequest.send(null);

 

b.以post方式

xhrequest.send('name=rui&age=10');

4.响应

HTTP响应是由服务端发出的，HTTP响应3个组成部分与XMLHttpRequest方法或属性的对应关系：

 

1、获取状态行（包括状态码&状态信息）

 

xhrequest.status //状态码
xhrequest.statusText //状态信息

 

 

2、获取响应头

 

xhrequest.getAllResponseHeaders(); //获取所有响应头信息
xhrequest.getResponseHeader('Content-Type');　

 

 

3、响应主体

 

xhrequest.responseText; //JSON格式
xhrequest.responseXML; // XML格式

 

由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。JavaScript中onreadystatechange事件用于监听XMLHttpRequest的状态

4.封装自己的AJAX库

/**
 * Ajax封装
 * 2016-12-20
 * By Rained
 */
// 封装自已的Ajax库
var MyAjax = {
    format: function (params) {
        var data = '';
        // 拼凑参数
        for(key in params) {
            data += key + '=' + params[key] + '&';
        }

        // 将最后一个&字符截掉
        return data.slice(0, -1);
    },
    ajax: function (options) {
        // 实例化XMLHttpRequest
        var xhr = new XMLHttpRequest,
            
            // 默认为get方式
            type = options.type || 'get',
            // 默认请求路径
            url = options.url || location.pathname,
            // 格式化数据key1=value1&key2=value2
            data = this.format(options.data);

        // get 方式将参数拼接到URL上并将data设置成null
        if(type == 'get') {
            url = url + '?' + data;
            data = null;
        }

        xhr.open(type, url);

        // post 方式设置请求头
        if(type == 'post') {
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        }

        // 发送请求主体
        xhr.send(data);

        // 监听响应
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200) {
                // 获取响应类型
                var contentType = xhr.getResponseHeader('Content-Type');

                var data = xhr.responseText;

                // 解析JSON
                if(contentType.indexOf('json') != -1) {
                    data = JSON.parse(data);
                }
                
                // 调用success
                options.success(data);
            } else {
                options.error('请求失败!');
            }
        }

    }
};

 

注：GET和POST请求方式的差异

1、GET没有请求主体，使用xhr.send(null)

2、GET可以通过在请求URL上添加请求参数

3、POST可以通过xhr.send('name=itcast&age=10')

4、POST需要设置 

5、GET效率更好（应用多）

6、GET大小限制约4K，POST则没有限制