javascriptはサーバーにリクエストし、応答を待ちます

Web アプリケーション開発では、サーバーからデータを取得してクライアントに表示することが必要になることがよくあります。 JavaScript は現代の Web 開発で最も人気のある言語の 1 つであり、クライアントで JavaScript を使用してサーバーにリクエストを行い、応答を待つことは一般的な操作です。この記事では、JavaScript を使用して HTTP リクエストを送信し、サーバーの応答を待つ方法について説明します。

1. HTTP リクエストの送信

XMLHttpRequest オブジェクトは、JavaScript で HTTP リクエストを送信するために使用されます。 XMLHttpRequest オブジェクトは、最新の Web アプリケーションで最も一般的に使用される非同期データ交換テクノロジです。これにより、JavaScript から非同期リクエストを作成し、サーバーと対話できるようになります。簡単な例を次に示します。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();

上記のコードは、GET メソッドを使用して http://localhost:8080/data エンドポイントからデータをリクエストします。 send() メソッドが呼び出されると、リクエストがサーバーに送信されます。このメソッドは非同期であるため、後続のコードの実行をブロックしません。

2. サーバーの応答を待機しています

リクエストを送信した後、サーバーの応答を待つ必要があります。リスナーを使用して応答を処理できます。簡単な例を次に示します。

const xhr = new XMLHttpRequest();
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error('Error occurred');
    }
};
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();

上記のコードは、サーバーにリクエストを送信し、サーバーが応答したときにその応答を処理します。ロード イベント リスナーは、アプリケーションが応答を受信したときに起動します。応答ステータスが 200 の場合、応答をコンソールに出力します。それ以外の場合は、エラーメッセージが出力されます。

3. Promise を使用して非同期リクエストを処理する

上記の例では、コールバック関数を使用してサーバーの応答を処理します。ただし、コールバック関数はネストされたわかりにくいコードになる可能性があるため、Promise を使用して非同期リクエストを処理できます。以下は、Promise を使用して非同期リクエストを処理する例です。

function makeRequest(method, url) {
    return new Promise(function(resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function() {
            if (xhr.status === 200) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = function() {
            reject(xhr.statusText);
        };
        xhr.send();
    });
}

上記のコードでは、makeRequest 関数は HTTP メソッドと URL をパラメータとして受け取り、Promise オブジェクトを返します。このオブジェクトには、解決と拒否という 2 つのハンドラー関数があります。サーバーが正常に応答すると、解決ハンドラー関数は応答をコンソールに出力します。エラーが発生した場合、リジェクトハンドラ関数はエラーメッセージを出力します。

関数の使用方法は次のとおりです:

makeRequest('GET', 'http://localhost:8080/data')
    .then(function(response) {
        console.log(response);
    })
    .catch(function(error) {
        console.error(error);
    });

上記のコードは、HTTP GET リクエストを作成し、処理が成功または失敗した場合にハンドラー関数を呼び出します。 Promise スタイルを使用して非同期コードを記述すると、コールバック関数を使用するよりも理解しやすく、保守しやすくなります。

結論

JavaScript を使用して HTTP リクエストを送信し、サーバーの応答を待つことは、Web アプリケーションでは不可欠なスキルです。 JavaScript は、この操作を処理するための XMLHttpRequest オブジェクトを提供しており、開発者がコードを簡素化するためにサードパーティのライブラリを使用することを制限しません。この記事では、ネイティブ JavaScript を使用して HTTP リクエストを送信し、サーバーの応答を待つ例を示し、Promise スタイルを使用して非同期コードを記述する方法を示します。

以上がjavascriptはサーバーにリクエストし、応答を待ちますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。