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

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メソッドを GETPOSTPUT 又は 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
スポンサーリンク