Teilen Sie Tutorials zu Ajax- und JSONP-Beispielen

1.ajax

Asynchrones JavaScript und XML (Ajax) treiben das Neue voran Generation Eine Schlüsseltechnologie für Websites (im Volksmund als Web 2.0-Sites bekannt). Ajax ermöglicht den Datenabruf im Hintergrund, ohne die Anzeige und das Verhalten der Webanwendung zu beeinträchtigen. Rufen Sie Daten mithilfe der XMLHttpRequest-Funktion ab, einer API, die es clientseitigem JavaScript ermöglicht, über HTTP eine Verbindung zu einem Remote-Server herzustellen. Ajax ist auch die treibende Kraft hinter vielen Mashups, die Inhalte von mehreren Orten in einer einzigen Webanwendung integrieren.

Aufgrund von Browsereinschränkungen ermöglicht diese Methode jedoch keine domänenübergreifende Kommunikation. Wenn Sie versuchen, Daten von einer anderen Domäne anzufordern, tritt ein Sicherheitsfehler auf. Diese Sicherheitsfehler können vermieden werden, wenn Sie den Remote-Server steuern können, auf dem sich die Daten befinden, und wenn jede Anfrage an dieselbe Domäne geht. Doch was nützt eine Webanwendung, wenn sie einfach auf dem eigenen Server bleibt? Was ist, wenn Sie Daten von mehreren Drittanbieterservern sammeln müssen? A: Ajax ist js, das Daten über eine Website lädt. Dieser Vorgang ist für den Benutzer normalerweise unsichtbar.

B. Bei herkömmlichen Webseiten (Ajax ist nicht anwendbar): Wenn der Inhalt aktualisiert werden muss, muss die gesamte Webseite neu geladen werden.

3. Über Synchronisation und Asynchronität

Bei der Synchronisation muss auf das Rückgabeergebnis gewartet werden, bevor fortgefahren wird, bei der Asynchronität ist dies nicht der Fall Im Allgemeinen ist es notwendig, auf asynchrone Ergebnisse zu warten.

Synchronisation ist eine Warteschlange in einer geraden Linie, asynchron ist keine Warteschlange, jeder geht seinen eigenen Weg

Zum Beispiel: 　Frage zum Warenkorb hinzufügen. Bei Verwendung der synchronen Methode müssen Sie jedes Mal, wenn Sie einen Artikel zum Warenkorb hinzufügen, warten, bis die Seite neu geladen wird, bevor Sie andere Vorgänge ausführen.

Mit der asynchronen Methode müssen Sie nur zuhören und andere Vorgänge ausführen, ohne zu warten. Relativ gesehen hat das asynchrone Laden größere Vorteile, und die Vorteile von Ajax sind daraus ersichtlich.

4. Ajax-Objekt erstellen (und kompatibel)

　

(1)XMLHttpRequest-Objekt erstellen

　(2) Öffnen Sie den Link mit dem Server

　open(method,url,asyn)

Parameter:

Methode: Zeichenfolge, der angeforderte Typ get oder post

URL: Zeichenfolge, der Speicherort der Datei auf der Server

asyn: Boolean, true (asynchron) oder false (synchron)

Die Synchronisierung muss auf das Rückgabeergebnis warten, bevor sie fortgesetzt wird, asynchron muss nicht warten

　(3) An den Server senden

　xhr.send() sendet die Anfrage an den Server (Anfrage abrufen). )

xhr. send(string) wird nur für Post-Anfragen verwendet

(4) Erkennen Sie den Anforderungsstatus des Servers

onreadystatechange-Ereignis (entsprechendes bereit status )

Die Attribute readyState und status speichern den Status von XMLHttpRequest

Wenn sich readyState ändert, wird das Ereignis onreadystatechange ausgelöst

Der readyState ändert sich von 0 auf 4

0: Die Anfrage ist nicht initialisiert

1: Der Server Verbindung wurde hergestellt

2: Die Anfrage wurde empfangen

3. Die Anfrage wird bearbeitet

4. Die Anfrage wurde abgeschlossen

Status ist gleich 200: „OK“

Gleich 404: Seite nicht gefunden

Wenn readyStatus 4 ist und wenn der Status 200 ist, bedeutet dies, dass die Antwort bereit ist.

5. Die Bedeutung des XMLHttpRequest-Objekts

Um eine Antwort vom Server zu erhalten, verwenden Sie bitte XMLHttpRequest Objekt:

ResponseText oder ResponseXML-Attribut

ResponseText ruft die Antwortdaten in Zeichenfolgenform ab

ResponseText Erhalten Sie Antwortdaten in Form von XML

Wenn die Antwort vom Server nicht XML ist, können Sie das ResponseText-Attribut „ResponseText“ verwenden, um die Antwort in Form einer Zeichenfolge zurückzugeben Es sieht so aus: Div.innerHTML = xhr.responseText;

6 Zum Unterschied zwischen der Ajax-Anfragemethode get und post:

　GET: Wird häufiger verwendet und bietet eine höhere Leistung. Das Senden von Daten im Klartext ist nicht so sicher wie bei POST. Die Daten werden über die URL übertragen bestimmte Längenbegrenzung. ,

POST: relativ selten verwendet; die Leistung ist nur etwas sicherer als get; >7. Über Cross-Domain

　

Cross-Domain kann einfach als Zugriff auf einen anderen Domainnamen verstanden werden ein Domänenname Domänenname, aus Sicherheitsgründen erlauben Browser dies nicht; Hinweis: Das src-Attribut von img, script, iframe und anderen Elementen kann Ressourcen direkt über Domänen hinweg anfordern.

8. Ajax domänenübergreifend

1. Sie können den Server auf andere Websites übertragen um Inhalte abzurufen und an die Seite zurückzugeben

2. Geben Sie dem Ajax der Seite eine URL, und Ajax übergibt die URL an den Server, und der Server greift auf die Adresse zu.

9. jsonp domänenübergreifend

jsonp nutzt die domänenübergreifende Fähigkeit von Skript-Tags, um Ressourcen anzufordern. Offensichtlich ist der Zweck immer noch JSON, und es handelt sich um eine domänenübergreifende Erfassung. Verwenden Sie js, um ein Skript-Tag zu erstellen, weisen Sie die URL von JSON dem src-Attribut des Skripts zu, fügen Sie das Skript in das DOM ein und lassen Sie es vom Browser abrufen Callback({"name="jack"}), Callback ist eine auf der Seite vorhandene Callback-Methode. Im Allgemeinen muss die Callback-Methode den Anweisungen des Servers entsprechen.

Das obige ist der detaillierte Inhalt vonTeilen Sie Tutorials zu Ajax- und JSONP-Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!