Ajaxによる非同期サーバー通信 (2/4)

では、Ajaxはどのようにして利用するのでしょうか。その概要を考えてみましょう。Ajaxによる通信は、以下のような流れで行います。

１．XMLHttpRequestオブジェクトの作成
２．オブジェクトに必要な設定をする（特に、完了後の処理の用意）
３．通信を開始する
４．通信完了後、あらかじめ用意しておいた関数を呼び出し処理をする

これらについて順に理解をしていくことになります。では、まず「XMLHttpRequestオブジェクトの作成」から考えましょう。

○XMLHttpRequestオブジェクトの作成○
Ajax通信は、「XMLHttpRequest」というオブジェクトによって行われます。まず最初に、このオブジェクトを用意する必要があります。が！　ここで重要となるのは、「ブラウザの種類やバージョンによって、オブジェクトが違う」という点です。このオブジェクトは、IE系とそれ以外で以下のような形で用意されています。

・IE以外――「XMLHttpRequest」というオブジェクトが用意されています。特に困ることはありません。
・IE 5.5まで――ActiveXオブジェクトとして用意されています。Msxml2.XMLHTTPという名前のオブジェクトです。
・IE 6――やはりActiveXオブジェクトとして用意されていますが、以前とは名前が違っています。Microsoft.XMLHTTPという名前になっています。
・IE 7以降――ようやくXMLHttpRequestを使うようになりました。

従って、IEかどうか、更にはIEのバージョンがいくつかによって使うオブジェクトが違ってきてしまう、という点をよく考える必要があります。まぁ、もうちょっとすれば、「IE 7以前はばっさりと無視してOK」という時代になるでしょうが、まだ今はちょびっとだけ考慮する必要があるでしょう。

○オブジェクト作成関数○
では、XMLHttpRequestオブジェクトを生成する関数を考えてみましょう。下のリスト部分に掲載をしておきます。これを呼び出すと、それぞれのブラウザで利用可能なオブジェクトを作成し返します。

ここでは、httplistに、さまざまなオブジェクトを作成して返す関数を配列としてまとめておき、それを順に呼び出して、ちゃんとオブジェクトが作れたらそれを返すようにしています。用意されている関数では、以下のようにしてオブジェクトを作っています。

new XMLHttpRequest();
new ActiveXObjct("Msxml2.XMLHTTP");
new ActiveXObject("Microsoft.XMLHTTP");

とりあえず、Ajaxに対応しているブラウザなら、このどれかでオブジェクトが作れるはずです。というわけで、forを使って順番にオブジェクトを生成しているわけです。ただし！　もしうまく作れなかった場合には、エラーが発生してしまうでしょう。この対処を考えておかないといけません。

ここでは、そのために「try」という構文を使っています。これは、エラーが発生しそうな処理を行う際に用いるものです（下のリスト部分を参照）。

tryの後にある{}内で処理を実行しているとき、もしエラーが発生すると、自動的にその後のcatchにジャンプします。その際、エラーの情報をまとめたオブジェクトが引数に渡されます。ここでエラー時の対処をした後、構文を抜け出してそのまま次へと進めばいいわけです。

重要なのは、「エラーが起こっても、スクリプトは中断されない」という点です。catch部分で必要な処理をし、そのままスクリプトを続けることができるのです。ここでは、catch部分で「continue」というのを実行していますね。これは「次の繰り返しへ進む」ための予約語です。これにより、エラーが起こったら次の繰り返しへ進む、というように処理をしていたのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※XMLHttpRequestオブジェクト作成の関数

function createRequest(){
	var httplist = [
		function(){ return new XMLHttpRequest(); },
		function(){ return new ActiveXObjct("Msxml2.XMLHTTP"); },
		function(){ return new ActiveXObject("Microsoft.XMLHTTP"); }
	];
	for(var i = 0;i < httplist.length;i++){
		try {
			var http = httplist[i]();
			if (http != null) return http;
		} catch(e){
			continue;
		}
	}
	return null;
}


※try構文の基本形

try {
    ……エラーが起こりそうな処理……
} catch( 引数 ){
    ……エラー時の処理……
}