Ajaxによる通信

今回はAjaxの通信ついて説明します。
前回のコードを見てください。

01function GetData(){
02     
03    var ajax=null;
04     
05    //XMLHttpRequestが使えるか
06    if(XMLHttpRequest){
07         
08        ajax=new XMLHttpRequest();
09         
10    }else{
11         
12        ajax= new ActiveXObject('MSXML2.XMLHTTP.6.0');
13         
14        if(!ajax){
15             
16            ajax = ActiveXObject('MSXML2.XMLHTTP.3.0');
17             
18            if(!ajax){
19                 
20                ajax = ActiveXObject('MSXML2.XMLHTTP');
21                 
22                //ajax通信は行えないので処理終了
23                if(!ajax){
24                    alert("ajaxは使えません");
25                    return;
26                }
27            }
28        }
29    }
30    ajax.open('GET','/script/ajaxtest.txt',true);
31    ajax.onreadystatechange = function Receive(){
32         
33            if(ajax.readyState==4 && ajax.status==200){
34                 
35                alert(ajax.responseText);
36                 
37                return;
38                 
39                //200以外はエラー
40            }else if(ajax.status!=200){
41                 
42                alert("エラーが発生しました："+ajax.status);
43                return;
44            }
45        }
46    //サーバ側で処理する場合は、以下のヘッダーの設定が必要。
47    //.setRequestHeader('Content-Type',"application/x-www-form-urlencoded; charset=utf-8");
48    ajax.send(null);
49}

まず、openメソッドでどのurlとどういった通信を行うのかを設定します。
このメソッドの第一引数には、GETかPOSTを指定します。
GETを使った通信ではサーバとやり取りできるデータ量に制限があり、
URLの後ろにパラメータを付加する形でデータを送信する方法です。
POSTについては、やり取りするデータ量に宣言はなく、sendメソッドを使ってデータを送信します。
今回は、ただ単に、テキストファイルを読み込んで表示するだけですので、
GETメソッドを使います。
第二引数は、通信相手のURLを指定します。
ここにはcgiなどが動作しているcgiのURLを指定するのが普通です。
GETメソッドの場合は、ここでURLの後ろにパラメータを付加してデータを送信します。
ですが、今回はファイルを読みに行くだけですので、こちらから送るデータは特にありません。
なので、ファイル名だけ指定してます。
ajaxtest.txtなので、このwebページがある階層と同じ階層にあります。つまり相対パスも可能ということです。
第三引数は、非同期通信を行うか行わないかを真偽値で指定します。
同期通信とは、相手の応答が帰ってくるまで待ってから処理する通信方法ですが、
非同期通信は、相手の応答が帰ってこなくても別の処理に移ることが出来ます。
通信が帰ってきたときに好きな処理をさせることが出来ます。
今回はtrueを指定して非同期通信させています。

次に、onreadystatechangeメンバに関数を代入しています。
このメンバに関数を設定すると、サーバから何か応答があった場合に都度その関数を実行させることができます。
今回は、receive関数を代入しています。
つまりサーバから何か応答があった場合は、この関数が実行されます。
というのは、サーバも一度の通信でデータを全てやりとりできるわけではありません。
何回か通信を行うことで全てデータを受信することもあるわけです。
この関数の説明は後回しにします。

receive関数の下に、コメントアウトしてますが、setRequestHeader関数というのがあります。
これは、サーバにデータを送信するときに、送信するデータがどういう形式にものなのかを設定するためのものです。
第一引数にデータタイプ、第二引数に値を指定します。
通常はユーザにフォームデータを入力してもらって、それを送信すると思いますので、
第一引数は【Content-Type】、
第二引数は【application/x-www-form-urlencoded; charset=utf-8】
が一般的かと思います。
もちろん文字コードが違えば、charsetの部分を変えてください。
今回は、こちらからはデータは送信しないので、この関数は実行してません。

次にsend関数です。
送信するデータがある場合はこの関数にデータを文字列として渡して送信します。
つまりPOSTメソッドを使って送信するときに使われます。
今回は送信するものはないのでnullを指定しています。
送信するものがなくても、ただデータを取得したい場合は、このようにnullでも
このsend関数を実行する必要があります。

実際にGETメソッドやPOSTメソッドでパラメータを付加して送信する方法は
次の講座で説明します。

send関数を実行すると、サーバとの通信が行われて、何か反応があるたびに、
onreadystatechangeメンバに設定した関数が実行されます。
そのreceive関数を見てみましょう。

01if(ajax.readyState==4 && ajax.status==200){
02                 
03    alert(ajax.responseText);
04     
05    return;
06     
07    //200以外はエラー
08}else if(ajax.status!=200){
09     
10    alert("エラーが発生しました："+ajax.status);
11    return;
12}

まず、if文ですが、
Ajaxのオブジェクトのメンバで、通信状況の内容を見れる変数があります。
readyStateとstatusメンバです。大文字小文字に気をつけてください。
ここで、readyStateメンバが4で、statusメンバが200なら正常にデータを受信したことを表します。
受信できた場合は、alert関数で、responseTextメンバにアクセスして、
データを表示しています。
受け取ったデータはこのresponseTextメンバに入っています。
サーバと通信したらこのメンバにサーバからの受信データが入るので、
このデータを整形して画面に表示させたり色々なことをすることができます。

else if文で、statusが200以外の場合はエラーを出すようにしています。
403(forbidden)や404(not found)などのエラーがありますが、
200以外は全てエラーなので、そのエラーコードとともにメッセージを出すようにしています。

以上が、ajaxを使った簡単な通信です。
これで好きなファイルにアクセスして表示できるようにはなったと思います。
次回は、GETメソッドで、URLにパラメータを付加してopenする方法や、
sendメソッドにパラメータを指定して送信する方法をご紹介します。
>> 【パラメータを使ったajax通信】に進む
>> JavaScript入門トップに戻る

おすすめ参考書