ajax中get，post，以及二合一的封装

Posted 2022-10-30 xiaomala

document.onclick = function()
        var url = "http://localhost/1908/ajax/data/data.php";

        ajaxGet(url,function(res)
            console.log(res)
        ,
            user:"admin",
            pass:123123
        );
    

    function ajaxGet(url,cb,data)
        // 1.处理data的默认值
        data = data || ;
        // "url?user=admin&pass=123"
        // 2.解析要发送的数据
        var str = "";
        for(var i in data)
            str += `$i=$data[i]&`;
        
        // 3.处理时间戳
        var d = new Date();
        // 4.拼接url，实现数据的发送和时间戳的拼接
        url = url + "?" + str + "__qft="+d.getTime();

        // console.log(url)

        // 5.ajax的正式开启，请求，接收
        var xhr = new XMLHttpRequest();
        xhr.open("GET",url,true);
        xhr.onreadystatechange = function()
            if(xhr.readyState == 4 && xhr.status == 200)
                cb(xhr.responseText);
            
        
        xhr.send();
    

　　1.get的封装

 document.onclick = function()
        var url = "http://localhost/1908/ajax/data/data.php";
        ajaxPost(url,function(res)
            console.log(res)
        ,
            user:"admin",
            pass:"123123"
        )
    

    function ajaxPost(url,cb,data)
        data = data || ;
        var str = "";
        for(var i in data)
            str += `$i=$data[i]&`;
        
        // "user=admin&pass=123&"
        // post发送的数据，不在url身上

        var xhr = new XMLHttpRequest();
        // 1.修改ajax的执行方式为post
        xhr.open("post",url,true);
        xhr.onreadystatechange = function()
            if(xhr.readyState == 4 && xhr.status == 200)
                cb(xhr.responseText)
            
        
        // 2.设置发送数据的格式为表单数据
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        // 3.将原来在url身上拼接的数据，交给send发送
        xhr.send(str);
    

　　2.post的封装

document.onclick = function()
        ajax(
            // type:"get",                 //发送方式，可选，默认get
            url:"http://localhost/1908/ajax/data/data.php",   //要请求的地址，必选
            success:function(res)         //请求成功之后的函数，必选
                console.log(res)
            ,
               data:                      //要发送的数据，可选，默认不发
                   user:"admin",
                   pass:13123121123
               ,
               error:function(res)         //请求失败之后的函数，可选，默认不处理
                   console.log(res)
               ,
               timeout:10                  //请求超时的时间，可选，默认2000
        )
    

    function ajax(options)
        // 1.处理默认参数
        var type,url,success,error,data,timeout = options;
        type = type || "get";
        data = data || ;
        timeout = timeout || 2000;

        // 2.解析要发送的数据
        var str = "";
        for(var i in data)
            str += `$i=$data[i]&`;
        

        // 3.根据方式，决定是否处理url
        if(type == "get")
            var d = new Date();
            url = url + "?" + str + "__qft=" + d.getTime();
        

        // 4.开启ajax
        var xhr = new XMLHttpRequest();
        // 注意：open中的方式
        xhr.open(type,url,true);
        xhr.onreadystatechange = function()
            if(xhr.readyState == 4 && xhr.status == 200)
                // 5.执行成功之前，先判断是否传入
                success && success(xhr.responseText);
                // 成功之后，不应有失败
                error = null;
            else if(xhr.readyState == 4 && xhr.status != 200)
                // 6.执行失败之前，先判断是否传入
                error && error(xhr.status);
                // 失败之后，不应有成功
                success = null;
                // 且失败不应多次执行
                error = null;
            
        

        // 7.如果请求超时，执行失败
        setTimeout(() => 
            error && error("timeout");
            // 失败之后，不应有成功
            success = null;
        , timeout);

        // 8.最后根据type的方式，决定send的发送内容和格式
        if(type == "post")
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(str)
        else
            xhr.send()
        
    

　　3.二合一的封装