『入門Ajax 増補改訂版』を読む その3
Posted by Junya HOSONO 2008年5月25日 PM 12:25
前回に引き続いて、今回は CHAPTER02 の残りと、CHAPTER03-04 を見ていきたいと思います。いよいよサーバからデータを取得する部分です。
最初に、CHAPTER02 の残りで、サーバとのデータ送受信と直接には関係ないところをひろっておきます。
JSON（Javascript Object Notation）
C言語ライクな文法にのっとったデータフォーマット。ある程度構造化されるデータを表現できるとのことです。実際には下のような記法になります。
var mynameObject =
{
"firstName" : "Junya",
"familyName" : "HOSONO"
};
言語間でのデータのやり取りにも使われているそうで、そういう意味では XML や CSV などと同列の扱いなのかもしれませんが、より言語側（機能側？）に近い印象を受けます。なにせ、Javascript はこのフォーマットを直接に理解して取り扱える、とのこと。なので、XML のように読み込んだあとにパースする必要がないために高速に扱える、と。まぁこの辺は実際にシステムを組んでみないとわからないし、パフォーマンスだけが選択の決め手ではないのですが。
CHAPTER03 XMLHttpRequest リファレンス
いよいよ CHAPTER03。データ送受信の部分。前半の仕組み自体の説明部分を、サンプルプログラムで理解します。
Ajaxにおいてサーバからデータを取得する際に利用する仕組みが、XMLHttpRequest です。
通常は、ブラウザとサーバとのデータのやり取りはHTTP （HyperText Transfer Protocol）というプロトコルにしたがって行われます。やりとり自体はブラウザ自体がやってくれます。
この HTTP を用いたサーバとのやり取りを、ブラウザ自体の機能としてやらせるのではなく、ブラウザ上で動く Javascript の XMLHttpRequest という仕組みをつかってユーザー自身が制御しよう、ということです。
なので、送受信のタイミングのハンドリング自体をユーザーが把握する必要がありますが、かなりの部分はすでに関数が用意されているので、それらを使えばいいようになっています。
XMLHttpRequest を利用してのサーバとのデータのやり取りの手順は、おおよそ以下のとおりになります。
- XMLHttpRequest オブジェクトの生成
- open メソッドで XMLHttpRequest オブジェクトを初期化
- send メソッドでサーバにリクエストを送信
- （サーバ側での処理が実施され、サーバからのレスポンスが返ってくる）
- サーバからのレスポンスを受信したことによって、onreadystatechange イベントが発生
- 受信状況を確認して受信が完了したのちに、受信データを取り出して処理する
以下のサンプルプログラムは、CHAPTER02 の64ページのものを元にしたものです。サーバからのXMLデータを読み込み、内容をメッセージボックスに表示するだけです。ボタンを押して、「今、読み込みました」という文字が表示されれば、成功です。プログラムには、一部、CHAPTER04 にあたるクロスブラウザ対策も盛り込んでいます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>『入門Ajax 増補改訂版』（64ページ、修正あり）</title>
</head>
<body>
<script type="text/javascript">
// ボタンが押されたら
function sendReq( data, method, url )
{
var oj = createHttpRequest(); // XHRオブジェクト生成
// 受信時のコールバック先を設定 (クロスブラウザ対策付)
var ua = navigator.userAgent;
var safari = ua.indexOf("Safari")!=-1;
var konqueror = ua.indexOf("Konqueror")!=-1;
var mozes = ((a=navigator.userAgent.split("Gecko/")[1]) ?a.split(" ")[0]:0)>= 20011128;
if( window.opera || safari || mozes ) {
oj.onload = function() { callback( oj ); }
} else {
oj.onreadystatechange = function() {
if( oj.readyState == 4 ) { callback( oj ); }
}
}
oj.open( method, url ); // XHR open
oj.send(''); // 受信要求を送信
}
// XMLHttpRequest オブジェクト生成 (クロスブラウザ対策付)
function createHttpRequest()
{
if( window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if( window.ActiveXObject ) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch( e ) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch( e2 ) { return null; }
}
}
}
// データ受信完了時
function callback( request ) {
var xmlDoc = request.responseXML;
var msg = xmlDoc.getElementsByTagName( "msg" );
var data = msg[0].firstChild.nodeValue;
alert( data );
}
</script>
<form>
<input type=button
value="test1.xml を読み込み、メッセージボックスを表示します "
onclick="sendReq('','GET','./test1.xml')">
</form>
</body>
</html>
サーバから読み込むXMLデータは以下のものです。
<?xml version="1.0" encoding="UTF-8"?> <response> <ch>1</ch> <msg>今、読み込みました</msg> </response>
プログラムを確認すればわかるとおり、ボタンを押して呼んだ関数自体は、send メソッドで終わっています。その後、サーバからのレスポンスの受信が完了した時点で、onreadystatechange イベントが発生し、かつ、readyState が "4（受信完了）" になるので、コールバック関数である callback が呼び出されて、読み込んだ XML 内のデータを表示するメッセージボックスが出る、というわけです。
このイベントが発生するまでは、ブラウザはユーザーに対する処理を止める必要はないので、たとえ途中で通信が止まったり、サーバ自体がトラブルで止まっていたとしても、画面側の反応がとまることはないわけです。ためしに、読み込むデータファイルをサーバ上から削除しておくと、ボタンを押しても何の反応もない＝callback 関数が読み込まれない、というだけで、ボタン自体は何回も押せます、ということは、ブラウザ側の処理は生きているわけですね。
もちろん、実際のサービスを構築する際には、エラー処理などを含めなければなりませんが、今回はサンプルということでそのあたりは省略しています。
CHAPTER03 の後半は、XMLHttpRequest の各種メソッドのリファレンスになっています。
CHAPTER04 クロスブラウザ対策と文字コード
ここは、ブラウザごとに異なる挙動の部分に対する対応と、Ajaxで通用使用される文字コードであるUTF-8以外の文字コードを使わざるを得ない場合の考慮点を指摘されています。基本的には、必要に応じて対処（もしくはライブラリにまかせる）、ということだと思います。どんなことがありうるのかくらいは、確認しておきましょう。
次回は、最近数多く発表されている 各種 Ajax ライブラリで XMLHttpRequest 周りをどう実装するかを説明している CHAPTER05 を見ていきます。
このブログ記事に対するトラックバックURL: http://www.ngo-jvc.net/~z301115/mt4/mt-tb.cgi/228/jvcwebtb/XXXXXXXX
※トラックバックスパム対策のため、お手数ですがトラックバックURL末尾のXXXXXXXX 部分を下記画像の数字列に書き換えてからご利用ください。
コメント(0)
コメントする