AJAX - onreadys...LOGIN

AJAX - onreadystatechange イベント

onreadystatechange イベント

リクエストがサーバーに送信されると、いくつかの応答ベースのタスクを実行する必要があります。

readyState が変更されるたびに、onreadystatechange イベントがトリガーされます。

readyState属性にはXMLHttpRequestのステータス情報が格納されます。 rynows xmlhttprequestオブジェクトの3つの重要なプロパティ:

aTtributes、関数は呼び出されます。

readyState XMLHttpRequest のステータスを格納します。 0から4まで変化します。

’’ ’’ '' '' '' '' '' '' onity in vitionized of "ok" 404:Page not not notededStateChangeイベントでは、サーバーの応答の準備ができたときに実行するタスクを指定します。

readyState が 4 でステータスが 200 の場合、応答の準備ができていることを意味します:

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

注: onreadystatechange イベントは、readyState の各変更に対応して 5 回 (0 ~ 4) トリガーされます。 コールバック関数の使用

コールバック関数は、パラメータとして別の関数に渡される関数です。

Web サイトに複数の AJAX タスクがある場合は、XMLHttpRequest オブジェクトを作成するための標準関数を作成し、AJAX タスクごとにこの関数を呼び出す必要があります。

関数呼び出しには、URL と、onreadystatechange イベントの発生時に実行されるタスクが含まれている必要があります (呼び出しごとに異なる場合があります):

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

<!DOCTYPE html> <html> <head> <script> var xmlhttp; function loadXMLDoc(url,cfunc) { if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 代码 xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction() { loadXMLDoc("/asset/demo.ajax.php?dm=txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } </script> </head> <body> <div id="myDiv"><h2>修改文本内容</h2></div> <button type="button" onclick="myFunction()">点击</button> </body> </html>
コースウェア