Ajaxのキソのキソまとめ

　リクエスト結果は2つの方法で扱うことが可能だ。一つはresponseTextプロパティを使用する方法、もう一つはresponseXMLプロパティを使用する方法である。サーバから返された値をもっとも簡単に取得する方法は、responseTextプロパティを用いてプレーンテキストとしてデータを取得する方法だ。この方法では、データがどのような形式であるかは関係ない。

　シンプルなテキストでも、カンマ区切りの値でも、ある書籍一冊すべてを含む文字列でも、好きな形式を利用することができる。次の例で定義したメソッドでは、responseTextの値を警告メッセージとして出力している。この例では、リクエストしたファイルの内容がすべて出力されることになる。

　もし、リクエスト対象のanother_file.htmlにまだ何も内容を入力していないなら、何か入力してみよう。

     function myReturnMethod() {
         if (xmlhttp.readyState==4){
             if (xmlhttp.status == 200) {
                 alert(xmlhttp.responseText);
             }
             else if(xmlhttp.status == 404) {
                 alert("Requested file not found");
             }
             else {
                 alert("Error has occurred with status code:  
"+xmlhttp.status);
             }
         }
     }

　結果データを取得するもう一つの方法は、responseXMLプロパティを利用することだ。responseXMLプロパティを利用した場合、データはXMLDocumentオブジェクトとして返されるので、JavaScriptのDOM関数を用いて読み取ることが可能になる。一つ注意して欲しいのは、実際の動作を確認するには、正しいフォーマットのXML文書を返すようにしなければならないということだ。リクエスト対象のファイル（xmlresult.html）を作成し、以下の内容を入力しよう。

     <?xml version="1.0" encoding="UTF-8"?>
     <root>
         XML Formatted Result
     </root>

　openメソッドの呼び出しは、以下のように変更する必要がある。

     xmlhttp.open("GET", "xmlresult.html", true);

　さて、もっとも大きな変更は返された値を扱う部分だ。alert(xmlhttp.responseText);というコードを以下のように変更する。

     xmldoc = xmlhttp.responseXML;
     rootnode = xmldoc.getElementsByTagName('root').item(0);
     alert(rootnode.firstChild.data);

　これでDOMを用いた処理は完成だ。

　よく使う既存のJavaScriptの関数を組み合わせれば、このデータを用いてページのコンテンツを操作することも可能だ。以下にその例を示そう。

     document.getElementById('resultdiv').innerHTML = xmlhttp.responseText;

いつAjaxを利用すべきか？

　リクエストの作成方法や結果の取得方法は学んだ。あと残された疑問は「いつAjaxを使うべきか？」ということだろう。

　一般的に、Ajaxのような新しい技術に関しては2つの極端な見解がある。Ajaxなんて消えてしまった方が楽に過ごせると考えているウェブ開発者がいる一方で、すべてAjaxフレームワークで書かれたサイトを何よりも好む開発者もいるのである。普通、このような問題に関しては、真実はその中間のどこかにある。もしあなたのサイトでAjaxを利用する場合は、その決定がもたらす結果を認識するべきである。まず、Ajaxで操作を行うページはブックマークできることが保証されないのだ。Ajaxによって、初期状態にしか戻ることができない「状態」がウェブサイトに持ち込まれてしまうのである。これは、ユーザのブラウザではURLが変化しないために生じる問題だ -- もしURLが変化するなら、Ajaxを利用する必要はないのである。

　また、すべてのユーザをサポートしたサイトを作りたいなら、作業量が倍になることも覚悟しなければならない。サイト内でAjaxを利用して作成された部分は、JavaScriptが有効でないユーザ向けのものも作る必要があるのだ。JavaScriptが利用可能であっても不可能であっても同様に動作させるには、ページの質の低下が避けられないが、それを無難に行いたいならば、余計な作業もたくさん必要になる。noscriptタグの使用は必須だろう。

　とはいえ、Ajaxを利用すればナビゲーションやインタラクティブな動作を実現する際に必要だったページの再読み込みを減らすことができ、サイトのユーザビリティが改善される。また、JavaScriptのエフェクトのライブラリと組み合わせれば、2、3年前までは不可能だった非常に魅力的なインタラクションも実現できるようになる。これらのような理由から、Ajaxはサイトの本質的でない部分で利用すべきだということが私の信念である。たとえば当サイトでは、Ajaxを用いて記事を表示させるのは非常に悪いアイデアである。なぜなら、permalinkの機構を実装しなければ、後で読むために記事のブックマークを行うことが不可能になってしまうからだ。一方、記事の評価機能やトークバック機能は、Ajaxで実装するのに非常に適しているといえるだろう。

続きは自分で

　お疲れさま！Ajaxの基礎はこれで終了。本稿では、JavaScriptで非同期リクエストを発行する方法を学んだが、それは全体のごく一部にすぎない。調べて学ばなければならないことは、ほかにもたくさんあるのである。HEADやPOSTでリクエストを行ったり、フォームの実装をAjaxで行ったり、AjaxのシステムにPHPのプログラムを含めたりといったことは、本稿では全く扱わなかった。まずは、簡単なリクエストを作成したり、Ajaxを利用しているサイトのJavaScriptを読んだりして、準備を整えよう。そうすれば、もはや途方に暮れることはないはずだ。