So fordern Sie Daten domänenübergreifend mit dem JQuery-Frontend an

In der Frontend-Entwicklung ist es oft notwendig, Daten von verschiedenen Servern anzufordern. Aufgrund der Einschränkungen der Same-Origin-Richtlinie können Daten jedoch nicht direkt domänenübergreifend angefordert werden. Um dieses Problem zu lösen, können wir die von jQuery bereitgestellte Methode verwenden.

1. Was sind domänenübergreifende Anforderungsdaten? Ein anderer Server sendet eine Anforderung zum Abrufen der Daten. Aus Sicherheitsgründen beschränken Browser Anfragen von Servern unterschiedlicher Herkunft. Gleicher Ursprung bedeutet, dass Protokoll, Port und Hostname der beiden Seiten identisch sind. Eine häufige Situation für die domänenübergreifende Anforderung von Daten besteht darin, Daten von einem anderen Server über Ajax auf der Front-End-Seite anzufordern.

Warum müssen Sie Daten domänenübergreifend anfordern?:

2. Getrennte Front-End- und Back-End-Logik: Front-End und Back-End Die Endentwicklung wird häufig von zwei verschiedenen Teams durchgeführt und erfordert unterschiedliche Server, um ihre jeweiligen Codes auszuführen. Durch die domänenübergreifende Abfrage von Daten kann die logische Trennung zwischen Frontend und Backend deutlicher gemacht werden.

Ressourcen sparen: Einige kommerzielle Dienste stellen möglicherweise nur API-Schnittstellen und keine Front-End-Ressourcen bereit. Wenn Sie den Dienst zu diesem Zeitpunkt aufrufen müssen, müssen Sie Daten domänenübergreifend anfordern.

Mehrere Front-End-Server teilen Daten: Manchmal müssen verschiedene Front-End-Server auf denselben Back-End-Dienst zugreifen, und in diesem Fall sind domänenübergreifende Datenanforderungen erforderlich.

• So lösen Sie domänenübergreifende Anforderungsdaten
• Aufgrund der Einschränkungen der Same-Origin-Richtlinie können Sie dies nicht direkt tun Daten domänenübergreifend anfordern, aber wir können die folgende Lösung verwenden:

3. JSONP: Obwohl JavaScript nativ keine domänenübergreifenden Anforderungen unterstützt, können Sie das src-Attribut des <script> Tag zum Anfordern von Daten von anderen Servern. Diese Methode ist JSONP. Allerdings erfordert diese Methode, dass der Server die Rückgabe von Daten im JSONP-Format unterstützt und ist anfällig für XSS-Angriffe. </script>

CORS: Cross-Origin Resource Sharing (CORS) ist eine Browsertechnologie, die es dem Server ermöglicht, dem Browser über HTTP-Header mitzuteilen, auf welche Domänen zugegriffen werden darf. Diese Methode erfordert jedoch serverseitige Unterstützung.

Proxy: Der Front-End-Server sendet Anforderungen über einen Back-End-Server an andere Server und gibt die Ergebnisse dann an das Front-End zurück. Diese Methode erfordert jedoch, dass Front-End-Entwickler die Back-End-Servertechnologie verstehen, und der Server-Overhead ist groß.

• Verwenden von jQuery zum Anfordern von Daten über Domänen hinweg
• jQuery bietet einige Methoden, die uns beim Anfordern von Daten über Domänen hinweg helfen: #🎜 🎜 #

$.ajax()-Methode: Die am häufigsten verwendete Ajax-Methode in jQuery. Sie kann das Datenformat angeben, das der Server empfangen muss, indem das Attribut contentType und das Attribut dataType zur Angabe der Daten festgelegt werden vom Server zurückgegebenes Format.
4. $.getJSON()-Methode: Diese Methode ist eine einfache Kapselung der $.ajax()-Methode, die zum Abrufen von Daten im JSON-Format über GET-Anfragen verwendet wird.

$.getScript()-Methode: Diese Methode ist eine einfache Kapselung der $.ajax()-Methode, die zum Abrufen von JavaScript-Dateien über GET-Anfragen verwendet wird.

$.postMessage() Methode: Diese Methode wurde in HTML5 für die sichere domänenübergreifende Kommunikation zwischen mehreren Fenstern/Seiten eingeführt.
• Der spezifische Code lautet wie folgt:

$.ajax({
   url: 'http://example.com/test.php',
   dataType: 'jsonp',
   success: function(data){
      console.log(data);
   },
   error: function(){
      console.log("error");
   }
});

$.getJSON('http://example.com/test.php', function(data){
  console.log(data);
});

$.getScript('http://example.com/test.js', function(){
  console.log("script loaded");
});

window.postMessage("message", "http://example.com");

Kurz gesagt, bei der Verwendung von jQuery zum Anfordern von Daten über Domänen hinweg müssen Sie die Anforderungsheader festlegen , Parameter und Rückrufe usw., um die Zieldaten erfolgreich zu erhalten.

Fazit

Domänenübergreifende Datenanfragen sind eine sehr häufige Situation in der Front-End-Entwicklung. Obwohl die Einschränkungen der Same-Origin-Richtlinie die domänenübergreifende Anforderung von Daten erschweren, lässt sich das Problem mit Methoden wie JSONP, CORS und Proxys lösen. Durch die von jQuery bereitgestellten Methoden kann der Prozess der domänenübergreifenden Datenanforderung einfacher und effizienter gestaltet werden.

Das obige ist der detaillierte Inhalt vonSo fordern Sie Daten domänenübergreifend mit dem JQuery-Frontend an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!