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

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)
        }
    })

}

 

    function ajax(options){
        var xhr = null;
        var params = formsParams(options.data);
        //创建对象
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest()
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 连接
        if(options.type == "GET"){
            xhr.open(options.type,options.url + "?"+ params,options.async);
            xhr.send(null)
        } else if(options.type == "POST"){
            xhr.open(options.type,options.url,options.async);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(params);
        }
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                options.success(xhr.responseText);
            }
        }
        function formsParams(data){
            var arr = [];
            for(var prop in data){
                arr.push(prop + "=" + data[prop]);
            }
            return arr.join("&");
        }
    }

    //调用
    ajax({
        url : "/apis/index.js",  // url---->地址
        type : "GET",   // type ---> 请求方式
        async : true,   // async----> 同步：false，异步：true 
        success : function(data){   //返回接受信息
            console.log(JSON.parse(data));
        }
    })