今回は、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)
コールバック関数:
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); } } }
laypage ページング プラグイン + ajax 非同期ページングの作り方
JS + ajax を使用して php の非同期フォーム送信を実装する
以上がAJAX で非同期リフレッシュと部分リフレッシュを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。