AJAX で非同期リフレッシュと部分リフレッシュを実装する方法

今回は、AJAX が非同期リフレッシュと部分リフレッシュを実装する方法について説明します。AJAX が非同期リフレッシュと部分リフレッシュを実装するための 注意事項 は何ですか。実際のケースを見てみましょう。

概要:

コールバック関数でonReadyStateChangeを代入すると、コールバック関数が直接DOMを操作し、部分リフレッシュが実現できます。では、XMLHttpRequest の onReadyStateChange は、サービスの準備ができたことをどのようにして知るのでしょうか?ステータスはどのように変化しましたか (オブザーバーモード)?これは、クライアントによるサービスのステータス問い合わせ (定期的なポーリング) によって実現されます。

詳細な説明:

1. XMLHttpRequest には、readyStatus=4、status=200 などの多くの重要な属性があります。 XMLHttpRequest の全体的なステータスが完了していることが保証されている場合 (readyStatus=4)、データは送信されています。次に、サーバーの設定に従ってリクエストのステータスをクエリします (クライアントがサーバーの戻りステータスをポーリングするのと同様、サーバー側の長い接続ではなく、HTTP の短い接続のままです) すべての準備ができている場合 (ステータス = 200)、必要なコマンドを実行します。手術。

操作は一般的に DOM を直接操作するため、AJAX はいわゆる「更新なし」のユーザー エクスペリエンスを実現できます。

document.getElementById("user1").innerHTML = "数据正在加载...";
      if (xmlhttp.status == 200) {
        document.write(xmlhttp.responseText);
      }

2. では、AJAX クライアントで非同期を実現するにはどうすればよいでしょうか?実際、これは JavaScript のコールバック関数が行うことです

サーバー応答が利用可能になると実行されるコールバック JavaScript 関数を提供します

ビジネス関数:

function castVote(rank) {
 var url = "/ajax-demo/static-article-ranking.html";
 var callback = processAjaxResponse;
 executeXhr(callback, url);
}
需要异步通讯的函数： 
function executeXhr(callback, url) {
 // branch for native XMLHttpRequest object
 if (window.XMLHttpRequest) {
  req = new XMLHttpRequest();
  req.onreadystatechange = callback;
  req.open("GET", url, true);
  req.send()(null);
 } // branch for IE/Windows ActiveX version
 else if (window.ActiveXObject) {
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if (req) {
   req.onreadystatechange = callback;
   req.open("GET", url, true);
   req.send()();
  }
 }
}
req.onreadystatechange = callback
req.open("GET", url, true)

最初の行は、JavaScript コールバック関数を定義します。応答の準備ができています これは自動的に実行され、req.open() メソッドで指定された「true」フラグは、要求を非同期で実行することを示します。

サーバーが XmlHttpRequest を処理してブラウザに返すと、req.onreadystatechange 割り当てを使用して設定されたコールバック メソッドが自動的に呼び出されます。

コールバック関数:

function processAjaxResponse() {
 if (req.readyState == 4) {
  // only if "OK"
  if (req.status == 200) {
   document.getElementById("user1").innerHTML = req.responseText;
  } else {
   alert("There was a problem retrieving the XML data:
" + req.statusText);
  }
 }
}

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

laypage ページング プラグイン + ajax 非同期ページングの作り方

JS + ajax を使用して php の非同期フォーム送信を実装する

以上がAJAX で非同期リフレッシュと部分リフレッシュを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。