Was sind die Arbeitsabläufe von AJAX? Einführung in den Ajax-Workflow (mit Beispielen)

In diesem Artikel geht es hauptsächlich um den Arbeitsablauf von Ajax sowie um das Prinzip von Ajax und die Einführung einiger häufig verwendeter Attribute. Schauen wir uns nun gemeinsam diesen Artikel an

AJAX steht für „Asynchronous JavaScript and XML“.

ist eine Webentwicklungstechnologie zum Erstellen interaktiver Webanwendungen. Es:
verwendet XHTML+CSS zur Darstellung von Informationen;
verwendet JavaScript für den Betrieb von DOM (Document Object Model) für die dynamische Anzeige und Interaktion;
verwendet; XMLHttpRequest-Objekte führen einen asynchronen Datenaustausch mit dem Webserver durch.
Verwenden Sie JavaScript, um alles miteinander zu verbinden.

AJAX-Prinzip: AJAX bezieht sich nicht auf eine einzelne Technologie, sondern nutzt organisch eine Reihe verwandter Technologien. Sein Kern ist das JavaScript-Objekt XmlHttpRequest, das es uns ermöglicht, mithilfe von JavaScript Anfragen an den Server zu stellen und Antworten zu verarbeiten, ohne den Benutzer zu blockieren. AJAX verwendet einen asynchronen Interaktionsprozess, der einen Vermittler zwischen dem Benutzer und dem Server einführt und so die Verarbeitungs-Warten-Verarbeitungs-Warten-Mängel im Netzwerkinteraktionsprozess beseitigt. Der Browser des Benutzers lädt die AJAX-Engine, wenn er Aufgaben ausführt. Die AJAX-Engine ist in JavaScript geschrieben und normalerweise in einem versteckten Frame versteckt. Es ist für die Zusammenstellung der Benutzeroberfläche und die Interaktion mit dem Server verantwortlich. Die AJAX-Engine ermöglicht, dass der Interaktionsprozess zwischen dem Benutzer und der Anwendungssoftware asynchron abläuft, unabhängig von der Kommunikation zwischen dem Benutzer und dem Netzwerkserver. Jetzt können Sie Javascript verwenden, um die AJAX-Engine aufzurufen, anstatt eine HTTP-Benutzeraktion zu generieren. Die Bearbeitung von Daten im Speicher, die Seitennavigation und die Datenüberprüfung, die nicht das Neuladen der gesamten Seite erfordern, können mit AJAX ausgeführt werden. Sie können JSP, Entwicklern und Endbenutzern sichtbaren Komfort bieten.

Da der Kern von Ajax das XmlHttpRequest-Objekt ist, muss es eingeführt werden:
Gemeinsame Attribute: Onreadystatechange gibt die Ereignisverarbeitungsfunktion an, wenn sich das readyState-Attribut ändert . Schreiben Sie einfach
readyState, um den aktuellen Status der Ajax-Anfrage anzuzeigen. Nur lesen. Sein Wert wird durch eine Zahl dargestellt.
0 bedeutet nicht initialisiert. Die offene Methode wurde noch nicht aufgerufen
1 bedeutet Laden. Die Open-Methode wurde aufgerufen, die Send-Methode jedoch noch nicht
2 bedeutet, dass der Ladevorgang abgeschlossen ist. send wurde aufgerufen. Die Anfrage wurde gestartet
3 bedeutet, dass die Interaktion läuft. Der Server sendet eine Antwort
4 bedeutet abgeschlossen. Die Antwort wird gesendet
Jedes Mal, wenn sich der readyState-Wert ändert, wird das readystatechange-Ereignis ausgelöst.
ResponseText Gibt die Antwortinformationen als schreibgeschützte Zeichenfolge zurück. Je nachdem, was der Server sendet, handelt es sich entweder um HTML, XML oder einfachen Text. Die Eigenschaft „responseText“ ist nur verfügbar, wenn der Wert der Eigenschaft „readyState“ 4 wird, was anzeigt, dass die Ajax-Anfrage beendet wurde.
ResponseXML Formatieren Sie die Antwortinformationen in ein XML-Dokumentobjekt und geben Sie es schreibgeschützt zurück. Das ResponseXML-Attribut ist nur verfügbar, wenn der Server Daten mit korrekten Header-Informationen sendet.
MIME-Typ muss text/xml sein Status Gibt den HTTP-Statuscode der aktuellen Anfrage zurück. Schreibgeschützt
Allgemeine Statuscodes und ihre Bedeutung:
404-Seite nicht gefunden (nicht gefunden )
403 Verboten
500 Interner Dienstfehler
200 Alles ist in Ordnung
304 Nicht geändert (Der Server gibt den Status 304 zurück, was darauf hinweist, dass die Quelldatei nicht geändert wurde)
Im XMLHttpRequest -Objekt werden die vom Server gesendeten Statuscodes im Statusattribut gespeichert. Indem Sie diesen Wert mit 200 oder 304 vergleichen, können Sie sicherstellen, dass der Server eine erfolgreiche Antwort gesendet hat
(Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte „PHP Chinese Website“ AJAX Development Manual ).

Gemeinsame Methoden:
Öffnen Sie eine neue HTTP-Anfrage und geben Sie die Anfragemethode, die URL und die Verifizierungsinformationen an.
Senden Senden Sie die Anfrage an den http-Server und erhalten Sie die Antwort Es werden keine Daten gesendet.
setRequestHeader gibt separat einen bestimmten HTTP-Header der Anfrage an
AJAX-Workflow:
1 Objektinitialisierung

function   createXmlHttpRequest(){
   var xmlHttp;
   try{    //Firefox, Opera 8.0+, Safari
           xmlHttp=new XMLHttpRequest();
    }catch (e){
           try{    //Internet Explorer
                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e){
                  try{
                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }catch (e){}  
           }
    }
   return xmlHttp;
 }

2 Send request
-Aufruf Die open- und send-Methoden des XMLHttpRequest-Objekts werden der Reihe nach aufgerufen, nachdem der open-Aufruf abgeschlossen ist.

xmlHttp.open("get","../servlet/RegisterServlet?timeStamp="+new Date().getTime(),true)
xmlHttp.send(null);

Wenn der Parameter send im Post-Modus gesendet wird, kann es sich um einen beliebigen Inhalt handeln, den Sie an den Server übergeben möchten. Sie müssen jedoch zuerst die Methode setRequestHeader aufrufen und Ändern Sie die MIME-Kategorie:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
3 Der Server empfängt und verarbeitet die Daten, gibt sie zurück und gibt das Ereignis an Handler zum Verarbeiten der Rückgabeinformationen
Bei jeder Änderung des readyState-Attributs wird einfach der entsprechende Handler-Funktionsname dem onreadystatechange-Attribut des XMLHttpRequest-Objekts zugewiesen

 xmlHttp.onreadystatechange = function(){            if (xmlHttp.readystate == 4) { 
  if (xmlHttp.status == 200 || xmlHttp.status == 304) {//XMLHttpRequest对成功返回的信息有两种处理方式：//responseText：
  将传回的信息当字符串使用；//responseXML：将传回的信息当XML文档使用，可以用DOM处理。 
        }            }        };

4 Client empfängt
5 Ändern Sie den Inhalt der Client-Seite

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website AJAX-Benutzerhandbuch Spalte zum Lernen), es gibt Fragen. Sie können unten eine Nachricht hinterlassen, um Fragen zu stellen.

Das obige ist der detaillierte Inhalt vonWas sind die Arbeitsabläufe von AJAX? Einführung in den Ajax-Workflow (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!