ももの知恵の樹

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

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

サーバ側に設置されたテキストファイルを読み込み、表示します。

クライアントからサーバに対して通信を行うにはXMLHttpRequestオブジェクトを使います。


XMLHttpRequestオブジェクト

「XMLHttpRequest」オブジェクトを作成し、サーバに対するリクエストを作成します。 


var xmlHttp;

xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "http://サーバ名/テキストファイル.txt", false);
xmlHttp.send(null);
alert(xmlHttp.responseText);

サンプル

サーバ上にテキストファイル「http://wirerose/test/memo.txt」を作成しておきます。

なお、日本語を記述する場合には文字コードを「UTF-8」にする必要があります。 


<!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">
 <!--
 function loadText(){
   var xmlHttp;
 
   xmlHttp = new XMLHttpRequest();
   xmlHttp.open("GET", "http://wirerose/test/memo.txt", false);
   xmlHttp.send(null);
   alert(xmlHttp.responseText);
 }
 // -->
 </script>
 <title>同期通信</title>
</head>
<body>
 <h1>同期通信</h1>
 <form>
 <input type="button" value="ファイルを読み込む" onClick="loadText()">
 </form>
</body>
</html>

関連ページ