Ajaxによる非同期サーバー通信 (3/4)
作成:2010-04-03 11:35
更新:2010-05-11 19:12
更新: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の関数リテラル(コールバック関数)は、それぞれで用意する必要があります。
このコールバック関数は、ただ処理を書けばいいというわけではありません。これは、通信が「正常にすべて完了したとき」だけでなく、それ以外の場合にも呼び出されるからです。それをチェックするため、以下のような処理が必要です。
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」であれば、正常にすべてのデータが受け取れたことになります。ですから、これらをチェックして完了時の処理を実行すればよいのです。
(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(); }
※関連コンテンツ
「初心者のためのJavaScriptプログラミング入門」に戻る