AJAX封装

Ajax ：

即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax封装

将请求代码封装到函数中，在需要用到时调用函数即可。

实现分析：

1. 请求参数：请求参数有请求地址，请求方式，请求内容，请求成功回调，请求失败回调。
2. 由于参数众多，可以用对象进行封装。
3. 把一些参数设为默认参数，可避免调用时多参现象。

// 调用函数
ajax({
    // 请求方式
    type : 'post',      // 有post，get两种
    // 请求地址
    url : 'http://localhost:3000/first',
    // 请求内容
    data : {
        name : 'zhangsan',
        age : 12
    },
    // 传递头：传递方式为post时使用，说明传递的类型，有 x-www-form-urlencode 表单格式和 json 格式
    header : {
        'Content-Type' : 'application/x-www-form-urlencoded'
    },
    // 成功回调
    success(res){
        console.log(res)
    },
    // 失败回调
    fail(err){
        console.log(err)
    }
})


// 对应函数：根据调用的需求来写
function ajax(options){
    // 设置默认存储对象
    var defaults = {
        type : 'get',     // 默认为 get
        url : '',
        data : {},
        header : {
            'Content-Type' : 'application/x-www-form-urlencoded'
        },
        success(){},
        fail(res, xhr){
            // 输出错误原因
            console.log(res, xhr)
        }
    }

    // 对象覆盖：使 options 对象中的属性覆盖到 defaults 对象
    Object.assign(defaults, options)

    // 创建 ajax 对象
    let xhr = new XMLHttpRequest()

    // 判断请求方式：get 方式在 url 后面要添加参数，且 post 的 form-urlencoded 请求方式也是这种格式，故在外面拼接数据
    // 拼接请求参数，化成 name=zhangsan&age=12 形式
    let parmas = ''
    for(let attr in defaults.data){
        parmas += attr + '=' + defaults.data[attr] + '&'
    }
    // 将参数后面的 & 去掉
    parmas = parmas.substr(0, parmas.length-1)

    // 把参数拼接到 url 后面
    if(defaults.type === 'get'){
        defaults.url = defaults.url + '?' + parmas
    }

    // 启动连接请求
    xhr.open(defaults.type, defaults.url)

    // 判断请求方式：如果是 post，则需要在单独发送数据过去
    if(defaults.type == 'post'){
        // 设置请求头
        xhr.setRequestHeader('Content-Type', contentType)

        // 判断请求类型
        var contentType = defaults.header['Content-Type']
        if(contentType == 'application/json'){
           // json 格式化为字符串 xhr.send(JSON.stringify(defaults.data))
        }else{
            // post 的 form-encoded 请求数据跟 get 相同
            xhr.send(parmas)
        }
    }else{
        xhr.send()
    }

    // 获取响应数据
    xhr.onload = function(){
        // 获取响应数据的数据类型
        let contentType = xhr.getResponseHeader('Content-Type')

        // 获取响应数据内容
        let responseText = xhr.responseText

        // 判断数据类型
        if(contentType.includes('application/json')){
            // 字符串化为 json 格式
            responseText = JSON.parse(responseText)
        }

        // 判断请求状态是否成功
        if(xhr.status === 200){
            // 调用成功函数
            defaults.success(responseText, xhr)
        }else{
            // 调用失败函数
            defaults.fail(responseText, xhr)
        }
    }
}