ももの知恵の樹

Ajax-非同期通信でファイルを読み込む

Ajax-非同期通信でファイルを読み込む

非同期通信を行う場合には、サーバに対してリクエストを送信する処理とデータを受信後にデータを表示する処理を分けて実装します。


サーバ状態の確認処理

「readyState」プロパティの値を監視することでデータの受信が完了したかどうかを判別します。

readyStateプロパティはサーバからデータを受信するたびに値の更新が行われます。


readyStateプロパティの値が変化すると「onreadystatechange」イベントが発生しますので、チェック関数を呼び出してデータの受信状態を監視します。 


xmlHttp.onreadystatechange = checkReadyState;

function checkReadyState(){
  // サーバからのデータ受信の状態をチェック
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
    // サーバからのデータ受信が正常に完了
  }
}

実行サンプル


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <script type="text/javascript">
 <!--
 var xmlHttp;
 function loadText(){
 
   xmlHttp = new XMLHttpRequest();
   xmlHttp.onreadystatechange = checkStatus;
   xmlHttp.open("GET", "http://wirerose/test/memo.txt", true);
   xmlHttp.send(null);
 } 
 function checkStatus(){
   if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
     alert(xmlHttp.responseText);
   }
 }
 // -->
 </script>
 <title>同期通信</title>
</head>
<body>
 <h1>同期通信</h1>
 <form>
 <input type="button" value="ファイルを読み込む" onClick="loadText()">
 </form>
</body>
</html>

関連ページ