Ajax探究和原生Ajax封装

什么是Ajax?

Ajax 是一种技术方案，不是新技术。它依赖现有的CSS/HTML/Javascript,其中最核心的是XMLHttpRquest对象。

Ajax 请求步骤

1. 创建 XMLHttpRequest 对象
2. 准备发送请求 open()
3. 发送请求数据 send()
4. 请求返回的回调函数 onreadystatechange = function(){}

Ajax步骤详解

1. 创建 XMLHttpRequest 对象
   var xhr = new XMLHttpRequest()
2. 准备发射数据的 open() 方法
   语法：xhr.open("请求类型","url地址","是否异步")
   例如：xhr.open("get","http://127.0.0.1/index.php?username=123&sex=1",true) xhr.open("post","http://127.0.0.1/index.php?login.php",true)
3. send() 发送请求的数据

• post: send(data)
• get: send()
  因为 get 请求发送的数据实际上是拼接在地址栏中，所以发送的数据为空。

4. 回调函数 onreadystatechange 属性指向一个回调函数
   当页面加载状态发生改变，xhr 的 readystate 属性就会发生改变，然后 onreadystatechange 指向的回调函数就会自动被调用。
   例：

let xhr = new XMLHttpRequest();
xhr.open("get","http://a.itying.com/api/productlist",true);
xhr.send();
if(xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.response);
}

readyState 状态值

是指运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤
0 – 4 的状态变化：

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成且响应已就绪

status 状态码

是 XMLHttpRequest 对象的一个属性，表示响应的HTTP状态码
状态码分五大类：

• 1xx：信息响应类，表示接收到请求并且继续处理
• 2xx：处理成功响应类，表示动作被成功接收、理解和接受
• 3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理
• 4xx：客户端错误，客户请求包含语法错误或者是不能正确执行
• 5xx：服务端错误，服务器不能正确执行一个正确的请求

XMLHttpRquest兼容

老版本的 Internet Explorer(ie5 和 ie6) 使用 ActiveX 对象：
let xhr = new ActiveXObject("Microsoft.XMLHTTP")

请求超时 timeout 和 超时监听 ontimeout

1. timeout 属性值为一个整数，单位为 ms (毫秒)，用来设置请求发送后等待接收响应的时间。如果在设置时间内未能接收到后端响应的数据，则被认为请求超时，则执行 ontimeout
2. ontimeout() 是等待超时后，自动执行的回调方法
   例：

let xhr = new XMLHttpRequest();
xhr.timeout = 60000;
xhr.ontimeout = function() {
      console.error("Time Out !")
}

封装原生的 Ajax

封装思路：请求方式，请求地址，请求数据，回调函数
将请求的数据格式化成拼接的数据

/**
 * jsonData 的格式：
 * {
 *   url:       请求地址
 *   method:    请求类型
 *   data：      请求数据
 *   isAsync    是否异步
 *   success    成功的回调函数
 *  }
 * */
function $ajax(jsonData) {
    let formatData = "";
    let xhr;
    // 兼容低版本ie
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // 格式化数据为 key1=value1&key2=value2 的格式
    if(jsonData.data) {
        let str = "";
        let arr = [];
        for(let key in jsonData.data) {
            str = `${key}=${jsonData.data[key]}`
            arr.push(str);
        }
        formatData = arr.join("&");
    }
    // get请求
    if(jsonData.method.toLowerCase() == "get") {
        xhr.open('get', jsonData.url + "?" + formatData, jsonData.isAsync);
        xhr.send()
    // post请求
    } else if(jsonData.method.toLowerCase() == "post") {
        xhr.open('post', jsonData.url, jsonData.isAsync);
        xhr.setRequestHeader('Contenttype','application/x-www-form-urlencoded;charset=utf-8');
        xhr.send(formatData);
    }
    // 状态值和状态码对应上后 执行成功的回调函数
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            jsonData.success(xhr.response);
        } 
    }
}

具体使用案例：

$ajax({
    url: "http://127.0.0.1:8082/process_get",
    method: "get",
    data: {
        myname: myname,
        myage: myage
    },
    isAsync: true,
    success: function(res) {
        console.log("successRes:", res);
    }
})

本文转载自简书《Ajax探究和原生Ajax封装》。