JavaScriptを使用して独自のAjax関数を定義する

ネイティブJSによって開始されたネットワークリクエストは、クエリ文字列の形でサーバーに送信されるため、ユーザーがオブジェクトの形でパラメーターを送信する方が便利であるため、ユーザーが渡すパラメーターオブジェクトを処理し、Resolvedata関数を定義し、正式なパラメーターを設定してパラメーターを受け取ります＆アレイの各項目を分割して、イサイマ関数を定義し、XHRオブジェクトを作成し、パラメーターを処理する関数に渡され、等式を削除するかどうかを確認します渡されたパラメーターは小文字である可能性があります。これらは、条件を満たしている場合、対応する値を埋め、送信済みのポストを呼び出します。最後に、リスニングイベントを呼び出します。

関数resolveData(データ) {
    var arr = [];
    (var k in data) の場合 {
        var str = k + "=" + データ[k];
        arr.push(文字列)
    }
    arr.join("&") を返します
}
関数 itheima(オプション) {
    var xhr = 新しい XMLHttpRequest();
    var qs = 解決データ(options.data);
    if (options.method.toUpperCase() === "GET") {
        xhr.open(options.method, options.url + "?" + qs);
        xhr.send();
    } そうでない場合、options.method.toUpperCase() === "POST"){
        xhr.open(オプション.メソッド、オプション.url)
        xhr.setRequestHeader("コンテンツタイプ","application/x-www-form-urlencoded")
        xhr.send(qs)
    }
    xhr.onreadystatechange = 関数 () {
        xhr.readyState === 4 && xhr.status === 200 の場合 {
            var 結果 = JSON.parse(xhr.responseText)
            オプション.成功(結果);
        }
    }
}

最後に成功するかテストします〜

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>テストインターフェース</title>
<script src="itheima.js"></script>
</head>
<本文>
    <スクリプト>
        イテイマ（{
            メソッド:"GET",
            url:"http://www.liulongbin.top:3006/api/getbooks",
            データ：{
                id:1
            },
            成功:function(res){
                コンソールログ(res);
            }
        });
    </スクリプト>
</本文>
</html>