Das Prinzip von AJAX – wie man eine asynchrone und teilweise Aktualisierung erreicht

Wie erreicht man eine asynchrone und teilweise Aktualisierung? Der unten stehende Herausgeber bringt Ihnen einen Artikel über die Prinzipien von AJAX – wie Sie eine asynchrone und teilweise Aktualisierung erreichen. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Übersicht: Wenn onReadyStateChange von der Rückruffunktion ein Wert zugewiesen wird, kann er asynchron aufgerufen werden, und die Rückruffunktion betreibt das DOM direkt, sodass eine teilweise Aktualisierung erreicht werden kann. Woher weiß onReadyStateChange von XMLHttpRequest, dass der Dienst bereit ist? Wie ändert sich der Zustand (Beobachtermodus)? Dies wird durch die Statusabfrage (regelmäßige 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 Rolle der Javascript-Rückruffunktion Stellt eine Rückruf-JavaScript-Funktion bereit, die ausgeführt wird, sobald die Serverantwort verfügbar ist

Geschäftsfunktion:

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)

Zuerst Zeile definiert eine JavaScript-Rückruffunktion, die automatisch ausgeführt wird, sobald die Antwort bereit ist, und das in der req.open()-Methode angegebene Flag „true“ gibt an, dass Sie die Anforderung asynchron ausführen möchten.

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.

Rückruffunktion:

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

Verwandte Artikel:

Das obige ist der detaillierte Inhalt vonDas Prinzip von AJAX – wie man eine asynchrone und teilweise Aktualisierung erreicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!