Ajax Memo - サンプル（１）ファイルの表示 -

サンプル（１）ファイルの表示

Javascript部分が長くないので、HTMLの中に直接書きました。選択された条件で読み込むファイルを設定し、非同期通信でリクエストを送信しています。

■サンプル（１）HTML（Javascriptを含む）


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>サンプル（２）</title>
<link href="../maitz.css" rel="stylesheet" type="text/css">
<script language="javascript" src="ajax.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function changeDate(selDate)
{
    //XMLHttpRequestオブジェクト生成
    var xmlhttp = createHttpRequest();
    if (xmlhttp == null) {
        return null;
    }

    var data = null;
    var file = "data" + selDate.value + ".txt";

    sendRequest(xmlhttp, "GET", file, true, data, callBack);
}
function callBack(xmlhttp)
{
    var result = document.getElementById("result");
    result.innerHTML = xmlhttp.responseText;
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<div>
<table width="850" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td align="center">
      <table width="800" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td colspan="4">&nbsp;<br><br></td>
        </tr>
        <form action="" method="post" name="form1" id="">
        <tr>
          <td width="100" align="left">
            <select name="selDate" onChange="changeDate(this)">
              <option value="00" selected>お天気予報
              <option value="01">今日
              <option value="02">明日
              <option value="03">週末
              <option value="04">来週
            </select>
          </td>
        </tr>
        </form>
      </table><br><br>
    </td>
  </tr>
  <tr>
    <td align="center">
      <table width="800" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>結果<br><br></td>
        </tr>
        <tr>
          <td><div id="result"></div></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</div>
</body>
</html>