原生Ajax的简单封装

Ajax在浏览器与Web服务器之间使用异步数据传输，这样就可以使网页从服务器请求少量的信息，而不是整个页面。

使用者可以做到：

• 不刷新页面更新网页
• 在页面加载后从服务器请求数据
• 在页面加载后从服务器接收数据
• 在后台向服务器发送数据

但是每次要发送请求的时候就要调用一次xml对象比较麻烦，所以我们封装一个函数调用Ajax。

function post(url, data, callback) {
    var xhr = new XMLHttpRequest()
    var formData = ""
    for (const key in data) {
        formData += key + "=" + data[key] + "&"
    }
    xhr.open("post", url, true)
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(formData)
    xhr.onreadystatechange = function () {
        if (typeof callback === "function") {
            if (this.status == 200) {
                if (this.readyState == 4) {
                    var text = JSON.parse(this.responseText);
                    if(callback) {
                     callback(text)
                    }
                }
            }
        } else {
            // 开发人员抛出的自定义错误信息
            throw new Error('第二参数必须是一个匿名函数')
        }

    }
}

封装好之后我们只要调用post()函数传入相应的值就能做到简单的Ajax数据传送