Vanilla JavaScript のみを使用して AJAX 呼び出しを行うにはどうすればよいですか?

jQuery を使用しない AJAX 呼び出し: Vanilla JavaScript アプローチの探索

jQuery を使用しない AJAX 呼び出しは、広範なサードパーティ ライブラリに依存しない非同期通信の能力。ここでは、プレーンな JavaScript を使用してこれを実現する方法を詳しく説明します。

バニラ JavaScript XHR オブジェクト

XMLHttpRequest (XHR) オブジェクトは、バニラ JavaScript での AJAX 呼び出しの基礎です。 。まず、新しい XMLHttpRequest() コンストラクターを使用して XHR オブジェクトをインスタンス化します。

イベント処理関数とコールバック関数

次に、XHR オブジェクトの状態を監視するイベント リスナーを定義します。 (準備完了状態)。状態が XMLHttpRequest.DONE (通常は 4) に遷移すると、リクエストが完了したことを示します。

HTTP リクエストとレスポンスの処理

open() メソッドが初期化されます。 HTTP リクエスト。リクエスト メソッド (GET、POST など)、ターゲット URL、およびリクエストを行うかどうかを指定します。非同期 (AJAX の場合は true に設定)。 send() メソッドはリクエストを送信します。

レスポンスを受信したら、XHR オブジェクトの status プロパティを評価します。ステータス コード 200 はリクエストが成功したことを示し、他のコード (400 や 500 など) はエラーを示します。これらのシナリオを適宜処理してください。

コード例

次のコード スニペットは、バニラ JavaScript を使用して AJAX 呼び出しを作成および処理する方法を示しています。

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) { // XMLHttpRequest.DONE == 4
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "ajax_info.txt", true);
    xmlhttp.send();
}

結論

作り方がわかるjQuery を使用しない AJAX 呼び出しにより、開発者としてのツールキットが拡張されます。バニラ JavaScript XHR オブジェクトを利用することで、非同期通信プロセスを完全に制御できるようになり、Web アプリケーションで柔軟かつ効率的なデータ転送が可能になります。

以上がVanilla JavaScript のみを使用して AJAX 呼び出しを行うにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。