Ajax的创建思路

1. 实现方法

• 创建一个XmlhttpRequest对象
• 然后在使用创建好的对象下的open方法，创建一个http请求信息
• 然后再设置请求头的信息 比如是content-type
• 设置响应http请求状态变化的函数onreadstatechange
• 发送http请求,使用send方法
• 获取异步调用时返回的结果

• 然后对页面进行局部的数据更新操作

  2. 请求状态码

• 0 未初始化状态

• 1 初始化状态
• 2 发送数据的状态
• 3 接受数据的状态
• 4 完成状态

3. 封装方法

unction ajax(params) {
    // 给ajax设定一个默认值
    let defaults = {
        type: 'get',
        url: '',
        data: {},
        header: {
            'Content-Type': 'application/json'
        },
        success: (data) => {},
        error: (data) => {}
    }
    // 使用Object.assign()方法 将之间的对象覆盖
    Object.assign(defaults,params)
    let xhr = new XMLHttpRequest();
    let options = ''
    for (let attr in params.data) {
        options += attr + '=' + defaults.data[attr] + '&'
    }
    options = options.substr(0, defaults.length - 1)
    // console.log(options)
    if (defaults.type === 'get') {
        defaults.url = defaults.url + '?' + options
    }
    xhr.open(defaults.type, defaults.url)
    if (defaults.type == 'post') {
        let contentType = defaults.header['Content-Type']
        xhr.setRequestHeader('Content-Type', contentType)
        if (contentType === 'application/json') {
            xhr.send(JSON.stringify(defaults.data))
        } else {
            xhr.send(options)
        }
    } else {
        xhr.send()
    }
    xhr.onload = () => {
        // 对http的状态码进行判断如果状态码为200则调用success函数，如果失败则调用error函数
        if (xhr.status == 200) {
            let responseHeader = xhr.getResponseHeader('Content-Type')
            let resText = xhr.responseText
            if (responseHeader.includes('application/json')) {
                resText = JSON.parse(resText)
            }
            defaults.success(resText, xhr)
        } else {
            defaults.error(resText, xhr)
        }