Heim > Web-Frontend > js-Tutorial > So implementieren Sie asynchrone Aktualisierungen und teilweise Aktualisierungen in AJAX

So implementieren Sie asynchrone Aktualisierungen und teilweise Aktualisierungen in AJAX

php中世界最好的语言
Freigeben: 2018-04-04 15:11:13
Original
2600 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie AJAX die asynchrone Aktualisierung und die teilweise Aktualisierung implementiert. Was sind die Vorsichtsmaßnahmen für AJAX, um die asynchrone Aktualisierung und die teilweise Aktualisierung zu implementieren?

Übersicht: onReadyStateChange wird durch die

Rückruffunktion zugewiesen, und asynchrone Aufrufe können realisiert werden. Die Rückruffunktion betreibt das DOM direkt und eine teilweise Aktualisierung kann realisiert werden. Woher weiß onReadyStateChange von XMLHttpRequest, dass der Dienst bereit ist? Wie hat sich der Status geändert (Beobachtermodus)? Dies wird durch die Statusabfrage (periodische Abfrage) des Dienstes durch den Client erreicht.

Detaillierte Erklärung:

1. XMLHttpRequest ist für die Kommunikation mit dem Server verantwortlich, und es gibt viele wichtige Attribute: readyStatus=4, status=200 usw. Wenn der Gesamtstatus von XMLHttpRequest garantiert abgeschlossen ist (readyStatus=4), wurden die Daten gesendet. Fragen Sie dann den Anforderungsstatus gemäß den Servereinstellungen ab (ähnlich wie der Client den Rückgabestatus des Servers abfragt, immer noch eine kurze HTTP-Verbindung, kein serverseitiger Push für eine lange Verbindung). Wenn alles bereit ist (Status = 200), ist die Ausführung erforderlich Betrieb.

Der Vorgang besteht im Allgemeinen darin, das DOM direkt zu bedienen, sodass AJAX das sogenannte „No Refresh“-Benutzererlebnis erreichen kann.

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

2. Wie macht man das also asynchron auf dem AJAX-Client? Tatsächlich ist es die Funktion der Callback-Funktion von Javascript, die eine Callback-JavaScript-Funktion bereitstellt. Sobald die Serverantwort verfügbar ist, wird die Funktion ausgeführt Geschäftsfunktion: Die erste Zeile definiert die JavaScript-Rückruffunktion, die automatisch ausgeführt wird, sobald die Antwort bereit ist, und das in der req.open()-Methode angegebene „true“-Flag zeigt an, dass die Anfrage soll asynchron ausgeführt werden.

Sobald der Server die XmlHttpRequest verarbeitet und an den Browser zurückgegeben hat, wird die mit der req.onreadystatechange-Zuweisung festgelegte Rückrufmethode automatisch aufgerufen.

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)
Nach dem Login kopieren
Rückruffunktion:

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Informationen. Bitte achten Sie auf andere chinesische PHP-Websites. Verwandte Artikel! Empfohlene Lektüre:

So erstellen Sie asynchrones Paging mit dem Laypage-Paging-Plug-in + Ajax
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);
  }
 }
}
Nach dem Login kopieren

JS+Ajax-Implementierungen PHP-Asynchron-Übermittlungsformular

Das obige ist der detaillierte Inhalt vonSo implementieren Sie asynchrone Aktualisierungen und teilweise Aktualisierungen in AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage