jQuery を使用せずに AJAX 呼び出しを行うにはどうすればよいですか?

jQuery を使用しない AJAX 呼び出し

今日の Web 開発環境において、AJAX はユーザー エクスペリエンスを向上させるための重要な技術となっています。 jQuery は AJAX 呼び出しのプロセスを簡素化しますが、バニラ JavaScript を使用して AJAX 呼び出しを実行する方法を理解することが重要です。

jQuery を使用せずに AJAX 呼び出しを行う方法の 1 つは、XMLHttpRequest (XHR) オブジェクトを利用することです。以下に例を示します。

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

このスクリプトでは、XMLHttpRequest オブジェクトを作成し、readystatechange イベントのイベント リスナーを設定します。リクエストが完了すると (readystate が 4)、ステータス コードをチェックし、結果に基づいて適切なアクションを実行します。

jQuery は、次に示すように、AJAX 呼び出しを行うためのより簡潔な方法を提供します。

$.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $(this).addClass("done");
    }
});

このスクリプトは jQuery $.ajax() メソッドを使用しており、柔軟性とコードの可読性が向上しています。ただし、jQuery は jQuery ライブラリの組み込みに依存するのに対し、バニラ JavaScript アプローチはほとんどの最新ブラウザでネイティブに機能することに注意することが重要です。

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