SOURCE

// 手写ajax

const ajax = option => {
    // type  url  data  timeout  success error 将所有参数换成一个对象{}

    // 0.将对象转换成字符串
    // 处理obj
    const objToString = data => {
        data.t = new Date().getTime();
        let res = []
        for (let key in data) {
            res.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
        }
        return res.join('&')
    }
    console.log(objToString, '0.对象转换成字符串')

    let str = objToString(option.data || {})

    // 1.创建一个异步对象xmlHttp
    var xmlHttp, timer
    if (window.XMLHttpRequest) {
        // code for IE8+ and other
        xmlHttp = new XMLHttpRequest()
    } else if (xmlHttp) {
        // code for IE6+ IE7+
        xmlHttp = new ActiveXObject('Microsoft.xmlHttp')
    }

    // 2. 设置请求方式和请求方式  and  3.发送请求
    // 判断请求的类型是 POST 和 GET
    if (option.type.toLowerCase() === 'get') {
        // GET请求
        xmlHttp.open(option.type, option.url + '?t=' + str, true)
        xmlHttp.send()
    } else {
        // POST请求
        xmlHttp.open(option.type, option.url, true)
        // 注意：在post请求中，必须在open 和 send 之间添加http请求头：setRequestHeader(hander,value)
        xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
        xmlHttp.send()
    }

    // 4.监听状态的变化
    xmlHttp.onreadystatechange = function () {
        clearInterval(timer)
        debugger
        if (xmlHttp.readyState === 4) {
            // 5. 处理返回结果   --  成功回调
            option.success(xmlHttp.responseText)
        } else {
            // 失败回调
            option.error(xmlHttp.responseText)
        }
    }

    // 判断外界是否传入了超时时间
    if (option.timeout) {
        timer = setInterval(function () {
            xmlHttp.abort() //中断请求
            clearInterval(timer)
        }, option.timeout)
    }
}