Heim Web-Frontend js-Tutorial 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)

Mar 30, 2018 pm 04:54 PM
ajax javascript jsonp

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://api.example.com/detail.html Das Protokoll und der Domänenname 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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So beheben Sie den 403-Fehler, der bei einer jQuery-AJAX-Anfrage auftritt So beheben Sie den 403-Fehler, der bei einer jQuery-AJAX-Anfrage auftritt Feb 20, 2024 am 10:07 AM

Titel: Methoden und Codebeispiele zur Behebung von 403-Fehlern in jQuery-AJAX-Anfragen. Der 403-Fehler bezieht sich auf eine Anfrage, dass der Server den Zugriff auf eine Ressource verbietet. Dieser Fehler tritt normalerweise auf, weil der Anfrage die Berechtigungen fehlen oder sie vom Server abgelehnt wird. Wenn Sie jQueryAJAX-Anfragen stellen, stoßen Sie manchmal auf diese Situation. In diesem Artikel wird erläutert, wie dieses Problem gelöst werden kann, und es werden Codebeispiele bereitgestellt. Lösung: Berechtigungen prüfen: Stellen Sie zunächst sicher, dass die angeforderte URL-Adresse korrekt ist und stellen Sie sicher, dass Sie über ausreichende Berechtigungen für den Zugriff auf die Ressource verfügen.

So beheben Sie den Fehler 403 der jQuery AJAX-Anfrage So beheben Sie den Fehler 403 der jQuery AJAX-Anfrage Feb 19, 2024 pm 05:55 PM

jQuery ist eine beliebte JavaScript-Bibliothek zur Vereinfachung der clientseitigen Entwicklung. AJAX ist eine Technologie, die asynchrone Anfragen sendet und mit dem Server interagiert, ohne die gesamte Webseite neu zu laden. Wenn Sie jedoch jQuery zum Senden von AJAX-Anfragen verwenden, treten manchmal 403-Fehler auf. Bei 403-Fehlern handelt es sich in der Regel um vom Server verweigerte Zugriffsfehler, möglicherweise aufgrund von Sicherheitsrichtlinien oder Berechtigungsproblemen. In diesem Artikel besprechen wir, wie Sie bei einer jQueryAJAX-Anfrage den Fehler 403 beheben können

PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine Jun 02, 2024 pm 08:39 PM

Erstellen Sie eine Engine für Autovervollständigungsvorschläge mit PHP und Ajax: Serverseitiges Skript: Verarbeitet Ajax-Anfragen und gibt Vorschläge zurück (autocomplete.php). Client-Skript: Ajax-Anfrage senden und Vorschläge anzeigen (autocomplete.js). Praktischer Fall: Fügen Sie ein Skript in die HTML-Seite ein und geben Sie die Kennung des Sucheingabeelements an.

Wie kann das Problem des jQuery AJAX-Fehlers 403 gelöst werden? Wie kann das Problem des jQuery AJAX-Fehlers 403 gelöst werden? Feb 23, 2024 pm 04:27 PM

Wie kann das Problem des jQueryAJAX-Fehlers 403 gelöst werden? Bei der Entwicklung von Webanwendungen wird jQuery häufig zum Senden asynchroner Anfragen verwendet. Allerdings kann bei der Verwendung von jQueryAJAX manchmal der Fehlercode 403 auftreten, der darauf hinweist, dass der Zugriff vom Server verboten ist. Dies wird normalerweise durch serverseitige Sicherheitseinstellungen verursacht, es gibt jedoch Möglichkeiten, das Problem zu beheben. In diesem Artikel wird erläutert, wie Sie das Problem des jQueryAJAX-Fehlers 403 lösen können, und es werden spezifische Codebeispiele bereitgestellt. 1. machen

Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Wie erhalte ich Variablen aus der PHP-Methode mit Ajax? Mar 09, 2024 pm 05:36 PM

Die Verwendung von Ajax zum Abrufen von Variablen aus PHP-Methoden ist ein häufiges Szenario in der Webentwicklung. Durch Ajax kann die Seite dynamisch abgerufen werden, ohne dass die Daten aktualisiert werden müssen. In diesem Artikel stellen wir vor, wie man Ajax verwendet, um Variablen aus PHP-Methoden abzurufen, und stellen spezifische Codebeispiele bereit. Zuerst müssen wir eine PHP-Datei schreiben, um die Ajax-Anfrage zu verarbeiten und die erforderlichen Variablen zurückzugeben. Hier ist ein Beispielcode für eine einfache PHP-Datei getData.php:

PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte Jun 06, 2024 pm 01:12 PM

Ajax (Asynchronous JavaScript and XML) ermöglicht das Hinzufügen dynamischer Inhalte, ohne die Seite neu laden zu müssen. Mit PHP und Ajax können Sie eine Produktliste dynamisch laden: HTML erstellt eine Seite mit einem Containerelement und die Ajax-Anfrage fügt die Daten nach dem Laden zum Element hinzu. JavaScript verwendet Ajax, um über XMLHttpRequest eine Anfrage an den Server zu senden, um Produktdaten im JSON-Format vom Server abzurufen. PHP nutzt MySQL, um Produktdaten aus der Datenbank abzufragen und in das JSON-Format zu kodieren. JavaScript analysiert die JSON-Daten und zeigt sie im Seitencontainer an. Durch Klicken auf die Schaltfläche wird eine Ajax-Anfrage zum Laden der Produktliste ausgelöst.

PHP und Ajax: Möglichkeiten zur Verbesserung der Ajax-Sicherheit PHP und Ajax: Möglichkeiten zur Verbesserung der Ajax-Sicherheit Jun 01, 2024 am 09:34 AM

Um die Ajax-Sicherheit zu verbessern, gibt es mehrere Methoden: CSRF-Schutz: Generieren Sie ein Token und senden Sie es an den Client. Fügen Sie es der Serverseite in der Anforderung zur Überprüfung hinzu. XSS-Schutz: Verwenden Sie htmlspecialchars(), um Eingaben zu filtern und das Einschleusen böswilliger Skripte zu verhindern. Content-Security-Policy-Header: Beschränken Sie das Laden schädlicher Ressourcen und geben Sie die Quellen an, aus denen Skripte und Stylesheets geladen werden dürfen. Validieren Sie serverseitige Eingaben: Validieren Sie von Ajax-Anfragen empfangene Eingaben, um zu verhindern, dass Angreifer Eingabeschwachstellen ausnutzen. Verwenden Sie sichere Ajax-Bibliotheken: Profitieren Sie von automatischen CSRF-Schutzmodulen, die von Bibliotheken wie jQuery bereitgestellt werden.

Asynchroner Datenaustausch mithilfe von Ajax-Funktionen Asynchroner Datenaustausch mithilfe von Ajax-Funktionen Jan 26, 2024 am 09:41 AM

So verwenden Sie Ajax-Funktionen, um eine asynchrone Dateninteraktion zu erreichen. Mit der Entwicklung der Internet- und Webtechnologie ist die Dateninteraktion zwischen dem Front-End und dem Back-End sehr wichtig geworden. Herkömmliche Dateninteraktionsmethoden wie Seitenaktualisierung und Formularübermittlung können die Benutzeranforderungen nicht mehr erfüllen. Ajax (Asynchronous JavaScript and XML) ist zu einem wichtigen Werkzeug für die asynchrone Dateninteraktion geworden. Ajax ermöglicht dem Web die Verwendung von JavaScript und dem XMLHttpRequest-Objekt

See all articles