IE7時代のAjax入門 -2.XMLHttpRequest詳解-

■ XMLHttpRequestのプロパティ

前回は簡単なAjaxのコードを書いてみたが、今回はXMLHttpRequestの機能を見ていくことにしよう。XMLHttpRequestのプロパティやメソッドはブラウザによって多少の差異が見られるが、基本となるものはどのブラウザでも実装されている。それらを以下にまとめた。

<プロパティ>
onreadystatechangereadyStateが変化したときに呼ばれるコールバック関数を指定する。
readyStateリクエスト状態。
0=未初期化
1=オープン済み
2=リクエスト送信済み
3=受信中
4=受信済み
responseTextテキスト形式のレスポンス。
responseXMLDOM形式のレスポンス。ただし、レスポンスがwell-formedなXMLの場合。
statusHTTPステータスコード
statusTextHTTPステータス文字列。

このほかにIEではresponseBody等のプロパティも用意されている。

■ XMLHttpRequestのメソッド

メソッドには以下のものがある。

<メソッド>
メソッド名引数処理
abortなし現在のHTTPリクエストを中止する。
getAllResponseHeadersなしすべてのHTTPヘッダ情報を取得する。
getResponseHeaderヘッダ名指定したHTTPヘッダの値を取得する。
open1.HTTPメソッド
2.URL
3.非同期フラグ(省略可)
4.ユーザ(省略可)
5.パスワード(省略可)
HTTPメソッド、URL等を指定してXMLHttpRequestを初期化する。HTTPメソッドにはGET、POST、及びPUT等が指定できる。非同期フラグは省略するとtrueになる。
sendデータサーバにHTTPリクエストを送信する。
setRequestHeader1.ヘッダ名
2.値
指定したHTTPヘッダ情報を設定する。

FirefoxにあるoverrideMimeTypeはIE7のXMLHttpRequestでも実装されていないようだ。

<XMLHttpRequest Object>
http://msdn2.microsoft.com/en-us/library/ms535874(VS.85).aspx

<XMLHttpRequest>
http://developer.mozilla.org/ja/docs/XMLHttpRequest

<The XMLHttpRequest Object>
http://www.w3.org/TR/XMLHttpRequest/

■ openメソッド

new XMLHttpRequest()でインスタンスを生成した後にやることは、openメソッドによる初期化である。openメソッドではGETやPOST等HTTPメソッド(大文字で指定)、及びURLのほかに処理を非同期で行うかどうかのフラグを指定する。

このフラグがtrueになっていると非同期動作になり、openメソッドは直ちに戻ってくる。そしてreadyStateが変化したときにonreadystatechangeで指定した関数がコールバックされる。このフラグをfalseにするとopenメソッドはブロックしてしまう(処理が終わるまで戻らない)ので、Ajaxという枠組みで使用するあればtrueにするのが通常の使い方であろう。尚、このフラグは省略可能であり、省略するとtrueとなる。

xmlHttp.open("GET",url);

URLは絶対及び相対指定が可能であるが、気をつけなければならないのは指定するURLが取得したページと同一のドメインでなければならないということである。これはセキュリティ上の制限であり、もし違うドメインを指定するとIE7の場合は、「アクセスが拒否されました。」というエラーとなり、Firefoxの場合は"Permission denied to call method XMLHttpRequest.open"というエラーとなる。

該当箇所をtry~catchで囲んでいないと、IE7の場合はステータスバーの左側にエラーがあったことを示すマークが表示されるが、Firefoxの場合はエラーが発生しても見た目には分からない。エラーコンソールを開くかFirebugで確認することはできる。また、IE7でもステータスバーを表示していない場合は、当然エラーが発生しても分からない。

■ コールバック関数の指定 -onreadystatechange-

非同期で処理を行う場合、onreadystatechangeプロパティにコールバック関数を指定する。XMLHttpRequest側ではreadyStateの状態が変化したときにこの関数をコールバックする。関数を定義して指定するのはもちろんのこと、以下のように無名関数を使用することもできる。しかし、いずれの場合でもコールバック関数には引数を渡すことはできない。

xmlHttp.onreadystatechange = function() {
	if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
		// 何らかの処理
	}
}

■ sendメソッド

openメソッドを呼んだだけではリクエストの準備をしたに過ぎず、sendメソッドを呼んだときに初めてサーバへリクエストが送信される。sendメソッドでは1つだけ引数が指定できるがこれはPOSTする場合にサーバへ送るデータを指定する。GETの場合はサーバへ送るデータはないのでnullを指定することになる。

xmlHttp.send(null);

■ コールバック関数の処理

onreadystatechangeプロパティに指定したコールバック関数はreadyStateの状態が変化したときにコールバックされる。通常はHTTPのレスポンスを受け取った後に何らかの処理をしたい場合がほとんどだと思われる。この場合はまずreadyStateが4=受信完了であるかどうかの判定を行う。

xmlHttp.onreadystatechange = function() {
	// 受信完了か否か
	if(xmlHttp.readyState == 4) {
		if(xmlHttp.status == 200) {
			// 正常にレスポンスを受け取ったの処理
		} else {
			// それ以外の処理
		}
	}
}

このreadyStateではレスポンスの受信が完了したかどうかは分かるが、レスポンス自体が何かは分からない。statusを見るとHTTPステータスが分かるようになっている。以下は主なHTTPステータスである。

<主なHTTPステータスコード>
200OK
403Forbidden
404Not found
500Internal Server Error

Webアプリケーションを作成したことがある方ならばお分かりになると思うがstatusが200ならばOKである。そこで初めて必要な処理を行うことになる。

以上がAjaxでコードを書く場合の最も基本的な処理である。

(2008/02/18)

新着情報
【iOS Objective-C, Swift Tips】画像の向きを指定して保存する(Swift)
【iOS Objective-C, Swift Tips】UIImagePickerControllerの表示を日本語にする(Swift)
【iOS Objective-C, Swift Tips】ウィンドウの階層構造を3D表示する(Swift)

Copyright(C) 2004-2012 モバイル開発系(K) All rights reserved.
[Home]