So implementieren Sie asynchrone Aktualisierungen und teilweise Aktualisierungen in AJAX

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

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)

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

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!