Ajaxについて

今回はAjaxについて説明します。
エイジャックス、もしくはアジャックスと読みます。
これはJavaScriptを使って、HTTPリクエストを発行し、
非同期でサーバとの通信のやりとりを実現する仕組みのことを言います。
これを使えば、サーバ側のプログラムCGIなどと連携して、さまざまな処理をすることができます。
サーバと非同期通信はできるのですが、通信できるのは同ドメイン内のサーバとだけです。
他のドメインのサーバとは通信できないので注意して下さい。
まずは下記のコードを見てください。

function GetData(){
	
	var ajax=null;
	
	//XMLHttpRequestが使えるか
	if(XMLHttpRequest){
		
		ajax=new XMLHttpRequest();
		
	}else{
		
		ajax= new ActiveXObject('MSXML2.XMLHTTP.6.0');
		
		if(!ajax){
			
			ajax = ActiveXObject('MSXML2.XMLHTTP.3.0');
			
			if(!ajax){
				
				ajax = ActiveXObject('MSXML2.XMLHTTP');
				
				//ajax通信は行えないので処理終了
				if(!ajax){
					alert("ajaxは使えません");
					return;
				}
			}
		}
	}
	ajax.open('GET','/script/ajaxtest.txt',true);
	ajax.onreadystatechange = function Receive(){
		
			if(ajax.readyState==4 && ajax.status==200){
				
				alert(ajax.responseText);
				
				return;
				
				//200以外はエラー
			}else if(ajax.status!=200){
				
				alert("エラーが発生しました："+ajax.status);
				return;
			}
		}
	//サーバ側で処理する場合は、以下のヘッダーの設定が必要。
	//.setRequestHeader('Content-Type',"application/x-www-form-urlencoded; charset=utf-8");
	ajax.send(null);
}

↑のボタンを押してみてください。
メッセージが表示されましたよね？
それではコードの説明を行います。

まずajaxを使って通信を行うには、XMLHttpRequestというオブジェクトを作成し、
そのメソッドを使って通信します。
ですが、IEなどではこのオブジェクトが存在しません。別のオブジェクトを使う必要があります。
そのために、ブラウザによってajaxを使う為のオブジェクト作成方法が違うため、
それぞれのブラウザに対応したコードを書く必要があります。
まず、if文に、XMLHttpRequestとだけ書くと、
このオブジェクトが使える場合は、真になります。
その場合は、new演算子で、

new XMLHttpRequest();

と書いてやり、オブジェクトを生成してあげます。
もしこのオブジェクトがない場合は、偽になりますので次のif文に処理が移ります。
XMLHttpRequestが使えない場合は、ActiveXObjectというものを使って、
対象のオブジェクトを指定してやり、ajaxを使うことになります。

new ActiveXObject("オブジェクト名");

と書きます。もしオブジェクトがなかった場合はnullが返ります。
今回は、
MSXML2.XMLHTTP.6.0
MSXML2.XMLHTTP.3.0
MSXML2.XMLHTTP
の三つを一つ一つif文にかけて、使えれば変数へ代入しています。
バージョンが上の方がより処理が高速化されています。
まずは、ブラウザによる違うをクリアするために、このようにしてオブジェクトを作成します。

次の講座で、通信部分の解説をします。

>> 【Ajaxによる通信】に進む
>> JavaScript入門トップに戻る

おすすめ参考書