原生ajax的简单封装（仅提供大概的思路，具体还有参数验证的都没做）

Posted 2021-02-14 Hello_nico

window.onload=function(){
    //get请求========================================================================================
    function ajaxGet(url,success,fail){
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("micsoft XMLHttp")
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    success(JSON.parse(xhr.responseText))
                }else{
                    fail(xhr.status)
                }
            }
        }
        xhr.open("get",url,true);
        xhr.send()
    }

    //post请求=======================================================================================
    function ajaxPost(url,data,success,fail){
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("micsoft XMLHttp")
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    success(JSON.parse(xhr.responseText))
                }else{
                    fail(xhr.status)
                }
            }
        }
        xhr.open("post",url,true);
        xhr.send(data)
    }

    //普通调用
    ajaxPost("https://www.apiopen.top/femaleNameApi",{"page":1},function(res){
        console.log(res)
    },function(res){
        console.log(res)
    })

//-------------------------------------------------------------------------分割线-----------------------------------------------------------------------------

    //面向对象post方法及调用方式==================================================================================
    function Post(obj){
        var options = obj
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("micsoft XMLHttp")
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    options.success(JSON.parse(xhr.responseText))
                }else{
                    options.fail(xhr.status)
                }
            }
        }
        xhr.open(options.method,options.url,options.async);
        xhr.send(options.data)
    }
    //调用
    Post({
        method:"post",
        url:"https://www.apiopen.top/femaleNameApi",
        data:{"page":1},
        async:true,
        success:function(res){
            console.log(res)
        },fail:function(res){
            console.log(res)
        }
    })

}