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);
  }
 }
}

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事:

AJAXクロスドメインリクエストを実装するNginxの問題の詳細な分析

AjaxToolKitの評価コントロールの使い方

Ajaxテクノロジーに基づいたプログレスバー付きのファイルアップロードの実装

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