ラジオボタンでテキストを切り替える処理

Ajax

これはinnerHTMLを使っているのが新しいだけで特に新しいことはなし。

innerhtml.html

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>HTMLを読み込む</title>
    <script type="text/javascript" src="innerhtml.js"></script>
  </head>
  <body>
    <div>
      <form action="">
        <input type="radio" name="loc" value="1" id="tokyo" />東京の天気
        <input type="radio" name="loc" value="2" id="nagoya" />名古屋の天気
        <input type="radio" name="loc" value="3" id="osaka" />大阪の天気
      </form>
    </div>
    <br />
    <br />
    <div id="content">ラジオボタンにチェックを入れてください</div>
  </body>
</html>

innerhtml.js

//グローバル変数の定義
var httpObj;
var timerId;
var timeout_sec = 10; //タイムアウトの秒数

// テキストの内容を表示
function dispContent(e){
  var target_node;
  if(e.target){
    target_node = e.target;
  } else {
    target_node = e.srcElement;
  }
  var checked_radio = target_node.id;
  var target_url;
  if(checked_radio == 'tokyo'){
    target_url = 'content1.txt';
  } else if(checked_radio == 'nagoya'){
    target_url = 'content2.txt';
  } else if(checked_radio == 'osaka'){
    target_url = 'content3.txt';
  }
  var funcRef = function(text_data){
    document.getElementById('content').innerHTML = text_data;
  }
  httpRequest(target_url, funcRef)
}

// 引数に与えられたURLにHTTPリクエストを行い、指定された関数を実行
function httpRequest(target_url, functionReference){
  try{
    if(window.XMLHttpRequest){
      httpObj = new XMLHttpRequest();
    } else if(window.ActiveXObject){
      httpObj = new ActiveXObject("Microsoft.XMLHTTP");
    } else {
    httpObj = false;
    }
  } catch(e){
    httpObj = false;
  }
  if(! httpObj){
    httpObjGenerateFail();
  }
  // タイマーセット
  timerId = setInterval('timeoutCheck()', 1000);

  httpObj.open("GET", target_url, true);
  httpObj.onreadystatechange= function(){
    if (httpObj.readyState == 4){
      clearInterval(timerId);
      if (httpObj.status == 200){
        functionReference(httpObj.responseText);
      } else {
        alert(httpObj.status + ' : ' + httpObj.statusText);
        return false;
      }
    }
  }
  httpObj.send('');
}

// XMLHttpRequestオブジェクトの生成に失敗した場合
function httpObjGenerateFail(){
  alert('ご利用のブラウザは当サイトを利用できません！');
  return false;
}

// HTTPタイムアウトの処理
function timeoutCheck(){
  timeout_sec --;
  if(timeout_sec <= 0){
    clearInterval(timerId);
    httpObj.abort();
    alert('タイムアウト');
    return false;
  }
}

// イベントリスナーをセットする 
function setListeners(e){
  var tokyo = document.getElementById('tokyo');
  addListener(tokyo, 'click',dispContent,false);
  var nagoya = document.getElementById('nagoya');
  addListener(nagoya, 'click',dispContent,false);
  var osaka = document.getElementById('osaka');
  addListener(osaka, 'click',dispContent,false);

}

function addListener(elem, eventType, func, cap){
  if(elem.addEventListener){
    elem.addEventListener(eventType,func,cap);
  } else if(elem.attachEvent){
    elem.attachEvent('on'+eventType,func);
  } else {
    alert('ご利用のブラウザは対応していません！');
    return false;
  }
}
addListener(window,'load',setListeners,false);