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

JavaScript は、フロントエンド開発とバックエンド開発の両方に使用できる、一般的に使用されるスクリプト言語です。フロントエンドの開発プロセスでは、多くの場合、AJAX を介してバックエンド サーバーにリクエストを送信し、応答データを取得する必要があります。その中でもよく使われるリクエストメソッドがGETリクエストですが、今回はJavaScriptを使用してGETリクエストを送信する方法と、GETリクエストのパラメータを送信する方法を紹介します。

1. JavaScript による GET リクエストの送信

JavaScript では、XMLHttpRequest オブジェクト (XHR オブジェクトと呼ばれる) を使用して HTTP リクエストを送信できます。以下は、XHR オブジェクトを使用して GET リクエストを送信する簡単な例です。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/getUserInfo', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

上記のコードでは、最初に XHR オブジェクトが作成され、リクエスト メソッドは GET、リクエスト アドレスは /getUserInfo です。 。次に、onreadystatechange イベント ハンドラーが登録され、応答ステータスが 4 (要求が完了したことを示す) で応答コードが 200 の場合、応答テキストが出力されます。最後に、send メソッドを通じてリクエストを送信します。

XMLHttpRequest には互換性の問題があることに注意してください。IE6 および 7 では、代わりに ActiveXObject オブジェクトを使用する必要があります。詳細については、関連ドキュメントを参照してください。

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

実際のアプリケーションでは、リクエスト パラメータをバックエンド サーバーに送信することが必要になることがよくあります。 GET リクエストでは、通常、リクエスト パラメータは URL のクエリ文字列を通じて渡されます。以下に示すように、JavaScript を使用して URL を結合することにより、リクエスト パラメーターを URL に追加できます。

var username = 'Tom';
var age = 20;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getUserInfo?username=' + username + '&age=' + age, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

URL を結合することにより、2 つのリクエスト パラメーター username と age が URL に追加されます。なお、リクエストパラメータに中国語などの非ASCII文字が含まれる場合、URLエンコードを行う必要があり、文字化けが発生する可能性があります。以下に示すように、エンコードには encodeURI 関数を使用できます。

var username = '小明';
var age = 20;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getUserInfo?username=' + encodeURI(username) + '&age=' + age, true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

上記のコードでは、encodeURI 関数を使用して中国語の文字列を URL エンコードし、リクエスト パラメータが正しく渡されるようにします。

URL を結合するだけでなく、XHR オブジェクトの setRequestHeader メソッドを使用して、リクエスト ヘッダーにリクエスト パラメータを追加することもできます。以下に示すように、

var params = 'username=' + encodeURI('小明') + '&age=' + 20;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getUserInfo', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(params);

上記のコードでは、まずリクエストパラメータを「パラメータ名 = パラメータ値」の形式で結合し、その結果を params 変数に格納します。次に、setRequestHeader メソッドを使用してリクエスト ヘッダーの Content-type を application/x-www-form-urlencoded に設定し、リクエスト パラメーターの形式をサーバーに通知します。最後に、send メソッドを通じてリクエストを送信し、リクエスト パラメーターを渡します。

上記の紹介を通じて、JavaScript を使用して GET リクエストを送信する方法と、GET リクエスト パラメータを送信する方法を学びました。実際のアプリケーションでは、特定のニーズに応じて適切なメソッドを選択してリクエスト パラメータを渡すことができ、それによりフロントエンドとバックエンドのデータ対話が実現されます。

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