Ausführliche Erläuterung des Funktionsprinzips, der Vor- und Nachteile von AJAX

AJAX ist eine Technologie zur Erstellung schneller, dynamischer Webseiten. AJAX ermöglicht die asynchrone Aktualisierung von Webseiten, indem im Hintergrund kleine Datenmengen mit dem Server ausgetauscht werden. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

1. Die in Ajax enthaltene Technologie

Jeder weiß, dass Ajax keine neue Technologie ist, sondern eine Kombination mehrerer Originaltechnologien. Es besteht aus den folgenden Technologien.

Dargestellt mit CSS und XHTML.

Verwenden Sie das DOM-Modell für Interaktion und dynamische Anzeige.

Verwenden Sie XMLHttpRequest, um asynchron mit dem Server zu kommunizieren.

Verwenden Sie Javascript zum Binden und Aufrufen.

Von den oben genannten Technologien basieren alle anderen Technologien mit Ausnahme des XmlHttpRequest-Objekts auf Webstandards und wurden häufig verwendet. Obwohl XMLHttpRequest vom W3C noch nicht übernommen wurde, ist es bereits ein De-facto-Standard Fast alle gängigen Browser unterstützen es derzeit.

2. So erstellen Sie Ajax

Das Prinzip von Ajax besteht einfach darin, eine asynchrone Anfrage über das XmlHttpRequest-Objekt an den Server zu senden, Daten vom Server abzurufen und dann Javascript zum Betrieb zu verwenden DOM und aktualisieren Sie die Seite. Der wichtigste Schritt dabei ist das Abrufen der Anforderungsdaten vom Server. Die native Erstellung von Ajax kann in die folgenden vier Schritte unterteilt werden.

1. Erstellen Sie ein XMLHttpRequest-Objekt

Alle modernen Browser (IE7+, Firefox, Chrome, Safari und Opera) verfügen über integrierte XMLHttpRequest-Objekte.

Syntax zum Erstellen von XMLHttpRequest-Objekten:

var xhr = new XMLHttpRequest();

Ältere Versionen von Internet Explorer (IE5 und IE6) verwenden ActiveX-Objekte:

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

Um mit allen modernen Browsern, einschließlich IE5 und IE6, umgehen zu können, prüfen Sie bitte, ob der Browser das XMLHttpRequest-Objekt unterstützt. Erstellt, sofern unterstützt, ein XMLHttpRequest-Objekt. Wenn es nicht unterstützt wird, erstellen Sie ein ActiveXObject:

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. Bereiten Sie die Anfrage vor

Initialisieren Sie das XMLHttpRequest-Objekt und Akzeptieren Sie drei Parameter:

xhr.open(method,url,async);

Der erste Parameter stellt eine Zeichenfolge vom Anforderungstyp dar und sein Wert kann GET oder POST sein.

GET-Anfrage:

xhr.open("GET",demo.php?name=tsrot&age=24,true);

POST-Anfrage:

xhr.open("POST",demo.php,true);

Der zweite Parameter ist die URL, an die die Anfrage gesendet werden soll.

Der dritte Parameter ist wahr oder falsch und gibt an, ob die Anforderung im asynchronen oder synchronen Modus ausgegeben wird. (Standard ist „true“, „false“ wird im Allgemeinen nicht empfohlen)

false: Im synchronen Modus ausgegebene Anforderungen unterbrechen die Ausführung des gesamten Javascript-Codes, bis der Server eine Antwort erhält. Wenn der Browser eine Verbindung zum Netzwerk herstellt oder eine herunterlädt Datei Wenn etwas schief geht, bleibt die Seite für immer hängen.
true: Eine im asynchronen Modus ausgegebene Anfrage. Während das Anfrageobjekt Daten sendet und empfängt, kann der Browser weiterhin die Seite laden und andere Javascript-Codes ausführen

3. Senden Sie eine Anfrage

xhr.send() ;

Unter normalen Umständen sind die mit Ajax übermittelten Parameter meist einfache Zeichenfolgen. Sie können die zu übermittelnden Parameter direkt mit der GET-Methode in den URL-Parameter der offenen Methode schreiben Zu diesem Zeitpunkt ist der Parameter der Sendemethode null oder leer.

GET-Anfrage:

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

POST-Anfrage:

Wenn Sie Daten wie ein HTML-Formular POSTEN müssen, Bitte verwenden Sie setRequestHeader(), um HTTP-Header hinzuzufügen. Geben Sie dann in der send()-Methode die Daten an, die Sie senden möchten:

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("name="+userName+"&age="+userAge);

4. Verarbeiten Sie die Antwort

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}

onreadystatechange event:

Wenn eine Anfrage an den Server gesendet wird, müssen wir einige antwortbasierte Aufgaben ausführen. Immer wenn sich readyState ändert, wird das Ereignis onreadystatechange ausgelöst.

readyState-Attribut:

0: Das Objekt wurde erstellt, aber die open()-Methode wurde noch nicht aufgerufen.

1: Die open()-Methode wurde aufgerufen, aber die Anfrage wurde noch nicht gesendet.

2: Die Anfrage wurde gesendet, die Header und der Status wurden empfangen und sind verfügbar.

3: Antwort vom Server erhalten.

4: Nach Erhalt der Anfragedaten bedeutet dies, dass die Anfrage abgeschlossen wurde.

Statusattribut:

200: „OK“

404: Seite nicht gefunden

responseText: Antwortdaten in Zeichenfolgenform abrufen

responseXML: Antwortdaten im XML-Format erhalten

Der Rückgabewert ist im Allgemeinen ein JSON-String, der mit JSON.parse(xhr.responseText) in ein JSON-Objekt konvertiert werden kann.

5. Vollständiges Beispiel

demo.html

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
xhr.open("GET","./data.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText).name);
}
}

data.json

{
"name":"tsrot",
"age":24
}

3. Ajax-Anwendungsszenarien

Szenario 1. Datenüberprüfung

Szenario 2. Abrufen von Daten auf Abruf

Szenario 3. Seite automatisch aktualisieren

4. Vor- und Nachteile von Ajax

Vorteile:

1. Keine Seitenaktualisierung, gute Benutzererfahrung.

2. Asynchrone Kommunikation, schnellere Reaktionsfähigkeit.

3. Reduzieren Sie redundante Anfragen und reduzieren Sie die Serverlast

4. Basierend auf standardisierter und weithin unterstützter Technologie ist es nicht erforderlich, Plug-Ins oder Applets herunterzuladen.

Nachteile:

1. Ajax deaktiviert die Zurück-Schaltfläche, wodurch der Zurück-Mechanismus des Browsers zerstört wird.

2. Es gibt bestimmte Sicherheitsprobleme.

3. Die Unterstützung für Suchmaschinen ist relativ schwach.

4. Der Ausnahmemechanismus des Programms wurde zerstört.

5. Der Zugriff ist nicht direkt über die URL möglich.