JavaScriptはバックグラウンドメソッドcを呼び出します

フロントエンド プログラミング言語として、JavaScript は主に Web ページの対話とダイナミクスに使用されます。しかし、テクノロジーの発展に伴い、バックエンド プログラミングの観点から JavaScript が開発者からますます注目を集めるようになり、特に Node.js の登場以降、JavaScript はフルスタック プログラミング言語になりました。 JavaScriptをバックグラウンドで使用して開発する場合、バックグラウンドメソッドの呼び出しは重要な機能ですが、JavaScriptでバックグラウンドメソッドを呼び出す方法を簡単に紹介します。

1. XMLHttpRequest オブジェクトを使用してバックグラウンド メソッドを呼び出す

XMLHttpRequest オブジェクトは、サーバーとデータを交換するために JavaScript で一般的に使用されるオブジェクトで、ページを再読み込みせずに Web ページを更新できます。

1.1 オブジェクトの作成

XMLHttpRequest オブジェクトを作成するときは、次のコードを使用できます。

var xhr = new XMLHttpRequest();

1.2 リクエスト メソッドとリクエスト アドレスを指定します

XMLHttpRequest を作成する場合、オブジェクトの後にリクエスト メソッドとリクエストされたアドレスを指定する必要があります。リクエスト メソッドは GET または POST で、リクエスト アドレスはバックグラウンド メソッドの URL アドレスを参照します。これは、次のコードによって実現されます。

xhr.open('GET', '/backend_method_url', true);

1.3 リクエストの送信

リクエスト メソッドとリクエスト アドレスを指定した後、次のコードを通じてサーバーにリクエストを送信します。

xhr.send();

1.4 コールバック関数の設定

リクエスト送信後、リクエスト応答のステータスとデータを処理するためにコールバック関数を設定する必要があります。これは、次のコードによって実現されます:

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var responseText = xhr.responseText;
        console.log(responseText);
    }
}

このうち、xhr.readyState は XMLHttpRequest オブジェクトのステータスを表し、ステータス値は次のとおりです:

• 0:初期化されていません
• 1: すでに open メソッドが呼び出されていますが、send メソッドは呼び出されていません
• 2: send メソッドが呼び出され、リクエストが送信中です
• 3 : サーバーから返されたデータは受信中です
• 4: すべてのデータが受信されています。responseText 属性を使用してすべての応答データを取得できます

xhr.status は HTTP ステータスを表しますコードの場合、ステータス コード値は次のとおりです。

• 200: リクエスト成功
• 404: リクエストされたリソースが存在しません
• 500: サーバー エラー

1.5 データの送信

バックグラウンド メソッドのデータを取得するだけでなく、バ​​ックグラウンド メソッドにリクエストを行って、データを送信することもできます。これは、次のコードによって実現されます。

xhr.send('user_name=Tom&password=123456');

「send」メソッドのパラメータは、文字列またはフォーム データの形式で送信されるデータです。バックグラウンド メソッドのパラメータを通じて受信できます。

2. fetch API を使用してバックグラウンド メソッドを呼び出す

fetch API は、XMLHttpRequest オブジェクトを置き換えるために使用できる新しいネットワーク リクエスト API です。フェッチ API を使用すると、AJAX リクエストを簡単に作成し、応答データを処理できます。

2.1 リクエストの送信

フェッチ API を使用してリクエストを送信する方法は次のとおりです。

fetch('/backend_method_url', {
    method: 'GET'
}).then(function (response) {
    return response.text();
}).then(function (data) {
    console.log(data);
});

最初のパラメータはバックグラウンド メソッドの URL アドレスであり、 2 番目のパラメータは、メソッド、リクエスト ヘッダー、リクエスト本文などの情報を含むオブジェクトを含むリクエストです。

2.2 応答の処理

応答処理に関しては、応答データは then メソッドを通じて処理できます。 1 つ目の then 方法では、応答データをテキスト形式に変換して処理を容易にすることができます。

次は、フェッチ API を使用してリクエストを送信する完全な例です:

fetch('/backend_method_url', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        user_name: 'Tom',
        password: '123456'
    })
}).then(function (response) {
    return response.json();
}).then(function (data) {
    console.log(data);
}).catch(function (error) {
    console.log(error);
});

3. jQuery フレームワークを使用してバックグラウンド メソッドを呼び出す

jQuery は一般的に使用されます。 JavaScript プログラミングを簡素化するために最適化された多くの機能を提供する JavaScript ライブラリ。 AJAX リクエストを行う場合、jQuery を使用するとリクエストとレスポンスの処理をより簡単に完了できます。

3.1 リクエストの送信

jQuery を使用してリクエストを送信する場合、次のコードを使用してリクエストを送信できます。

$.ajax({
    url: '/backend_method_url',
    type: 'GET'
}).done(function (data) {
    console.log(data);
}).fail(function (error) {
    console.log(error);
});

「url」属性は URL アドレスを指定します。バックグラウンドメソッドの'type'属性でリクエストメソッドを指定します。

3.2 データの送信

jQuery を使用してデータを送信する場合、次のコードによって実現できます。

$.ajax({
    url: '/backend_method_url',
    type: 'POST',
    data: {
        user_name: 'Tom',
        password: '123456'
    }
}).done(function (data) {
    console.log(data);
}).fail(function (error) {
    console.log(error);
});

「data」属性は、送信するデータを指定します。

上記は、JavaScript を使用してバックグラウンド メソッドを呼び出す方法です。JavaScript はより一般的な方法でバックグラウンドと対話するため、コード構文はより単純で、通常の操作を完了するために必要なコードは数行だけです。もちろん、バックグラウンド関数を作成するときに理解して使用する必要がある詳細や知識ポイントは数多くありますが、幸いなことに、インターネット上には、学習して参照するための優れたチュートリアルや事例が数多くあります。バックエンドの開発に JavaScript を使用する開発者が増えていますが、これは JavaScript が構文や機能の点で多くの利点を備えているためでもあります。

以上がJavaScriptはバックグラウンドメソッドcを呼び出しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。