#navi(../)
*Asynchronous JavaScript + XML [#zd356a63]
Ajaxは、XMLHttpRequestという命令を利用して、この命令が含まれる関数が実行されたときにデーターを受信するというのが根幹である。これまでの、JavaScriptプログラミングと異なる最大のポイントは、''XMLHttpRequest命令でサーバー上のデーターを取得できる''という点である。非同期通信という言葉がよく使われるが、DHTMLの延長として考えた方がわかりやすい。

#hr
#contents

**基本 [#l2230041]
まず、XMLHttpRequestオブジェクト生成のコードを書く。IE7未満では、ActiveXObjectでこれを実装する。
#code(javascript){{
//XMLHttpRequestオブジェクト生成
var createXMLHttpRequest = function(){
    if(window.XMLHttpRequest){
        //XMLHttpRequestオブジェクト実装ブラウザ用
        return new XMLHttpRequest();
    } else if(window.ActiveXObject){
        // IE7未満用
       try {
            //MSXML2以降用
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                //旧MSXML用
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                return null;
            }
         }
    } else {
         return null;
    }
};
}}
次に、データーを読み込む処理だ
#code(javascript){{
function requestFile( data , method , fileName , async ){
    //XMLHttpRequestオブジェクト生成
    var request = createXMLHttpRequest();
    //open メソッド
    request.open( method , fileName , async );
    //受信時に起動するイベント
    request.onreadystatechange = function(){
      //readyState値は4で受信完了
      if (request.readyState == 4 && request.status == 200){
        //コールバック
        callback(request.responseText);
      }
    };
    //send メソッド
    request.send( data );
}
}}

これにより、request変数に、ajaxに必要な関数が入る。で、実際データーをよみこむと、まずreadyStateが変化する。readyStateは、以下のようになっている
-0 : 開始前の初期状態
-1 : 読み込み中
-2 : 読み込み完了
-3 : 制御可能
-4 : 完了

たとえば、書き換えたい部分を読み込み中の時は、読み込みアイコンにして、完了後内容をgetElementByIdなどで書き換えるといったテクニックも可能である。

ほかにも変数があるが、ここでは省略して、読み込みが完了したら、callback();という関数が実行される。このresponseTextとは、読み込んだデーターを意味する。XMLの場合は、responseXMLとなる。(最近ではJSONなどでデータをやりとりする場合が多いのでresponseTextが使われる場合が多い)

このcallback()関数に、読み込んだデーターをパースしたり表示するなどの処理を入れる。この処理では、だいたいgetElementByIdなどでページの一部分を書き換えて、動的にページが変化しているようにみせることから、もっぱら非同期通信という言葉が使われるというしくみだ。

**データーの読み込みに関する注意 [#cc739d07]
よく、ajaxプログラミングにおいて、はまりがちなのが、&color(Red){サブルーチンの外にajaxで読み込んだデーターの結果を出すことができない};というところである。

たとえば、Perlではデーターを読み込んだ後で、変数に格納して別のサブルーチンに渡して処理と言うことがよく使われる。
#code(perl){{
sub open {
	open(IN,"data.txt") || &error("Open Error");
	$data = <IN>;
	close(IN);
	return $data;
}

sub view {
	$text= &open;
	print "Content-Type:Text/plain\n\n";
	print $text;
}
}}
この場合、view()関数からopen()関数を呼び出してデーターを取得するという処理を行っているが、ajaxプログラミングにおいて、こういう方法でデーターを取り出すことはできない。

この例で言うと、3行目の$data = <IN>;という部分で、データーのパース、表示などの処理を行わなければならない。従って、
#code(javascript){{
function load(){
    var request = createXMLHttpRequest();
    //open メソッド
    request.open( "GET", "data.txt" , null);
    request.onreadystatechange = function(){
      //readyState値は4で受信完了
      if (request.readyState == 4 && request.status == 200){
        return request.responseText;
      }
    };
    //send メソッド
    request.send( data );
}

function view(){
    var data = load();
    document.write(data);
}
}}
というような処理は&color(Red){できない};ので注意。

*各フレームワークを使用する場合 [#wf751fb2]
**prototype.jsの場合 [#b737ff77]
タイムアウト時の処理を別途Ajax.Responders.registerなどで記載しなければならない。
#code(javascript){{
function requestFile( data , method , fileName , async ){
	var myAjax = new Ajax.Request(
		fileName,
		{
			method: method,
			parameters: data,
			onSuccess: function(request) {
				// 通信成功時の処理
			},
			onComplete: function(request) {
				callback(request.responseText);
			},
			onFailure: function(request) {
				// 読み込みに失敗
			},
			onException: function (request) {
				// 読み込み中にエラー
			}

		}
	);
}
}}

**[[dojo]]の場合 [#b3e8ef5d]
別途handleAsで、Jsonとして処理したり、XMLとして処理したりするようにできる。
#code(javascript){{
function requestFile( data , method , fileName , async ){
	dojo.xhr({
		method: method,
		url : fileName,
		content: data,
		timeout : 2000,//タイムアウト(2秒)
		load :  function(data){
			callback(data.responseText);
		},
		error : function(error){ ... }// エラー時の処理
	});
}
}}

**jQueryの場合 [#y5dfdd9f]
ほぼ、[[dojo]]と一緒。
#code(javascript){{
function requestFile( data , method , fileName , async ){
	jQuery.ajax({
		url : fileName,
		type : method,
		timeout : 2000,//タイムアウト(2秒)
		success : function(data){
			alert(data);
		},
		error : function(data){
			// エラー時の処理
		}
	});
}
}}

**uupaa-jsの場合 [#a8599567]
タイムアウト時の処理は別途uu.request.timeoutで記載。たぶん間違ってるかも。
#code(javascript){{
function requestFile( data , method , fileName , async ){
 uu.ajax(fileName, callback, data)
}
}}