Ajaxとは
「Asynchronous JavaScript + XML」の略です。
Ajaxのそれぞれの技術は、新しいものではありません。
いわゆるDHTMLとXMLHttpRequestというHTTP通信をおこなうためのJavaScriptオブジェクトを
組み合わせて利用する仕組みのことです。
Ajaxの特長
- 画面遷移を伴わないWebアプリケーションが作れる。SPI=Single Page Interface
- ユーザーが操作するたびに動的に画面を作りかえることができるため、利便性が向上する。
- サーバーへのリクエスト送信は送信ボタンのみではなく、イベントリスナーで検知されたイベントをトリガーとして送信できる。
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リクエストを定義します。 引数は３つ必要です。１つ目はGET/POST、２つ目はターゲットのURLです。 ３つ目は非同期通信（true）か同期通信（false）かを指定します。
readyStateプロパティ
- 0:未初期化状態
- 1:リクエスト準備
- 2:リクエスト完了
- 3:受信中
- 4:受信完了
statusプロパティ
statusプロパティはHTTPプロトコルのレスポンスコード。
- 200: OK
- 400: Bad Request
- 401: Unauthorized（認証失敗）
- 403: Forbidden（読み出し権限がない）
- 404: Not Found （ページが見つからない）
- 500: Internal Server Error（サーバー内部エラー）
sendメソッド
sendメソッドを使ってHTTPリクエストを送信する。
タイムアウト処理
setIntervalメソッド
setIntervalメソッドを使用します。
timer_id = setInterval('is_timeout()',5000);
この例では、5秒ごとにis_timeout()関数を実行させています。
clearIntervalメソッド
すでに実行されているタイマーを解除します。
clearInterval(timer_id);
IE対応
IE対応
ActiveXObjectを使用します。