#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();
+	$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)
 }
 }}