Ajaxを理解する4つのポイント：Web2.0で変わるWebプログラミングの常識（6/6 ページ）
Ajaxはどのように実現されているのだろうか？ こんな疑問に応えるべく、サンプルを挙げてみよう。Ajaxの基本は、単に「JavaScriptでHTTP通信をする」というだけに過ぎないことが分かる。
すでに「2.」の手順で、
req.onreadystatechange = statechange;
と設定してあるため、XMLHttpRequestオブジェクトのステータスが変化するとstatechangeメソッドが呼び出される。
statechangeメソッドでは、まずステータスをチェックする。ステータスはreadyStateプロパティに入っており、値が「4」であるときには受信完了を示す。
if (req.readyState == 4)
{
// 受信完了
}
受信完了の際には、HTTPのエラーコードを確認する。正しく受信が完了した場合のステータスは「200」だ。
if (req.status == 200)
{
// HTTPの受信は成功した
}
statusプロパティには、サーバエラーが発生した場合に500、ファイルが見つからない時には403といった、通常のHTTPのステータスコードが設定される。
statusプロパティが200であったなら正常終了であり、データを取得できるのだ。
XMLHttpRequestオブジェクトには、データを取得するためのプロパティが2つある。一つはテキスト形式で取得するresponseTextプロパティ、もう一つはXML形式で取得するresponseXMLプロパティだ。
ここではサーバ側からXMLデータが戻ってくるので、次のようにresponseXMLプロパティを使って取り出せばよい。
var xmlobj = req.responseXML;
responseXMLプロパティの戻り値は、DOMのDocumentオブジェクトだ。サーバからのデータは、
<result><add>400</add><diff>200</diff></result>
のように、「和」が「<add>」、「差」が「<diff>」で囲まれているので、次のようにして取り出す。
// 和を取得
var addobj = xmlobj.getElementsByTagName("add");
var addvalue = addobj[0].firstChild.nodeValue;
// 差を取得
var diffobj = xmlobj.getElementsByTagName("diff");
var diffvalue = diffobj[0].firstChild.nodeValue;
そしてDOMを用いて、取得した値を差し込む。
// <span>に設定
document.getElementById('addvalue').innerText = addvalue;
document.getElementById('diffvalue').innerText = diffvalue;
ここで「addvalue」と「diffvalue」は、HTML中に書かれている次の<span>要素だ。
<span id="addvalue"></span>
<span id="diffvalue"></span>
つまり、
<span id="addvalue">受信した和の値</span>
<span id="addvalue">受信した差の値</span>
のように設定され、ユーザーに表示されるコンテンツが変わるというわけだ。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
まとめ
このようにAjaxの基本は、単に、「JavaScriptでHTTP通信をする」というだけに過ぎない。
サンプルコードで見てきたように、JavaScriptですべてのコードを書くと、ソースが長くなり可視性も悪くなってしまう。問題点として、次のものが挙げられる。
1. サーバサイドのXML生成の問題
リスト2では、単純に文字列の結合でXMLを生成したが、構造体や配列を返すということを考えると、XML生成部分が複雑化する恐れがある。
また文字コードをUTF-8で記述する必要があるため、コード変換も必須となる。
2. XML解析の問題
クライアントでは、Documentオブジェクトを使って、サーバーが送信したXMLを解析し、要素をひとつひとつ取り出す必要がある。「1.」とも関係するが、構造体や配列のパースは面倒な処理となる。
3. DOMツリーの操作の問題
ユーザーに表示するテキストは、DOMの操作で比較的容易に変更できる。しかし、例えばマウスのドラッグ＆ドロップに追従して要素の位置を移動する、といった処理をしたい場合には、相当複雑なものになる。
このような問題は、クラスライブラリを使うことで解決できる。次回はAjaxアプリケーション開発を手助けするクラスライブラリについて説明していこう。
Copyright © ITmedia, Inc. All Rights Reserved.