11.手写封装Ajax请求

AJAX是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的 异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。

创建AJAX请求的步骤：

• 创建一个 XMLHttpRequest 对象。
• 初始化参数类容，请求方法默认为GET，请求格式默认为json
• 处理参数，将参数变为字符串，方便加在路径当中
• 在这个对象上使用 open 方法创建一个 HTTP 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。
• 在发起请求前，可以为这个对象添加一些信息和监听函数。比如说可以通过 setRequestHeader 方法来为请求添加头信息。还可以为这个对象添加一个状态监听函数。一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变化时会触发onreadystatechange 事件，可以通过设置监听函数，来处理请求成功后的结果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是 200-300之间的话则代表返回正常。这个时候就可以通过 response 中的数据来对页面进行更新了。
• 当对象的属性和监听函数设置完成后，最后调用 send方法来向服务器发起请求，可以传入参数作为发送的数据体。

function ajax(options){
    //创建xhr对象
    const xhr = new XMLHttpRequest();

    //初始化参数的内容
    options = options || {};
    options.type = (options.type || 'GET').toUpperCase();
    options.dataType = options.dataType || 'json';

    //处理参数
    let str = '';
    let params = options.data;
    for(let key in params){
        str += key + '=' + params[key] + '&'
    }
    //去除最后一个&
    params = str.slice(0,str.length - 1);

    //发起请求
    if(options.type === 'GET'){
        xhr.open('GET',options.url + '?' + params,true);
        xhr.send(null)
    }else if(options.type === 'POST'){
        xhr.open('POST',options.url,true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(params);
    }

    //接收请求
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            let status = xhr.status
            if(status >= 200 && status < 300){
                options.success && options.success(xhr.responseText,xhr.responseXML);

            }else {
                options.fail && options.fail(status);
            }
        }
    }
}

//发送GET请求
ajax({
    type: 'get',
    dataType: 'json',
    data: { uid: '64dcd451a2d7172b77c03768', aid: "64db6361c57b44a4c47712af" },
    url: 'http://localhost:3456/wyc/getUser',
    success: function (text, xml) {//请求成功后的回调函数
      console.log(JSON.parse(text))
    },
    fail: function (status) {//请求失败后的回调函数
      console.log(status)
    }
})


//发起POST请求
ajax({
    type: 'post',
    dataType: 'json',
    data: { uid: '64dcd451a2d7172b77c03768', aid: "64db6361c57b44a4c47712af" },
    url: 'http://localhost:3456/wyc/attention',
    success: function (text, xml) {//请求成功后的回调函数
      console.log(JSON.parse(text))
    },
    fail: function (status) {
      console.log(status)
    }
})