JavaScript で Ajax を使用する一般的な方法と記述方法について説明します。

JavaScript と Ajax の組み合わせは、最新の Web アプリケーションを構築するための鍵の 1 つです。 Ajax (Asynchronous JavaScript and XML) は、ページ全体を再読み込みせずにサーバーとデータを送受信するためのテクノロジーです。次の記事では、JavaScript で Ajax を使用する一般的な方法と記述方法について説明します。

Ajax の 4 つのステップ

JavaScript で Ajax を使用する方法に入る前に、Ajax の 4 つのステップを理解する必要があります:

1. XMLHttpRequest オブジェクトを作成する

まず、JavaScript を使用して XMLHttpRequest オブジェクトを作成する必要があります。これにより、サーバーに非同期でデータをリクエストできるようになります。

2. リクエストの送信

XMLHttpRequest オブジェクトが作成されたら、それを使用して HTTP リクエストを送信する必要があります。リクエストの種類はニーズによって異なります。通常、GET リクエストはサーバーからデータを取得するために使用され、POST リクエストはサーバーにデータを送信するために使用されます。

3. 応答の処理

サーバーは XMLHttpRequest オブジェクトを通じて応答を返します。結果はプレーン テキスト、XML ドキュメント、または JSON 形式になります。

4.ページの更新

サーバーから応答を受信したら、JavaScript を使用して Web ページを更新できます。要素の追加、削除、変更などの HTML DOM 操作を通じてページを更新できます。

次に、一般的な Ajax 記述方法をいくつか示します。

XMLHttpRequest オブジェクトの使用

最も一般的な方法は、XMLHttpRequest オブジェクトを使用してデータを送受信することです。以下は、サーバーにリクエストを送信し、レスポンスを受信したときにページを更新する基本的な例です。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            document.getElementById("result").innerHTML = xhr.responseText;
        } else {
            alert('Error: ' + xhr.status);
        }
    }
};
xhr.open('GET', 'example.php', true);
xhr.send(null);

この例では、XMLHttpRequest オブジェクトを作成し、onreadystatechange 関数を設定します。この関数は、応答を受信したときに呼び出されます。この関数では、readyState 属性と status 属性をチェックして、応答が成功したかどうかを判断します。成功した場合は、DOM API を使用してページを更新します。

jQuery ライブラリの使用

jQuery は、Ajax の使用を簡素化する非常に人気のある JavaScript ライブラリです。以下は、jQuery を使用してサーバー上でリクエストを行い、ページを更新する例です。

$.ajax({
    url: 'example.php',
    method: 'GET',
    success: function(result) {
        $('#result').html(result);
    },
    error: function(xhr, status, error) {
        console.log('Error: ' + error);
    }
});

この例では、$.ajax() 関数を使用してサーバーにリクエストを送信します。リクエストの URL を指定する url 属性、リクエストのタイプを指定するメソッド属性、成功した応答を処理するための success 関数、およびエラー応答を処理するための error 関数を設定します。

Fetch API の使用

Fetch API は、サーバーに対してネットワーク リクエストを行うための新しい JavaScript API です。 XMLHttpRequest オブジェクトとは異なり、これは Promise に基づいており、ネットワーク リクエストを送受信するためのより効率的な方法を提供します。以下は、Fetch API を使用してリクエストを送信し、ページを更新する例です。

fetch('example.php')
    .then(response => response.text())
    .then(result => {
        document.getElementById("result").innerHTML = result;
    })
    .catch(error => {
        console.log('Error: ' + error);
    });

この例では、fetch() 関数を使用してサーバーにリクエストを送信します。 then() 関数を使用して成功した応答を処理し、catch() 関数を使用してエラー応答を処理します。応答が正常に処理された後、DOM API を使用してページを更新します。

概要

最新の Web アプリケーションでは、JavaScript と Ajax が不可欠です。 JavaScript の XMLHttpRequest オブジェクト、jQuery ライブラリ、または Fetch API を使用すると、サーバーにリクエストを送信して応答を受信し、DOM API を使用してページを更新することが簡単にできます。どちらの方法を選択する場合でも、潜在的な例外をキャッチするために try-catch ブロックを必ず使用してください。

以上がJavaScript で Ajax を使用する一般的な方法と記述方法について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。