Ajax学习笔记

在上一个外包项目中，因为用到了前后端分离的思路，所以都要通过Ajax来请求数据然后把数据渲染到页面上，一开始想过直接引用Jquery，但感觉就使用Jquery的Ajax函数，有点太浪费，所以就自己撸了一个Ajax函数。本文由浅入深，一步一步带你封装属于自己的Ajax库。

Ajax简介

Asynchronous Javascript And XML （异步的JavaScript和XML）

它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体

Ajax是一种用于创建快速动态网页的技术。在前台与后台进行数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，实现局部更新。

1、优点

页面无刷新，用户体验好。

异步通信，更加快的响应能力。

减少冗余请求，减轻了服务器负担。

基于标准化的并被广泛支持的技术

2、应用场景

场景 1. 数据验证

场景 2. 按需取数据

场景 3. 自动更新页面

…

说了这么多，接下来来点干货。

创建ajax的步骤

Ajax的原理简单来说通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生创建ajax可分为以下四步

1、创建XMLHttpRequest对象

function createRequest (){
    if (window.XMLHttpRequest) {
        //IE6以上
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

2、准备请求

1	xhr.open(method,url,async);

第一个参数表示请求类型的字符串，其值可以是GET或者POST
GET请求：
1
xhr.open("GET",demo.php?name=hzzly&age=21,true);

POST请求：

1	xhr.open("POST",demo.php,true);

第二个参数是要作为请求发送目标的URL。
第三个参数是true或false，表示请求是以异步还是同步的模式发出。（默认为true，一般不建议为false）

3、发送请求

1	xhr.send();

GET请求：

1 2	xhr.open("GET",demo.php?name=hzzly&age=21,true); xhr.send();

POST请求

1
2
3

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send(param)

4、处理响应

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log(xhr.responseText);
    }
}

onreadystatechange：当处理过程发生变化的时候执行下面的函数

readyState：ajax处理过程

0：请求未初始化（还没有调用 open()）

1：请求已经建立，但是还没有发送（还没有调用 send()）

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）

3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成

4：响应已完成；您可以获取并使用服务器的响应了

status属性:

200: “OK”

404: 未找到页面

responseText：获得字符串形式的响应数据，可以用JSON.parse(xhr.responseText)转化为JSON对象

封装例子

1.get请求函数

/**
 * 一个简单的get请求
 * @param {String}   url     请求地址,文件名
 * @param {Function} fnSucc  请求成功时执行的函数
 * @param {Function} fnFaild 请求失败执行的函数
 */
function Get(url, fnSucc, fnFaild) {
    //1.创建ajax对象
    var xhr = null;
        /**
         * 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined.
         * 进入else若直接使用XMLHttpRequest在不支持的情况下会报错
         **/
    if (window.XMLHttpRequest) {
        //IE6以上
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.连接服务器
    //open(方法,url,是否异步)
    xhr.open("GET", url, true);
    //3.发送请求
    xhr.send();
    //4.接收返回
    //OnRedayStateChange事件
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                //alert("成功" + xhr.responseText);
                fnSucc(xhr.responseText);
            } else {
                //alert("服务器响应失败!");
                if (fnFaild) {
                    fnFaild();
                }
            }
        }
    };
}

2.get与post结合的请求函数

/**
 * AJAX函数封装
 * @param {string} url     请求地址（必须）
 * @param {object} options 发送请求的选项参数
 *   @config {string} [options.type] 请求发送的类型。默认为GET。
 *   @config {Object} [options.data] 需要发送的数据。
 *   @config {Function} [options.onsuccess] 请求成功时触发。（必须）
 *   @config {Function} [options.onfail] 请求失败时触发。
 */
function AJAX(url, options) {
    //1.创建ajax对象
    var xhr = null;
        /**
         * 此处必须需要使用window.的方式,表示为window对象的一个属性.不存在时值为undefined,进入else
         * 若直接使用XMLHttpRequest,在不支持的情况下会报错
         **/
    if (window.XMLHttpRequest) {
        //IE6以上
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //2.连接服务器
    //open(方法,url,是否异步)
    var param = ""; //请求参数。
    //只有data存在，且为对象使才执行
    var data = options.data ? options.data : -1; //缓存data
    if (typeof (data) === "object") {
        for (var key in data) { //请求参数拼接
            if (data.hasOwnProperty(key)) {
                param += `${key}=${data[key]}&`;
            }
        }
        param.replace(/&$/, "");
    } else {
        param = "timestamp=" + new Date().getTime();
    }
    //3.发送请求
    var type = options.type ? options.type.toUpperCase() : "GET";
    if (type === "GET") {
        xhr.open("GET", `${url}?${param}`, true);
        xhr.send();
    } else {
        xhr.open("POST", url, true);
        xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
        xhr.send(param);
    }
    //4.接收返回
    //OnRedayStateChange事件
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                //请求成功。形参为获取到的字符串形式的响应数据
                options.onsuccess(xhr.responseText);
            } else {
                //先判断是否存在请求失败函数
                //存在时，形参为XMLHttpRequest对象，便于进行错误进行处理
                if (options.onfail) {
                    options.onfail(xhr);
                }
            }
        }
    };
}