So implementieren Sie die asynchrone Aktualisierung von Webseiten mit Ajax

Dieses Mal zeige ich Ihnen, wie Ajax die asynchrone Aktualisierung von Webseiten implementiert. Welche Vorsichtsmaßnahmen es gibt, um die asynchrone Aktualisierung von Webseiten zu implementieren? Hier sind praktische Fälle.

1: Das Konzept von Ajax

Vollständiger Name: Asynchrones Javascript und XML

AJAX ist keine neue Programmiersprache, sondern eine schnellere, bessere und interaktivere WEB-Anwendungstechnologie, die um 1998 eingesetzt wurde. Über AJAX kann Ihr JS über das XMLHttpRequest-Objekt von JS direkt mit dem Server kommunizieren, ohne die Seite neu laden zu müssen. Dadurch kann der Server die gewünschten Daten anstelle der gesamten Seite anfordern. Der Kern von AJAX ist das XMLHttpRequest-Objekt von JS. Das xhr-Objekt wurde erstmals in IE5 eingeführt und ist ein Objekt, das asynchrone Anforderungen unterstützt.

2: Vorteile von Ajax

Daten aktualisieren, ohne sie zu aktualisieren.

Asynchron mit dem Server kommunizieren.

Weitgehend unterstützt, basierend auf Standards.

Trennung von Front-End und Backend.

Sparen Sie Bandbreite.

3: Schritte zum Schreiben

1. Erstellen Sie ein XMLHttpRequest-Objekt.

Alle modernen Browser (IE7+, Chrome, Firefox, Opera, Safari) verfügen über integrierte XMLHttpRequest-Objekte. Aber IE5 und 6 verwenden ActiveXObject object.

function getAjax() {
var  xmlhttp = null;
if(window.ActiveXObject){
         xmlhttp = new ActiveXObject(’Microsoft.XMLHTTP’);
} else if(window.XMLHttpRequest){
         xmlhttp = new XMLHttpRequest();
}
return  xmlhttp;
}

2. Öffnen Sie die Verbindung mit dem Server und geben Sie die Sendemethode, URL, Berechtigungen usw. an.

Methode öffnen: Erstellen Sie eine neue HTTP-Anfrage und geben Sie die Methode, URL und Verifizierungsinformationen dieser Anfrage an.

xhr.open(Typ, URL, asynchron, Benutzer, Passwort);

Typ: HTTP-Anfragemethode, GET, POST usw. Groß-/Kleinschreibung wird nicht beachtet.

URL: Adresse anfordern.

async: Boolescher Wert, ob die Anfrage asynchron ist. Der Standardwert ist wahr. Wenn „true“, wird die durch das Attribut „onreadystatechange“ angegebene Callback-Funktion aufgerufen, wenn sich der Status ändert. (Optional)

Benutzer: Wenn der Server eine Verifizierung erfordert, geben Sie hier den Benutzernamen an. Wenn nicht angegeben, wird ein Verifizierungsfenster angezeigt, wenn der Server eine Verifizierung erfordert. (Selten verwendet, nur verstanden)

Passwort: Der Passwortteil der Verifizierungsinformationen. Wenn der Benutzername leer ist, wird dieser Wert ignoriert. (Verwenden Sie weniger, verstehen Sie es einfach)

Hinweis:

In AJAX simulieren wir tatsächlich normale Formularübermittlungsdaten. Ein normales Formular sendet das Feld „Content-Type“ beim Posten von Daten, daher müssen wir den Wert dieses Felds als application/x-www-form-urlencoded in AJAX angeben. Und die Feldnamen und Werte werden kodiert und versendet. Verwenden Sie setRequestHeader: Geben Sie individuell einen bestimmten HTTP-Header der Anfrage an.

Hinweis: Daten sollten mit der Funktion encodeURIComponent() codiert werden.

3. Anweisungen senden.

send(): Senden Sie eine Anfrage an den HTTP-Server und erhalten Sie eine Antwort.

Der synchrone oder asynchrone Modus dieser Methode hängt vom async-Parameter in der open-Methode ab. Wenn async true ist, gibt diese Methode sofort zurück. Wenn er false ist, wartet diese Methode auf den Abschluss der Anforderung Zeitüberschreitung vor der Rückkehr.

xhr.send(body);

body: Die über diese Anfrage gesendeten Daten. Setzen Sie einfach die GET-Anfrage auf null.

