使用JavaScript 定義自己的ajax函數

Posted on by

由於用原生js的方式發起的網絡請求，都是以查詢字符串的形式，提交給服務器的，用戶以對象的形式提交參數的話會比較方便，所以需要把用戶傳遞過來的參數對象進行處理，定義resolveData的函數，設置形參接收參數，遍歷裡面的對象，把鍵和值用=的方式進行拼接，然後把所得的值添加進空的數組即可；最後用&符號把數組的每一項進行分割，並返回；定義itheima函數，設置形參用於接收用戶傳遞過來的配置對象參數，創建xhr對象，把傳遞過來的參數傳遞給處理參數的函數，把得到的返回值，給一個變量，由於是不同的請求，所以要進行判斷，首先是GET請求，判斷參數裡面的method是否全等於GET，由於傳遞過來的參數有可能是小寫，所以通過toUpperCase方法轉化為大寫，如果條件成立調用open方法，把對應的值填入即可，調用send函數；POST也一樣，隻是提交數據多瞭參數和POST請求需要“Content-Type”頭指定請求主題的MIME類型。最後調用監聽事件即可；

function resolveData(data) {
    var arr = [];
    for (var k in data) {
        var str = k + "=" + data[k];
        arr.push(str)
    }
    return arr.join("&")
}
function itheima(options) {
    var xhr = new XMLHttpRequest();
    var qs = resolveData(options.data);
    if (options.method.toUpperCase() === "GET") {
        xhr.open(options.method, options.url + "?" + qs);
        xhr.send();
    } else if(options.method.toUpperCase() === "POST"){
        xhr.open(options.method, options.url)
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        xhr.send(qs)
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var result = JSON.parse(xhr.responseText)
            options.success(result);
        }
    }
}

最後測試一下是否能成功~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>測試界面</title>
<script src="itheima.js"></script>
</head>
<body>
    <script>
        itheima({
            method:"GET",
            url:"http://www.liulongbin.top:3006/api/getbooks",
            data:{
                id:1
            },
            success:function(res){
                console.log(res);
            }
        });
    </script>
</body>
</html>

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：