JavaScriptはAjaxリクエストパラメータを送信します

JavaScript は、インターネット上で最も一般的に使用されているプログラミング言語の 1 つであり、Web サイトに動的な対話性を追加するために使用できます。 AJAX は、ページ全体を更新せずにサーバーとの非同期データ交換を行うためのテクノロジーです。多くの Web サイトで、AJAX を介してデータを取得する例が見られます。 JavaScript を使用して AJAX リクエストを送信し、戻り値を受け取るにはどうすればよいですか?この記事ではそれを紹介します。

AJAX リクエストを送信する主な手順は次のとおりです。

1. XMLHttpRequest オブジェクトを作成する
2. リクエスト メソッドとリクエスト アドレスを指定する
3. リクエスト ヘッダー情報
4. リクエストを送信する
5. サーバーから返されたデータを受信して​​処理する
#XMLHttpRequest オブジェクトを作成する

最初に XMLHttpRequest を作成しますJavaScript コードを通じてオブジェクトを取得します。

var xhr = new XMLHttpRequest();

リクエスト メソッドとリクエスト アドレスを指定します

次に、リクエスト メソッドとリクエスト アドレスを指定する必要があります。たとえば、GET メソッドを使用してリクエストを /api/data.php に送信する必要がある場合は、次のコードを使用できます。

xhr.open('GET', '/api/data.php', true);

最初のパラメータはリクエスト メソッドを指定し、2 番目のパラメータはリクエスト アドレスを指定し、3 番目のパラメータは非同期で実行するかどうかを指定します (通常は true)。

POST メソッドを使用する必要がある場合は、次のコードを使用できます。

xhr.open('POST', '/api/data.php', true);

リクエスト ヘッダー情報の設定

リクエストを送信する前に、リクエスト ヘッダー情報も設定する必要があります。たとえば、Content-Type を application/x-www-form-urlencoded に設定できます。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

リクエストの送信

次に、send() メソッドを使用してリクエストを送信します。 GET メソッドを使用する場合は、空の文字列をパラメータとして渡すだけです。例:

xhr.send('');

POST メソッドを使用する場合は、送信する必要があるデータを渡すことができます。例:

xhr.send('name=John&age=25');

サーバーから返されたデータを受信して​​処理する

サーバーが応答を返すと、readyState 属性を通じてリクエストのステータスを検出できます。 readyState には 5 つの値があります。

0 (初期化されていない): xhr オブジェクトは作成されたが、open() メソッドが呼び出されなかったことを示します。
1 (送信中): open() メソッドが呼び出されたが、send() メソッドが呼び出されなかったことを示します。
2 (送信済み): send() メソッドが呼び出されたが、サーバーがまだ応答を返していないことを示します。
3 (受信中): 応答の受信が開始されていますが、受信が完了していないことを示します。
4 (完了): 応答が完了し、サーバーから返されたデータにアクセスできることを示します。

次のコードを使用して、readyState の変更をリッスンできます。

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理服务器返回的数据
        console.log(xhr.responseText);
    }
}

readyState が 4 に達すると、responseText プロパティにアクセスして、サーバーから返された応答情報を取得できます。

上記は、JavaScript を使用して AJAX リクエストを送信するための基本的な手順です。これらの手順により、非同期リクエストをサーバーに簡単に送信し、応答データを取得できます。

以上がJavaScriptはAjaxリクエストパラメータを送信しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。