类似jquery的原生js封装ajax

一、前言

对于ajax，其核心代码如下：

var xhr = new XMLHttpRequest();
xhr.open("method", "url", "async");
xhr.send(null);
xhr.onreadystatechange = function(){
    if(xhr.readystate == 4){
　　　if(xhr.status == 200){
　　　　　console.log(xhr.responseText)
　　　}
　 }
}

  　一个对象（XMLHttpRequest对象）、

　　两个方法（包括open("method", "url", "async")方法和send(content)方法）、

　　三个属性（readystate表示当前请求状态，status表示http请求状态码，responseText表示服务器反馈内容），

　　当然还有一个事件——onreadystatechange ，是在readystate状态改变时触发的事件。

二、正文

先来看看jQuery中Ajax方法的使用：

$.ajax({
    type: "GET",            　　//访问服务器的方式，GET/POST
    url: "test.json",       　　//url表示访问的服务器地址
    data: {
           username: "",     
           content: ""
    }, 　　　                   //data表示传递到后台的数据，使用键值对形式传递
    async: true,            　 //true表示异步，false表示同步
    success: function(data){
        console.log(data)
    },
    error: function(err){
        console.log(err)
    }
});

如何封装呢？

function ajax(){
    var ajaxData = {
        type: (arguments[0].type || "GET").toUpperCase(),
        url: arguments[0].url || "",
        async: arguments[0].async || "true",
        data: arguments[0].data || null,
        dataType: arguments[0].dataType || "json",
        contentType: arguments[0].contentType || "application/x-www-form-urlencoded; charset=utf-8",
        beforeSend: arguments[0].beforeSend || function(){},
        success: arguments[0].success || function(){},
        error: arguments[0].error || function(){}
    };

    ajaxData.beforeSend();
    var xhr = createxmlHttpRequest();
    xhr.responseType=ajaxData.dataType;
    //判断请求类型
    if (ajaxData.type == "GET") {
        xhr.open(ajaxData.type, ajaxData.url + "?" + convertData(ajaxData.data));
        xhr.send();
    } else if (ajaxData.type == "POST") {
        xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);
        xhr.setRequestHeader("Content-Type",ajaxData.contentType);
        xhr.send(convertData(ajaxData.data));
    }


    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if(xhr.status == 200){
                ajaxData.success(xhr.response)
            }else{
                ajaxData.error()
            }
        }
    }
}

//创建ajax对象
function createxmlHttpRequest() {
    if (window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }
}

//对url参数进行封装
function convertData(data){
    if( typeof data === 'object' ){
        var convertResult = "" ;
        for(var c in data){
            convertResult+= c + "=" + data[c] + "&";
        }
        convertResult=convertResult.substring(0,convertResult.length-1)
        return convertResult;
    }else{
        return data;
    }
}

在外部js文件调用

ajax({
        url:'http://localhost:8080/getnews',
        type:'GET',
        data:{
            page:1,
            type:'guonei'
        },
        dataType:'json',
        success:function(e){
           
        }
    })

参考以下博文：

https://www.cnblogs.com/nangezi/p/9034054.html