Level4 サーバ上のtxtデータを読み込む

サーバから受信したtxtデータをHTML文字列に変換し、ブラウザで見ることができるように出力せよ。

作成したプログラム

動作確認

プログラム説明

本体(lv4.html)では、レスポンスを受信した時の動作の定義がされている。onloaded()関数により、受信時に実行されるコールバック関数として定義されている。レスポンスとして取得した文字列を、変数を使ってタグを連結しながらHTML文字列を作成し、出力する。

外部ファイル(lv4.js)では、XMLHttpRequestオブジェクトの生成、送受信の定義がされている。createHttpRequest()関数により、ブラウザ別にXMLHttpRequestオブジェクトを生成し、requestFile()関数で生成されたオブジェクトを利用して送受信を定義している。openでPOST/GETなどのメソッド、データのURL、非同期or同期の設定を行う。また、sendで送信を行っている。データ受信時に起動するイベントreadystatechange内でreadyState値が4(受信完了)の時にデータを取得する。

txtデータファイル(lv4.txt)では,取得したいデータの内容を記述している。データを変数に格納し、本体ではその変数を使ってHTML文字列に変換する処理を行う。

実行結果に対する考察

今回、txtデータからHTML文字列の変換を行ったが、この様に動的にファイルを読み込むことができれば、既存のWebアプリケーションにも幅広く応用できる。具体的には、RSSリーダーやメッセンジャー、メーラーなどで非同期でサーバと様々なデータを送受信することなどが挙げられる。

一方、ブラウザによって日本語が文字化けしてしまうという問題点もある。utf-8でエンコードすれば大体は文字化けしないが、それでも文字化けしてしまう場合がある。実際、safari(ver1.3)では文字化けが起きてしまった。

今後の改良点

参考サイト

AJAXアーカイブ(http://jsgt.org/mt/archives/01/cat_ajax.html)
Ajax勉強用サンプル&解説(http://www.openspc2.org/JavaScript/Ajax/index.html)