JavaScript で XMLHttpRequest を使用して POST リクエストを送信する
この記事では、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を付けてファイルを保存できます。 - 任意のブラウザで開いて結果を確認します。