Heim > Artikel > Web-Frontend > Detaillierte Erklärung der domänenübergreifenden Ajax- und JSONP-Funktion (mit Code)
Detaillierte Erklärung der domänenübergreifenden Ajax- und JSONP-Funktion (mit Code)
- php中世界最好的语言Original
- 2018-03-30 16:54:301402Durchsuche
Dieses Mal bringe ich Ihnen eine detaillierte Erklärung der domänenübergreifenden Implementierung von Ajax und JSONP (mit Code). Hier sind tatsächliche Fälle sehen.
Warum gibt es domänenübergreifende Probleme? - Weil es eine Same-Origin-Richtlinie gibtDie Same-Origin-Richtlinie ist eine Sicherheitsrichtlinie des Browsers. Die sogenannte Same-Origin-Richtlinie bezieht sich auf das Protokoll, den Domänennamen und den Port in der angeforderten URL-Adresse, solange einer der Unterschiede domänenübergreifend ist
Die Same-Origin-Richtlinie dient hauptsächlich dazu, die Sicherheit des Browsers zu gewährleisten
Unter der Same-Origin-Richtlinie , der Browser erlaubt Ajax nicht, Serverdaten über Domänen hinweg abzurufen
http://www.example.com/detail.html
Domänenübergreifende Anfrage:
- http://api example.com/detail.html Der Domainname ist anders
- http://www.example.com :8080/detail.html Der Port ist unterschiedlich
- http://api.example.com:8080/detail.html Der Domänenname und der Port sind unterschiedlich
- https://www.example.com:8080/ detail.html Verschiedene Ports und Protokolle
ajaxGrundlegende KonzepteUm dieses Konzept zu verstehen Sie müssen zunächst die synchrone Interaktion und die asynchrone Interaktion kennen
- Synchronisierte Interaktion: Client-Browsing Der Server sendet eine Anfrage an den Server und der Server gibt eine Seite zurück. Die zurückgegebene Seite überschreibt die vorherige Wir nennen diese Interaktionsmethode synchrone Interaktion
- Asynchrone Interaktion: Der Browser sendet eine Anfrage an den Server und der Server gibt die zurückgegebenen Daten nicht zurück Die vorherige Seite. Wir nennen diese Interaktionsmethode asynchrone Interaktion
- Ajax Hauptanwendungsszenarien: Dynamische Dateninteraktion mit dem Server kann ohne Aktualisierung der Seite durchgeführt werden
Prinzip der Interaktion
- Prinzip der synchronen Interaktion: Wie senden wir im Browser eine Anfrage an den Server? Sie können auf einen Hyperlink klicken, ein Formular absenden und eine Adresse in die Adressleiste des Browsers eingeben. Dies alles sendet Anfragen an den Server. Tatsächlich hilft uns der Browser dabei, Anfragen an den Server zu senden
- Das Prinzip der asynchronen Interaktion: JavaScript stellt uns eine neue API-Schnittstelle zur Verfügung, die uns beim Senden von HTTP-Anfragen hilft. Das XMLHttpRequest-Objekt hilft uns beim Senden von Anfragen
- Alle unsere interaktiven Vorgänge können Dies kann über dieses Objekt erfolgen. Füllen Sie die Anforderung aus, senden Sie sie und akzeptieren Sie die Daten vom Server
Spezifische Anwendungsszenarien von Ajax
- Die Rezeption kann XMLHttpRequest an den Server übergeben. Senden Sie eine Anfrage, akzeptieren Sie dann die vom Server zurückgegebenen Daten über das XMLHttpRequest-Objekt und schreiben Sie die Daten schließlich über Dom-Operationen auf die Seite
- Ajax: Kann zur Überprüfung von Formulareingabespezifikationen verwendet werden.
- Ajax: Kann auch zur
- Leistungsoptimierung
verwendet werden groß und es unmöglich ist, alles auf einmal zu laden, kann ein rollierendes Laden implementiert werden
Vier Schritte der XMLHttpRequest-Interaktion 1. Instanziieren Sie das XMLHttpRequest-Objekt
2. Wenn Sie mit dem Server interagieren möchten, müssen Sie Folgendes tun: Der Server öffnet eine Verbindung
3. Senden Sie Daten an den Server und Parameterdaten an Der Server
4. Akzeptieren Sie die vom Server zurückgegebenen Daten, wenn Sie zum Client zurückkehren. Sie können Serverstatusänderungen überwachen, um den gesamten Interaktionsprozess besser zu steuern
Ajax Cross-Domain
Cross-Domain: Angenommen, ich besuche eine Site, der Hintergrund gibt mir eine Seite zurück und ich möchte dann auf die Ressourcen von Site B zugreifen auf dieser Seite von Website A. Dies ist ein domänenübergreifender Effekt. Für domänenübergreifende Browser gelten Sicherheitsbeschränkungen Domänenübergreifende Lösung: JSONP-Methode Der vollständige Name von JSONP ist JSON with Padding, das auf dem JSON-Format basiert und zur Lösung übergreifender Lösungen generiert wird. Domain-Ressourcen-Lösung. Das Grundprinzip seiner Implementierung besteht darin, das <script></script>-Element-Tag in HTML zu verwenden, um die JSON-Datei remote aufzurufen, um eine Datenübertragung zu erreichen. Wenn Sie die JSON-Daten (getUsers.JSON) abrufen möchten, die in b.com unter der Domäne a.com vorhanden sind: Das wesentliche Prinzip von JSONP zur Lösung domänenübergreifender Probleme: Weil Browser Same-Origin-Einschränkungen haben , verschiedene Sites können nicht miteinander kommunizieren, aber manchmal möchten wir einfach Daten von anderen Sites abrufen, z. B. indem wir Wettervorhersagedaten hinzufügen, wo wir schnelle Daten erhalten möchten. Was sollen wir also tun? Prinzip: Das