HOWTO · JavaScript

JavaScript で XMLHttpRequest を使用して POST リクエストを送信する

この記事では、さまざまな例で JavaScript コードを使用して、Ajax プログラミングで XMLHttpRequest ポストリクエストを送信する方法を学習します。

著者 Muhammad Muzammil Hussain公開日 2023-06-20更新日 2023-10-12

このページの内容

この記事では、JavaScript コードを使用して AJAX プログラミングで XMLHttpRequest ポストリクエストを送信する方法について、さまざまな例を挙げて説明します。

XMLHttpRequest

Web サーバーからデータを取得するには、XMLHttpRequest (XHR) を使用します。これは、Web ブラウザーと Web サーバーの間でデータを転送するオブジェクト形式の API です。

XMLHttpRequest は主に AJAX プログラミングで使用されます。

AJAX プログラミング

AJAX は Asynchronous JavaScript and XML の略です。 AJAX はプログラミング言語ではありませんが、クライアント側で非同期 Web アプリケーションを開発するために複数の Web テクノロジを使用する一連の Web 開発手法です。

AJAX を使用して、バックグラウンドで Web サーバーにデータを送信できます。

ページがロードされると、Web サーバーからデータを読み取り、リロードせずに AJAX を使用できます。ウェブページも更新できます。

XMLHttpRequest オブジェクトを作成するための基本的な構文:

my_variable = new XMLHttpRequest();

リクエストのロード中にコールバック関数を定義します。

my_variable.onload = function() {
  // Here we can use the Data
}

これで、リクエストを送信できます。

xhttp.open("REQUEST_METHOD, "FILE_PATH")

xhttp.send();

JavaScript で XMLHttpRequest を使用して `POST` リクエストを送信する

POST リクエストは、クライアント側からサーバーにデータを送信するのに役立ちます。データベース内のファイルまたはデータを更新する必要がある場合は、POST メソッドを使用します。

POST メソッドはサイズに制限がないため、大量のデータをサーバーに送信できます。通常、POST メソッドを使用してユーザー入力を受け取り、サインアップフォームのように DB に保存します。

POST メソッドは GET メソッドよりも安全です。

基本的な構文:

my_variable = new XMLHttpRequest();
my_variable.onload = function() {
  // Here, we can use the data
} xhttp.open('POST', 'MY_FILE_PATH');

xhttp.send();

POST メソッドを使用して、POST リクエストの構文と動作をよりよく理解するための例として、完全な JavaScript ソースを作成します。リクエストを実行する前に、オブジェクトにヘッダーを設定する必要があることに注意してください。

コード例:

<!DOCTYPE html>
<html>
<body>

<h2>XMLHttpRequest using POST method</h2>

<button type="button" onclick="loadRequest()">Request post method</button> // calling of a request

<p id="test"></p>

<script>

function loadRequest() {
    const requestObject = new XMLHttpRequest(); // object of request
    requestObject.onload = function() {
        document.getElementById("test").innerHTML = this.responseText; // displaying response text in paragraph tag
    }

    requestObject.open("POST", "MY_FILE_PATH");
    requestObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // setting of headers  in request
    requestObject.send("DATA_TO_SEND"); // data to send in request

}

</script>
</body>
</html>

コード例の説明:

上記の HTML ソースコードでは、段落要素を作成し、そのテキスト値を割り当てる ID を定義しました。
ボタン Request post method を作成しました。このボタンの onclick イベントは loadRequest() という関数です。
loadRequest() 関数で、XMLHttpRequest() のオブジェクトを作成しました。
次に、コールバック関数を使用してデータを取得し、document.getElementById("test") を使用して要求応答を段落に割り当てます。
ここで、リクエスト接続を開き、リクエストメソッド POST とネットワークリクエストファイルパスを渡しました。
コンテンツタイプを定義するリクエストヘッダーを設定しました。
最後に、投稿したいデータを使用してリクエストを送信しました。
この HTML ソースを正しいネットワークリクエストファイルパスで保存し、拡張子 .html を付けてファイルを保存できます。
任意のブラウザで開いて結果を確認します。

著者について

Muhammad Muzammil Hussain

著者プロフィールを見る