Ajaxとは

「Asynchronous JavaScript + XML」の略です。

Ajaxのそれぞれの技術は、新しいものではありません。 いわゆるDHTMLとXMLHttpRequestというHTTP通信をおこなうためのJavaScriptオブジェクトを 組み合わせて利用する仕組みのことです。

Ajaxの特長

DOM

DOMはこちらから。

HTTP文書

HTML文書

<html>
<head>
<title>タイトルだよ</title>
</head>
<body>本文だよ</body>
</html>

HTML文書(JavaScript付き)

javaスクリプトの記述の仕方はいくつかありますが、ここではhead内にスクリプトを記述します。

<html>
<head>
<title>タイトルだよ</title>
<script language="javascript" type="text/javascript">
~ここにスクリプトを記述~
</script>
</head>
<body>本文だよ</body>
</html>

HTTP通信

HTTP通信の基本的な流れ

JavaScriptを使ってHTTP通信をおこなうときには、XMLHttpRequestオブジェクトを生成します。

<html>
<head>
<title>タイトルだよ</title>
<script language="javascript" type="text/javascript">

var httpObj;

function httpReq(){
   var target = 'hello.txt';
   httpObj = new XMLHttpRequest();
   httpObj.open("GET",target,true);
   httpObj.onreadystatechange = function(){
      if(httpObj.readyState == 4 && httpObj.status == 200){
         document.form1.textarea1.value = httpObj.responseText;
      }
   }
   httpObj.send('');
}
</script>
</head>
<body onload="httpReq()">本文だよ</body>
<form action="" name="form1">
<textarea name="textarea1" rows="2" cols="40"></textarea>
</form>

</html>

openメソッド

openメソッドを使ってHTTPリクエストを定義します。 引数は3つ必要です。1つ目はGET/POST、2つ目はターゲットのURLです。 3つ目は非同期通信(true)か同期通信(false)かを指定します。

readyStateプロパティ

statusプロパティ

statusプロパティはHTTPプロトコルのレスポンスコード。

sendメソッド

sendメソッドを使ってHTTPリクエストを送信する。

タイムアウト処理

setIntervalメソッド

setIntervalメソッドを使用します。

timer_id = setInterval('is_timeout()',5000);

この例では、5秒ごとにis_timeout()関数を実行させています。

clearIntervalメソッド

すでに実行されているタイマーを解除します。

clearInterval(timer_id);

IE対応

IE対応

ActiveXObjectを使用します。