PHP開発基本チュートリアルのAJAX内容のまとめ

AJAX のワークフローは次のとおりです:

68.png

1. イベントが発生します: 通常、oclick イベント、onchange イベント、onkeyup イベントなどです。

注:

oclick イベント: in

onchange イベント: フィールドの内容が変更されたときに発生します

onkeyup イベント: キーボードのキーが離されたときに発生します


2. XMLHttpRequest オブジェクトを作成します

ブラウザのバージョンの違いにより、作成時に総合的に判断する必要があります

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }


3.Send HttpRequest
MLHttpRequest オブジェクトの open () メソッドと send() メソッドはリクエストをサーバーに送信します

    xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();

注: リクエストの形式に注意してください。具体的な形式は次のとおりです

69.png


4. HTTPRequest を処理します。 、応答を作成し、データをブラウザーに返します

    リクエストがサーバーに送信されるとき、いくつかの応答ベースのタスクを実行する必要があります。
  • readyState が変化するたびに、onreadystatechange イベントがトリガーされます。

readyState属性にはXMLHttpRequestのステータス情報が格納されます。

XMLHttpRequest オブジェクトの 3 つの重要なプロパティは次のとおりです:


67.png onreadystatechange イベントでは、サーバー応答を処理する準備ができたときに実行されるタスクを指定します。

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

注: onreadystatechange イベントは、readyState の各変更に対応して 5 回 (0 ~ 4) トリガーされます

    サーバーから応答を取得するには、XMLHttpRequest オブジェクトの responseText プロパティまたは responseXML プロパティを使用できます。

66.png例:

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


5. jsを使用して返されたデータを処理し、ページを更新します
js IDでフォーム領域の一部を取得を作成し、XMLHttpRequest オブジェクトによって返されたデータを入力します。

学び続ける
||
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