JavaScript Ajax XMLHttpRequest

20061014.txt

<p>2006年10月14日</p>
<p>アップルコンピュータは、13日アメリカ合衆国で、また14日日本で、赤いiPod nanoを発売した。売り上げの一部がアフリカのエイズ対策に使われる。</p>
<p>インプレスによれば、この商品は、iPod nano (PRODUCT) RED Special Editionと呼ばれる製品で、従来のiPod nanoの本体を赤くしたものである。容量は4ギガバイトで、価格は従来相当品と同等である。</p>
<p>CNNによると、U2のボノ氏が13日 (UTC-5) シカゴで販売店を回り、商品を手に取って見せるなどして紹介した。東京都中央区銀座のアップルストアでは14日、午前10時 (UTC+9) の開店と同時に発売した。</p>
<p>CNETによれば、この製品は、ボノ氏とボビー・シュライヴァー氏が立ち上げた「(Red) プロジェクト」[1][2]に参画する商品で、売り上げの内、1台あたり10ドルが、世界エイズ・結核・マラリア対策基金に寄付されるとされている。</p>

ajax_XMLHttpRequest.html

<!--
基礎 Ajax + JavaScript

P285

AJAXの公式ドキュメント
https://developer.mozilla.org/ja/docs/AJAX

注意点：
ローカルでもWebサーバー経由でないと動かない。
XMLHttpRequestオブジェクトはセキュリティ上の制限があり、同じサーバー（ドメイン）にあるデータしか読み込めない。
無断でデータをほかのサーバーに送れることを防ぐため。
-->

<p id="output"></p>
<p><input type="button" value="今日は何の日?" onClick="requestText()"></p>

<script type="text/javascript">

function requestText(){
  var output = document.getElementById("output");
  
  // Ajax用のオブジェクト生成
  var xmlhttp = new XMLHttpRequest();
  
  if (xmlhttp){
    try {
      // ファイルの要求を送信
      // 状態が変わるたびに呼び出されるイベントを指定
      xmlhttp.onreadystatechange = gotData;
      
      // openメソッド　
      // パラメタ（プロトコルメッソド、URL、同期（非同期）
      xmlhttp.open("GET","20061014.txt",true);
      
      // 送信開始。
      // postのときは送信するデータを指定できる、getのときはnull
      //同期の場合は受信が完了するまで、ここでスクリプトが停止する。
      xmlhttp.send(null);
    }
    catch(e){
      output.innerHTML = "送信に失敗しました。";
    }
  }
  else
    output.innerHTML = "XMLHttpRequestが利用できません。";
    
    
  // 受信完了のイベントハンドラ
  // 同期の場合は、完了時に実行される。
  // 非同期の場合は、通信の状態が変わるたびに実行
  //
  // クロージャを使っている。
  // ローカル変数と組み合わされた関数の中の関数
  // JavaScriptでは、「関数の中に関数があるとき、内側の関数は外側の関数のローカル変数を保持する。」
  function gotData() {
    
    // readyStateプロパティ
    // 通信の進捗状態を示す。
    // 4なら受信完了
    if(xmlhttp.readyState != 4) return;
    
    // 値が200なら取得、404ならファイルが見つからない。
    if(xmlhttp.status == 200 || xmlhttp.status == 0)
      // 受信したデータを文字列として取り出す。
      output.innerHTML = xmlhttp.responseText;
    else
      output.innerHTML = "HTTPエラー：" + xmlhttp.status;
  }
}
</script>