Ajax

Ajax ( Asynchronous JavaScript and XML ) とは、JavaScirpt を使って XML データを非同期的に取得する技法です。

Ajaxの使い方

JavaScript で非同期通信を行うには、まず通信オブジェクトを取得します。通信オブジェクトを取得する方法は、ブラウザの種類やバージョンによって異なります。

ブラウザ	通信オブジェクトの作成方法
Internet Explorer 6 以上	new ActiveXObject("Msxml2.XMLHTTP")
Internet Explorer 5 以上	new ActiveXObject("Microsoft.XMLHTTP")
Safari, Firefox など	new XMLHttpRequest()

JavaScriptで通信オブジェクトを取得する書き方を次のサンプルコードで示します。

httpObj = null; // 通信オブジェクト

try {
  httpObj = new XMLHttpRequest(); // Safari, FireFoxなど
} catch(e) {
  try {
    httpObj = new ActiveXObject("Msxml2.XMLHTTP"); // IE6以上
  } catch (e) {
    try {
      httpObj = new ActiveXObject("Microsoft.XMLHTTP"); // IE5以上
    } catch(e) {
      httpObj = null;
    }
  }
}

Ajax では状態に変化が生じたときにメソッドが呼び出されることで非同期通信を実現しています。状態変化が起こったときに呼び出されるメソッドを指定する例を示します。

httpObj.onreadystatechange = displayData

データを送信するサンプルコードを次に示します。

httpObj.open("GET", "data.xml", true);
httpObj.send(null);

データを受信した際に呼び出されるメソッドを定義します。

function displayData() {
if (httpObj.readyState == 4) && (httpObj.status == 200)) {

この例では通信オブジェクトのステータスを調べています。

XMLデータを取得する例を次に示します。

xmlData = httpObj.responseXML;

emplyeeList = xmlData.getElementByTagName("employee");
noList = xmlData.getElementByTagName("no");
nameList = xmlData.getElementByTagName("name");

XMLHttpRequestオブジェクト

コンストラクタはXMLHttpRequestを初期化する。他のメソッドを呼び出す前にコンストラクタを呼び出す必要がある。

XMLHttpRequest()

XMLHttpRequestオブジェクトのプロパティ一覧
プロパティ	説明
readyState	リクエストの状態
responseText	テキスト形式のレスポンス
responseXML	DOM Documentオブジェクト形式のレスポンス
status	HTTP応答ステータス
statusText	HTTP応答ステータス(テキスト)

XMLHttpRequestオブジェクトのメソッド一覧
メソッド	説明
open	リクエストを初期化する。
send	リクエストを送信する。

readyState

readyState プロパティの戻り値
コード	ステータス
0	未初期化（open()が呼び出されていない）
1	ロード中（open()は呼び出されたが、send()は呼び出されていない）
2	ロード済み（send()は呼び出されたが、ステータスやヘッダはまだ利用できない）
3	一部データを取得済み（ヘッダは読み込み可能だが、本体はまだ取得していない）
4	全データ取得済み

status

status プロパティの主な戻り値
コード	ステータス
200	OK (成功)
404	Not Found
500	Internal Server Error

open

open(method, url, async)

method: 使用するHTTPメソッドを GET 、 POST 、 PUT 又は DELETE のいずれかで指定する。
url: リクエスト送信先のURLを指定する。
async: 操作を非同期で行うかどうかをtrue又はfalseで指定する。

send

send(data)

data: 送信するデータを指定する。

同一生成元ポリシー

Ajaxは自身が読み込まれたドメインにのみHTTPリクエストを発行できる。Ajaxで異なるドメインにHTTPリクエストを送信すると、JavaScriptコンソールに次のようなエラーメッセージが出力される。

XMLHttpRequest cannot load http://example.com/foo.js. No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://itref.fc2web.com' is therefore not allow access.

Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS)とは、Webサーバがサイトを跨ぐアクセスを制御する方法を規定したW3Cの勧告である。HTTP応答ヘッダにAccess-Control-Allow-Originヘッダを含めることにより、アクセス可能など名を制御することができる。

すべてのドメインからクロスサイトでアクセスできるようにするには、HTTP応答ヘッダに次のヘッダを含める。

Access-Control-Allow-Orign: *

http://itref.fc2web.comからクロスドメインでアクセスできるようにするには、HTTP応答ヘッダに次のヘッダを含める。

Access-Control-Allow-Orign: http://iref.fc2web.com