AJAX - onreadystatechangeイベント
onreadystatechange イベント
リクエストがサーバーに送信されると、レスポンスに基づいたタスクを実行する必要があります。
readyState が変化するたびに、onreadystatechange イベントがトリガーされます。
readyState プロパティには XMLHttpRequest の状態情報が格納されます。
以下は XMLHttpRequest オブジェクトの3つの重要なプロパティです：
| プロパティ | 説明 |
|---|---|
| onreadystatechange | 関数（または関数名）を格納し、readyState プロパティが変化するたびにその関数が呼び出されます。 |
| readyState | XMLHttpRequest の状態を格納します。0 から 4 に変化します。
|
| status | 200: "OK" 404: ページが見つかりません |
onreadystatechange イベントでは、サーバーレスポンスが処理の準備ができたときに実行するタスクを指定します。
readyState が 4 でステータスが 200 の場合、レスポンスの準備ができていることを示します：
サンプル
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
試してみる »
注意：onreadystatechange イベントは 4 回（0 - 4）トリガーされます。それぞれ：0-1、1-2、2-3、3-4 で、readyState の各変化に対応します。
コールバック関数を使用する
コールバック関数とは、別の関数に引数として渡される関数です。
ウェブサイトに複数の AJAX タスクが存在する場合は、XMLHttpRequest オブジェクトを作成するための標準関数を書き、各 AJAX タスクに対してその関数を呼び出す必要があります。
その関数呼び出しには、URL と、onreadystatechange イベント発生時に実行するタスク（呼び出しごとに異なる場合があります）を含める必要があります：
サンプル
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
試してみる »