JavaScriptはAjaxリクエストパラメータを送信します-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-12 14:23:37

オリジナル

924 人が閲覧しました

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

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

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 つの値があります。

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

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

ログイン後にコピー

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

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

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