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

XMLHttpRequestオブジェクトが作成できたら、それを使って非同期通信を開始します。これには、以下のような手順を踏んでいきます。

１．open( 方式 , アドレス )
まず「open」メソッドで接続を開始します。これは、第１引数にGETかPOSTを指定し、どういう方式で接続するかを指定します。第２引数には、アクセス先のアドレスを指定します。

２．setRequestHeader( ヘッダー項目 , 値 )
続いて、必要な設定を行います。もし、ヘッダー情報を設定する必要があれば、「setRequestHeader」で設定を行います。「ヘッダーってなに？」という人は、特に使わなくてもOKです。

３．onreadystatechange = 関数リテラル
続いて、通信完了後に実行する関数をonreadystatechangeというプロパティに設定します。これは関数リテラルとして用意してやります。この関数は、「コールバック関数」と呼ばれます。

４．send( パラメータ )
すべて完了したら、「send」メソッドを呼び出して、通信を開始します。このとき、POST送信する場合にはパラメータを引数に渡すことができます。


○通信を開始する関数○
では、具体的に「非同期通信を開始する関数」の基本形を下のリストにあげておきましょう。これは、このままでは動きません。通信完了後に呼び出されるonreadystatechangeの関数リテラル（コールバック関数）は、それぞれで用意する必要があります。

このコールバック関数は、ただ処理を書けばいいというわけではありません。これは、通信が「正常にすべて完了したとき」だけでなく、それ以外の場合にも呼び出されるからです。それをチェックするため、以下のような処理が必要です。

if (this.readyState == 4 && this.status == 200){……}

「readyState」と「status」は、現在の状況と、通信完了時のステータスを示すプロパティです。これらが「readyState == 4」「status = 200」であれば、正常にすべてのデータが受け取れたことになります。ですから、これらをチェックして完了時の処理を実行すればよいのです。

(by. SYODA-Tuyano.)

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

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

function ajaxStart(url){
	var req =  createRequest();
	if (req == null){
		alert("実行できません！");
		return;
	}
	req.open("GET", url);
	req.setRequestHeader("User-Agent","XMLHttpRequest");
	req.onreadystatechange = function(){
		if (this.readyState == 4 && this.status == 200){

			……必要な処理をする……

		}
	}
	req.send();
}