chapter2. ファイルの出力
今回は XMLHttpRequest で読み込んだファイルの出力について説明したいと思います。

XMLHttpRequest でファイルを読み込むと、その内容を以下の形式で扱えるようになります。
responseText
responseXML
responseText は、ファイルをテキスト形式として扱い、
responseXML では、ファイルを XML DOM 形式として扱います。
読み込むファイルの拡張子は関係ありません。
XML 標準に準拠していないデータを responseXML で扱っても正しく表示されません。
また、responseXML はそのまま出力することが出来ないので、XML DOM を使用するなどの
なんらかの方法を用いる必要があります。
以上の2種類の形式しか存在しない為、画像などは扱えません。
 memo 
他には、
・responseBody
・responseStream
もありますが、IE 限定機能であり、
且つ現在はセキュリティパッチにより IE では使用出来なくなっています。
(VB等のプログラミング言語では使用出来る)

読み込んだら、次は画面に表示させる必要がありますね。
JavaScript で以下の2種類の方法を用いて表示するのが一般的です。
innerHTML
appendChild
どちらも、ページ内の指定の位置に読み込んだファイルの内容を追加することが出来ます。
ただし、両者には大きな違いがあります。
innerHTML では、読み込んだ内容のタグが処理され HTML 形式となり、
同じ位置に innerHTML を複数回実行しても上書きされます(以前の変更が無くなる)。

appendChild では、タグは処理されず、複数回実行すると追加書き込みされます。
そういうわけで、状況に応じて使い分ける必要があるでしょう。
また、どちらもファイル内の改行は反映されません。

それではサンプルを用いて説明してみます。
まずは読み込むファイルの内容を紹介します。
 sample1.txt 
<font color="red">Sample1</font><br />
<font color="blue">Sample2</font><br />
 sample2.txt 
<font color="pink">Sample3</font>
<font color="green">Sample4</font>
 sample1.xml 
<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
  <response type="object" id="productDetails">
    <monthly-sales>
      <employee-sales>
        <employee-id>1234</employee-id>
        <year-month>1998-01</year-month>
        <sales>$8,115.36</sales>
      </employee-sales>
      <employee-sales>
        <employee-id>1234</employee-id>
        <year-month>1998-02</year-month>
        <sales>$11,147.51</sales>
      </employee-sales>
    </monthly-sales>
  </response>
</ajax-response>

上記の3ファイルを、innnerHTML, appendChild で出力します。
テキストファイル(sample1.txt, sample2.txt)は、responseText、
XMLファイルは responseXML を使うことにします。
ちなみに、XMLファイルの内容を文字列として出力するだけならば、
responseText でも同じ結果になります。
ボタンを押すと動作します。
 innerHTML 

    
 appendChild 

    

まずは、innerHTML の解説から。
innerHTML は、タグを処理する為、sample1.txt を読み込むと
<font> タグ と <br> タグを処理し、色付きの文字として表示しています。
しかし、読み込んだファイルの改行は反映されない為、
sample2.txt を読み込むと改行されずに横に表示されます。
sample1.xml の場合は、responseXML のままでは出力されないので、responseXML.xml としました。
タグも処理されましたが、HTML ではないので値のみ表示されています。
innerHTML では処理のたびに上書きされるので、内容が書き換わっています。

次に、appendChild の解説です。
appendChild は、タグを処理しません。改行も反映されません。
その為、読み込んだ文字列をそのまま表示しています。
さらに、appendChild では追加書き込みされるので、処理のたびに読み込んだ内容が追加されています。
ここでも、sample1.xml の場合は、responseXML のままでは出力されないので、responseXML.xml としました。
タグも処理されないので、全ての内容が表示されています。

Ajax では、これらの方法を使い分けて、読み込んだ内容をページに反映させています。