libro
www.tuyano.com
初心者のためのJavaScriptプログラミング入門

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

作成:2010-04-03 11:35
更新:2010-05-11 19:12

■XMLHttpRequestオブジェクトの利用

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

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

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

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

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


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

このコールバック関数は、ただ処理を書けばいいというわけではありません。これは、通信が「正常にすべて完了したとき」だけでなく、それ以外の場合にも呼び出されるからです。それをチェックするため、以下のような処理が必要です。
if (this.readyState == 4 && this.status == 200){……}
「readyState」「status」は、現在の状況と、通信完了時のステータスを示すプロパティです。これらが「readyState == 4」「status = 200」であれば、正常にすべてのデータが受け取れたことになります。ですから、これらをチェックして完了時の処理を実行すればよいのです。

※プログラムリストが表示されない場合

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();
}
※関連コンテンツ

「初心者のためのJavaScriptプログラミング入門」に戻る