ajax封装

ajax是2005年被Jesse James Garrett提出的新术语，它是一种web数据交互的方式，我们也叫它异步JavaScript和XML，可以快速的将数据呈现在用户面前，而不需要整体页面进行刷新(★)。接下来就是简单的ajax封装：

ajax运行原理图

1.ajax底层运行原理就是通过JavaScript来操作。ajax他并不是一门编程语言，而是为了更好与web端产生交互的技术。
2.ajax通过httpRequest来向服务器端发送请求，通过httpRequest， JavaScript 可在不重载页面的情况与 Web 服务器交换数据，也就是说在不需要刷新的情况下，就可以产生局部刷新的效果。服务器进行数据处理之后，通过XML返回给ajax需要的数据。
3.通过HTML，和css进行页面展示数据，显示给用户界面。

function ajax(data){
    let xhr = null;
    let params = formsData(data.data);

    //创建对象
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    //链接
    if (data.type === 'GET') {
        //open三个参数，请求方式，请求数据，是否同步异步
        xhr.open(data.type,data.url + "?" + params,data.async);
        xhr.send(null)  //发送数据
    }else if(data.type === 'POST'){
        xhr.open(data.type,data.url,data.async);
        //设置请求头(POST)
        xhr.setRequestHeader("Authori-zation","Bearer " +  '需要拼接的token' );
        xhr.send(params) //发送数据
    }

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            data.success(xhr.responseText);
        }
    }

    //循环post传输数据分解成formData格式
    function formsData(data){
        let arr = [];
        for (const i in data) {
            arr.push(i + '=' + data[i])
        }
        return arr.join('&');
    }

}

通过上面的ajax封装，我们进行简单的调用

ajax({
    type:'GET', //请求方式
    url:'url' , //路径
    async:true, //同步异步
    data:null,  //传输数据
    success:function(data){
        console.log(data);
    }
})

以上就是对ajax的简单封装！