4. Warten Sie auf die vom Server zurückgegebenen Verarbeitungsergebnisse und empfangen Sie diese.

5. Kundenempfang.

6. Geben Sie das XMLHttpRequest-Objekt frei.

4: Rückruffunktion

Geben Sie die Rückruffunktion Ereignisverarbeitung an, wenn sich das Attribut „readystate“ über das Attribut „onreadystatechange“ ändert.

xhr.onreadystatechange = function(){}

readyState-Attribut: Gibt den aktuellen Status der Anfrage zurück.

Status:

0: Das Objekt wurde erstellt und nicht initialisiert (die Open-Methode wurde nicht aufgerufen).

1: Das Objekt wurde erstellt und die Sendemethode wurde noch nicht aufgerufen.

2: Die Sendemethode wurde aufgerufen. Der aktuelle Status und der HTTP-Status sind jedoch unbekannt.

3: Beginnen Sie mit dem Empfangen von Daten. Da die Antwort und der HTTP-Header unvollständig sind, treten beim Abrufen einiger Daten über ResponseBody und ResponseText Fehler auf.

4: Der Datenempfang ist abgeschlossen. Zu diesem Zeitpunkt können die vollständigen Antwortdaten über ResponseBody und ResponseText abgerufen werden.

Statusattribut: Gibt den Statuscode der aktuellen Anfrage zurück.

200 OK: Das angeforderte Dokument wurde gefunden und korrekt zurückgegeben.

304 Nicht geändert: Sie verfügen über eine lokal zwischengespeicherte Kopie desselben serverseitigen Inhalts.

403 Verboten: Der Anforderer verfügt nicht über die entsprechenden Berechtigungen für das angeforderte Dokument.

404 Nicht gefunden: Das angeforderte Dokument wurde nicht gefunden.

statusText-Attribut: Gibt die Antwortzeileninformationen der aktuellen Anfrage zurück.

responseXML-Attribut: Formatieren Sie die Antwortinformationen als XML-Dokumentobjekt und geben Sie sie zurück.

responseText-Attribut: Gibt die Antwortinformationen als Zeichenfolge zurück.

5: JS-Parsing von JSON

JSON-Einführung: (im JS-Artikel erwähnt)

Definition: Javascript Object Notation, ein leichtes textbasiertes Datenaustauschformat, das einfach zu verwenden ist Menschen das Lesen und Schreiben erleichtern und kann auch die Netzwerkübertragungsraten erhöhen.

Zwei neue Methoden in ES5 hinzugefügt:

JSON.parse: Konvertieren Sie JSON-String-Daten in JSON-Objekte.

JSON.stringify: JSON-Objekt in JSON-String konvertieren.

Hinweis: 1. Browserunterstützung: IE8+.

2. Der Schlüssel- oder Zeichenfolgenwert in der JSON-Formatzeichenfolge muss in doppelte Anführungszeichen gesetzt werden.

6: Teilweise Datenaktualisierung

Bearbeiten Sie den entsprechenden DOM-Knoten (z. B. den Paging-Effekt der Kommentarliste)

7: Anwendung der Ereignisdelegierung

Ereignisdelegation: Verwenden Sie den Bubbling-Mechanismus, um untergeordnete Elementereignisse zur Ausführung an das übergeordnete Element zu delegieren (z. B. entfernen einige Nachrichten-Websites Nachrichten, die einigen Benutzern nicht gefallen)

8: Trennung von Front-End und Back-End

Das Backend ist nur für die Datenausgabe und die Verarbeitung der Geschäftslogik verantwortlich, während das Frontend für die interaktive Logik und die Schnittstellenanzeige verantwortlich ist. Einfach ausgedrückt: Auf der statischen Front-End-Seite gibt es keinen Hintergrundprogrammcode, und der Hintergrund gibt Daten ohne HTML-Tags aus.

Die Front-End- und Back-End-Trennung basiert auf Ajax, um die Dateninteraktion zu realisieren. (Die spezifische Trennung der Funktionsverpackung wird in der Demo angegeben)

Ich glaube, dass Sie die Methode nach dem Lesen dieser Fälle beherrschen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So lösen Sie das Problem der abnormalen Anzeige, nachdem layer.photos() die Bildadresse asynchron geändert hat

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die asynchrone Aktualisierung von Webseiten mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!