Ajax 2. テキストを読む

まず、次のボタンを押してみてください。どうですか？
エラーが出たかもしれません。
エラーの場合はもう一度同じボタンを押してください。今度はテキストボックスに何か表示されたのではないでしょうか。

フォームのほうは、

  <input type="text" name="text1" size="40" />
  <input type="button" name="btn1"
            value="押してね" onclick="test1(this.form)" />

スクリプトのほうは、

  function test1(form) {
     var req = new ActiveXObject("Microsoft.XMLHTTP");
     req.open("GET", "./test1.txt");
     req.send("");
     form.text1.value = req.responseText;
  }

となっています。

まず、

  var req = new ActiveXObject("Microsoft.XMLHTTP");

として、まず XMLHttpRequest オブジェクトを得ます。とにかくこれがないと始まりません。
次に、

  req.open("GET", "./test1.txt");

open メソッドで test1.txt に接続します。
次に、

  req.send("");

send メソッドでメッセージを送っています。空の文字列を送っているのですが、動作を見る限り、これで test1.txt をダウンロードしているようです。
最後に、responseText プロパティでファイルの内容を得ます。
しかし、ダウンロードし終わる前に読もうとすると、エラーが出るということになります。 2回目ボタンを押したときにもうダウンロードが終わっていれば、エラーが出ないことになります。

注意しなければならないのは、このテキストファイルの文字コードは UTF-8 でなければならないということです。
それ以外のコードだと、エラーが出るようです。

別のテキストファイルを用意しました。
次のボタンを押してください。今度はエラーが出なかったと思います。

フォームのほうは、

  <input type="text" name="text2" size="40" />
  <input type="button" name="btn2"
            value="押してね" onclick="test2(this.form)" />

スクリプトのほうは、

  var req2;
  var form2;
  
  function test2(form) {
    form2 = form;
    req2 = new ActiveXObject("Microsoft.XMLHTTP");
    req2.open("GET", "./test2.txt");
    req2.onreadystatechange = display;
    req2.send("");
  }
  
  function display() {
    if(req2.readyState == 4)
        form2.text2.value = req2.responseText;
  }

となっています。
少しややこしくなりましたね。

いつダウンロードが完了するかわからないので、それを待つことにします。
それを検知するのが、 XMLHttpRequest オブジェクトの onreadystatechange イベントハンドラです。

  req2.onreadystatechange = display;

これで、 XMLHttpRequest オブジェクトに何か起きたとき、 displayという関数が働くようになります。この関数の中で、

    if(req2.readyState == 4)
        form2.text2.value = req2.responseText;

としていて、 XMLHttpRequest オブジェクトの readyState プロパティが4だったとき、その何かがダウンロード完了ということです。
このときそのテキストを表示すればいいということになります。