WEB系の技術を詳しく解説

【Ajax入門】XMLHttpRequestの使い方をまとめてみた

非同期通信を司る中核の技術であるAjaxのAを司る技術の中に、XMLHttpRequestというオブジェクトが存在します。このオブジェクトを操作することで非同期に通信を行うことが可能です。

JavaScriptに触れていたら必ず出会うオブジェクトの1つで、使用頻度も高いと思うのでこの機会にまとめておこうと思います。

スポンサードリンク

XMLHttpRequestオブジェクトの作り方

XMLHttpRequestオブジェクトを利用するにはまずXMLHttpRequestオブジェクトを作成する必要があります。

これによりXMLHttpRequestクラスで定義されている様々なメソッドが使用可能になります。

GETリクエスト

最も基本的なメソッドとしてopenメソッドが提供されています。

使用方法はシンプルで、第一引数にHTTPメソッド(リクエストの種類)、第二引数にリクエストを送信する先のURL(発行URL)、第三引数に非同期リクエストを行うかどうかの真偽値を指定します。

しかしこれだけでは実際にGETリクエストを送信することができません。複数のメソッドを組み合わせたコードが必要です。

ここら辺理解するのが難解なのですが、一応1つずつ説明していきます。

まず、XMLHttpRequestオブジェクトにはreadyStateという状態を常に保持しています。すなわち以下のいずれかの値を持っているということです。

定数 状態
0 UNSENT XHRオブジェクトの作成直後の状態
1 OPENED open()メソッド呼び出し直後の状態
2 HEADERS_RECEIVED レスポンスヘッダの受信後の状態
3 LOADING レスポンスボディを受信中である状態
4 DONE XHR通信の完了後である状態

また、onreadystatechangeメソッドは、この状態が変化するたびに呼び出されるメソッドです。よって上のコードは何をしているかというと、XHR通信の完了を把握したらサーバーから受け取ったテキストをconsoleで表示するという簡単な動作を示しているのです。

最終行で、sendメソッドを呼び出すと実際にリクエストを送信します。このメソッドには引数を入れることが出来て、リクエストボディーの文字列を指定することができます。

Access-Control-Allow-Originの禁止

HTMLファイル内にこのコードをコピペしてもGETリクエストを送信することができますが、実際にはCORSヘッダによるAccess-Control-Allow-Originによってクロスオリジンからの読み出しが禁止されてしまいます。(こちらの話はセキュリティの話になり本記事のレールから外れてしまうため割愛させていただきます。)

スポンサードリンク

POSTリクエスト

POSTリクエストも、GETリクエスト同様に記述します。

setRequestHeaderでリクエストヘッダを指定することができます。上の例ではContent-Typeをjsonに指定していますがこれ以外にも指定することが可能です。

レスポンス処理

サーバからのレスポンス処理はstateを指定してコールバック関数により処理を行います。

readyStateには上の表にまとめた数値を利用します。実際のレスポンスデータは以下のオブジェクトプロパティによって取得可能です。

プロパティ データ
responseText レスポンスボディ
responseXML レスポンスボディをXMLパースしたもの
status ステータスコード
statusText ステータスの文字列

リクエストの中止

発行済みのリクエストを中止するにはabortメソッドを使用します。

まとめ

XMLHttpRequestは使いこなすと便利な昨日ですが、クロスオリジンのアクセスについてはデフォルトで制限が掛けられており自分のサイト、サーバでしか試せないのが難点です。ローカル環境で試せないので自分でサイトを持っている人は試しておく価値はありそうです。非同期通信をマスターする一歩として是非使ってみてください。

Web系では、HTTP周りの知識を知っておかないと理解が追いつかない部分が多いです。効率よくプログラミングを学習したいのであれば「tech boostオンライン」をオススメします。オンラインでどこにいても聞き放題です。無料カウンセリングも行なっているので一度話を聞きに行ってみるというのもアリだと思いますよ!

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です