JavaとAjaxでページを作る(1)-サーバーからテキストをロードする

通信用のオブジェクトを生成したら、サーバーにリクエストを送信し、サーバーからの応答を処理します。読み込むデータはUTF-8でエンコードされている必要があります。それ以外の文字コードの場合、文字化けが発生します。では、まずIEの場合のサンプルを見てみます。

「IEのサンプル」

次にopenメソッドでリクエストを送信する準備をします。openメソッドの第1引数にはhttpのGETまたはPOSTを指定します。第2引数には要求するコンテンツのURLを指定します。第3には非同期通信を行うかどうかを指定します。trueを指定すると非同期通信になります。falseを指定するとレスポンスが返るまで何も出来なくなるので、通常はtrueを指定します。

状態変化のイベントハンドラとして指定したdisplayData()では、まず状態の確認を行っています。readyStateには順番に0(UNINITIALIZED)、1(LOADING)、2(LOADED)、3(INTERACTIVE)、4(COMPLETED)というステータスが入りますが、responseTextからデータを取得できるのは4(COMPLETED)のみです。statusにはHTTPのレスポンスコードが入ります。従って、データを取得する際はreadyStateが4、statusが200になっていることをチェックしてから行います。

サンプルで使用している「Microsoft.XMLHTTP」は、IE5以降で使用できますがIE6以降ではこれよりパフォーマンスが良い「Msxml2.XMLHTTP」が使用できます。さて、次にIE以外のブラウザの場合のサンプルコードを紹介します。

「IE以外のサンプル」

このサンプルはFirefox、Opera、Safariなどで動作します。今回の2つのサンプルはそれぞれIEで動作するサンプル、IE以外で動作するサンプルと対象が分かれていましたが、実際のWebサイトでは、対象ブラウザを限定できない場合もあります。次回ではブラウザに関わらず動作するサンプルコードを紹介します。