javascript http方法

JavaScript はフロントエンド開発において重要なプログラミング言語であり、Web ページでのさまざまな対話型操作を処理するために使用されます。中でも http メソッドはよく使われるリクエストメソッドで、サーバーにリクエストを送信し、そのレスポンス結果を取得することができます。この記事では、JavaScript の http メソッドとその関連使用法について説明します。

1. http メソッドの概要

http メソッドは、ネットワーク経由でサーバーにリクエストを送信する方法を指します。現在一般的に使用されている http メソッドには、GET、POST、PUT、DELETE などが含まれます。その中で、GET と POST の 2 つは最も広く使用されているメソッドです。

HTTP プロトコルの 4 つのアクション:

GET: 「読み取り」操作を実行するために、URI によって識別されたリソースへのアクセスを要求するために使用されます。 GET メソッドでは、サーバーが応答メッセージの本文内の URL によって特定されるリソースを返し、内容を説明する応答ヘッダー情報の形式と文字セットを指定する必要があります。

POST: 指定されたリソースにデータを送信し、サーバーに処理 (フォームの送信やファイルのアップロードなど) を要求します。 POST リクエストにより、新しいリソースが作成されたり、既存のリソースが変更されたりすることがあります。

PUT: ファイルをサーバーにアップロードするか、既存のリソースを更新するために使用されます。

DELETE: 指定されたリソースの削除をサーバーに要求します。

2. JavaScript の http メソッド

JavaScript では、XMLHttpRequest オブジェクトを使用して http リクエストを実装できます。 XMLHttpRequest オブジェクトは、次の共通メソッドを提供します。

(1) open() メソッド: このメソッドの機能は、新しい http リクエストを作成することです。このメソッドのパラメータには、http メソッド、リクエストされた URL アドレス、非同期リクエスト モードを使用するかどうかなどが含まれます。

XMLHttpRequest.open(メソッド、URL、非同期、ユーザー、パスワード);

メソッド パラメーターの説明:

メソッド: GET、POST、などの http メソッドを表します。 PUT、DELETEなど

url: 要求された URL アドレスを示します。

async: 非同期リクエスト モードを使用するかどうかを示します。 false は同期モードを示し、true は非同期モードを示します。

user: ユーザー名を示します (オプション)。

password: パスワードを示します (オプション)。

(2) send() メソッド: このメソッドは、http リクエストをサーバーに送信するために使用されます。このメソッドのパラメータは、要求されたデータ コンテンツ (POST メソッドの場合) または空 (GET メソッドの場合) にすることができます。

XMLHttpRequest.send(data);

(3) setRequestHeader() メソッド: このメソッドは、リクエスト ヘッダーの属性と値を設定するために使用されます。リクエストヘッダーの属性には、Content-Type、Accept などが含まれます。

XMLHttpRequest.setRequestHeader(name, value);

メソッドパラメータの説明:

name: リクエストヘッダーの属性名を指定します。

value: リクエストヘッダーの属性値を指定します。

(4) onreadystatechange 属性: この属性は、サーバー応答のステータス変更を処理するコールバック関数を定義します。

XMLHttpRequest.onreadystatechange = function() {};

• readyState: XMLHttpRequest オブジェクトのステータスを 0 ～ 4 の範囲で示します。

0: 初期化されていないことを示します (open() メソッドがまだ呼び出されていません)。
1: 初期化中であることを示します。つまり、open() メソッドは呼び出されていますが、send() メソッドはまだ呼び出されていません。 ##2: リクエストは送信された(send()メソッドが呼び出された)が、サーバーからの応答メッセージはまだ受信されていないことを意味します。
3: サーバーの応答メッセージを受信しましたが、応答データをすべて読み取っていません。
4: すべての応答データが読み取られました。

status: 成功を示す 200、要求されたリソースが存在しないことを示す 404 など、サーバーから返されるステータス コードを示します。

responseText: サーバーから返された応答テキストを示します。

デモンストレーションの例

次に、GET メソッドと非同期リクエスト メソッドを使用して http リクエストを送信する例を示します。

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.responseText);
        }
    }
    xhr.open("GET", "https://www.example.com/", true);
    xhr.send();
}

上記のコードsendHttpRequest() という名前の関数は、関数内の XMLHttpRequest オブジェクトを使用して GET リクエストをアドレス "https://www.example.com/" に送信し、非同期リクエスト モードを true に設定すると定義します。サーバーが応答結果を正常に返し、ステータス コードが 200 の場合、応答テキストがコンソールに出力されます。

以下は、POST メソッドと同期リクエスト メソッドを使用して http リクエストを送信する例です。

function sendHttpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "https://www.example.com/", false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("name=John&age=25");
    console.log(xhr.responseText);
}

上記のコードでは、sendHttpRequest() という名前の関数を定義し、XMLHttpRequest を使用します。関数 オブジェクトはアドレス「https://www.example.com/」に POST リクエストを送信し、同期リクエスト モードを false に設定します。同時に、 setRequestHeader() メソッドを呼び出して、リクエスト ヘッダーの Content-Type 属性を設定し、リクエスト データのタイプが「application/x-www-form-urlencoded」であることを示します。 send()メソッドでリクエストデータを送信します。データ内容は「name=John&age=25」です。サーバーが応答結果を正常に返すと、応答テキストがコンソールに出力されます。

概要

この記事では、JavaScript の http メソッドとその関連使用法を紹介します。上記の例のデモを通して、XMLHttpRequest オブジェクトを使用すると http リクエストを簡単に実装できることがわかりますが、同時に、リクエスト ヘッダーとリクエスト パラメーターを設定することで、さまざまなリクエストの種類と形式も実装できることがわかります。したがって、フロントエンド開発者にとって、JavaScript の http メソッドを習得することは非常に必要です。

以上がjavascript http方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。