loadボタンを押すとテキストファイルを読み込んで表示します。

onclickにformのidを指定することで特定のフォームの内容を変更することができます。

ボタンのonclickに登録した関数にはformのid名を指定して送っているのでロードされたテキストは指定されたform内に表示されます。

formのid = loadText

formのid = loadText2

loadtext1.txt

ボタン「load1」が押されました。

loadtext1.txtの内容を表示します。

loadtext2.txt

ボタン「load2」が押されました。

loadtext2.txtの内容を表示します。

HTML構造

<form id="loadText1">
  <p>
    <input type="button" value="load1" onclick=
"loadTextFile('loadText1','GET','text/loadtext1.txt',true)" 
onkeypress="dummy()" tabindex="1" accesskey="A" />
    <input type="button" value="load2" onclick=
"loadTextFile('loadText2','GET','text/loadtext2.txt',true)" 
onkeypress="dummy()" tabindex="2" accesskey="B" />
  </p>
  <p>
    <textarea name="text" cols="50" rows="4" tabindex="3" 
accesskey="C">formのid = loadText</textarea>
  </p>
</form>
<form id="loadText2">
  <p>
    <textarea name="text" cols="50" rows="4" tabindex="4" 
accesskey="D">formのid = loadText2</textarea>
  </p>
</form>

JavaScript

HTTP通信を行う時は必ずXMLHttpRequestオブジェクトを作成するのでオブジェクトを作成する関数をcreateRequest()にまとめました。

IE6以前ではXMLHttpRequestを使えないのでActiveXObjectを使います。

function createRequest() {
  // IE 以外のブラウザ
  if(window.XMLHttpRequest) {
    return new XMLHttpRequest();
  } else if(window.ActiveXObject) {
    try {
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
        return null;
      }
    }
  } else {
    return null;
  }
}
function loadTextFile(idname, method, filename, async) {
  var errmsg = "";
  var ajaxObj = createRequest();
  if(ajaxObj) {
    ajaxObj.open(method, filename, async);
    ajaxObj.onreadystatechange = function() {
      if (ajaxObj.readyState == 4) {
        document.forms[idname].text.value 
          = ajaxObj.responseText;
      }
    }

    ajaxObj.send(null);
  } else {
    errmsg += "XMLHttpRequestオブジェクトの生成に失敗しました。";
  }
  if(errmsg) {
    document.forms.loadText2.text.value = errmsg;
  }
}
function dummy() {
  return false;
}