技術情報
Ajax
Ajaxとその使い方
Ajaxは「Asynchronous JavaScript + XML」の略で、JavaScriptを使って、Webサーバと非同期通信を行う技術です。
「JavaScript + HTML + スタイルシート + DOM(Document Object Model)」を使ってWebページを表現する手法をDHTML(Dynamic HTML)と呼び、動的にWebページを操作することが従来から可能でしたが、この技術にXMLHttpRequestという非同期通信の技術を組み合わせてAjaxという技術が構成されています。
これにより、画面を遷移させることなく、バックグラウンドで送受信が行え、バックグラウンドでの処理結果に応じて動的に画面表示を切り替えることが可能となります。
prototype.jsというAjaxのフレームワークなどが提供されており、利用しやすくなっています。

Ajaxは大きく分けて以下のようなステップで操作します。

[1] 通信準備
XMLHttpRequestオブジェクトを生成し、openメソッドで通信開始の準備をします。

[2] リクエスト送信
sendメソッドを使い、サーバへリクエスト(データ)を送信します。

[3] データの受信
responseTextプロパティなどを使い、サーバからのデータを受信します。

[4] 終了処理とタイムアウト
abortメソッドを使い通信を終了します。
サーバとの通信でブラウザがフリーズしないようにタイムアウトの設定なども行います。
Ajax通信で使用するオブジェクトです。

[プロパティ]
通信状態を返します。
通信状態は以下のいずれかの数値になります。
説明
0 openメソッドが実行されていないことを示します。
1 openメソッドは実行されていますが、sendメソッドが実行されていないことを示します。
2 sendメソッドは実行されていますが、サーバからのデータはまだ受信していないことを示します。
3 サーバからのデータを受信中であることを示します。
4 サーバからのデータの受信が完了したことを示します。

オブジェクトの状態を表す値を返します。。
オブジェクトの状態は以下のような値を取ります。
readyStateプロパティの値が 4 で、statusプロパティの値が 200 の時、すべてのデータを正常に受信したことになります。
説明
200 サーバからの受信が利用できることを示します。
404 指定されたURLは存在しないことを示します。


[メソッド]
XMLHttpRequestオブジェクトを生成します。
オブジェクトは以下のような方法で生成されます。

通常はこのコンストラクタを使用します。

[引数]
なし

[戻値]
XMLHttpRequestオブジェクト

IEのバージョンによってはこのコンストラクタを使用します。

[引数]
"Msxml2.XMLHTTP"

[戻値]
XMLHttpRequestオブジェクト

IEのバージョンによってはこのコンストラクタを使用します。

[引数]
"Msxml2.XMLHTTP"

[戻値]
XMLHttpRequestオブジェクト


一般には new XMLHttpRequest() を使用しますが、IEのバージョンによっては残りの2つのコンストラクタを使わなければなりません。
全てのブラウザに対応するようにコーディングするためには、順番にコンストラクタを実行し、nullが返ってきた場合に次のコンストラクタを使用するという方法を用いるのが簡単です。

(例)
var httpObj = null;
httpObj = new XMLHttpRequest();
if (httpObj == null) {httpObj = new ActiveXObject("Msxml2.XMLHTTP");}
if (httpObj == null) {httpObj = new ActiveXObject("Microsoft.XMLHTTP");}

通信を終了して、オブジェクトを破棄します。

[引数]
なし

[戻値]
なし

すべてのヘッダー情報を返します。

[引数]
なし

[戻値]
文字列

引数で指定されたヘッダー名の値を返します。

[引数]
ヘッダー名

[戻値]
文字列

通信を開始します。

[引数]
  • 引数1
  • "post" または "get" を設定します。
  • 引数2
  • 接続先のURLを設定します。
  • 引数3
  • 同期処理をする場合は "true"、非同期処理の場合は "false" を設定します。
  • 引数4 (省略可)
  • 接続IDを設定します。
  • 引数5 (省略可)
  • 接続パスワードを設定します。
[戻値]
なし

(例)
var HttpObject = new XMLHttpRequest();
HttpObject.open("GET","http://www.****./com/about.html","true");

リクエストを送信します。

[引数 (省略可)]
"post"でデータを送信する場合に、送信データを設定します。"get"でデータを送信する場合は "null"を設定します。
送信データを設定する場合はencodeURIComponentメソッドを使ってエンコードした値を設定します。

[戻値]
なし

(例)
var HttpObject = new XMLHttpRequest();
HttpObject.open("POST","http://www.****./com/test.cgi","false");
HttpObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 送信するデータを整形します。
// 半角スペースを「+」に置換するため、正規表現を用います。
// 半角スペースはencodeURIComponentメソッドでは、
// %20に変換されますので、これを「+」に置換します。
regexp = /%20/g;
name1 = "TEST1";
value1 = "あ い う え お";
name2 = "TEST2";
value2 = "か き く け こ";

value1 = encodeURIComponent(value1).replace(regexp,"+");
value2 = encodeURIComponent(value2).replace(regexp,"+");
postdata = name1 + "=" + value1 + "&" + name2 + "=" + value2;

// 送信します。
HttpObject.send(postdata);

リクエストヘッダーを付けます。

[引数]
  • 引数1
  • ヘッダー名
  • 引数2
[戻値]
なし

(例)
var HttpObject = new XMLHttpRequest();
HttpObject.open("GET","http://www.****./com/about.html","true");
HttpObject.setRequestHeader("User-Agent","TestClient");


[イベントハンドラ]
通信状態を検知して状態に応じた処理をするためにイベントハンドラに関数を割り当てます。

オブジェクト".onredystatechange = 関数名;

通信の状態は readyStateプロパティに格納されますので、このプロパティの値を判断して処理を行います。
プロパティの値は以下のようになります。

(例)
var HttpObject = new XMLHttpRequest();
HttpObject.onreadystatechange = myFunc;
function myFunc()
{
if(HttpObject.readyState == 4) {alert("受信完了");}
if(HttpObject.readyState == 3) {alert("受信中");}
if(HttpObject.readyState == 2) {alert("sendは実行済みだが、サーバレスポンスはまだ");}
if(HttpObject.readyState == 1) {alert("openは実行済みだが、sendは未実行");}
if(HttpObject.readyState == 0) {alert("openは未実行");}
}

[タイムアウト]
サーバが何らかの原因で応答を返さなくなった場合には、同期処理においては、クライアントのブラウザはフリーズしたままになります。
一方、非同期処理においては、応答待ちのままになってしまいます。
そこで、タイムアウト処理を入れることが必要になります。
タイムアウトは一定時間経過したら処理をクライアント側から処理を中断します。

(例)
HttpObject = new XMLHttpRequest();
// 180秒経過したら処理を中断する。
setTimeout("HttpObject.abort()",180000);