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

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

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

スポンサードリンク

XMLHttpRequestオブジェクトの作り方

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

//XMLHttpRequestオブジェクトを作成する
var httpRequest = new XMLHttpRequest();

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

GETリクエスト

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

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

//GETメソッドを指定のURLに送信する
httpRequest.open('GET','https://ty-engineer.com/', true);

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

//グローバルで宣言
var httpRequest = new XMLHttpRequest(),
url = "https://ty-engineer.com/";

httpRequest.open(method, url, true);
httpRequest.onreadystatechange = function () {
  if(httpRequest.readyState === 4 && httpRequest.status === 200) {
    console.log(httpRequest.responseText);
  }
};
httpRequest.send();

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

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

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

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

Access-Control-Allow-Originの禁止

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

スポンサードリンク

POSTリクエスト

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

httpRequest.open('POST', 'https://ty-engineer.com', true);
httpRequest.setRequestHeader('Content-Type', 'application/json');
httpRequest.send('param1=value1&param2=value2');

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

レスポンス処理

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

function processResponce() {
  if (httpRequest.readyState == 4) {
    //リクエスト処理
  } else {
    //エラー処理
  }
}

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

リクエストの中止

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

httpRequest.abort();

まとめ

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

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

スポンサードリンク