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: すべての応答データが読み取られました。

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

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();
}

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);
}

概要

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