Beispielfreigabe für eine domänenübergreifende perfekte Ajax-Lösung

小云云
Freigeben: 2023-03-19 12:02:01
Original
1523 Leute haben es durchsucht

Das Unternehmen möchte eine Veranstaltungsseite erstellen, dabei alle Schnittstellen entdecken und domänenübergreifend Ajax-Anfragen stellen. Hier finden Sie eine kurze Einführung in Cross-Domain und verschiedene Lösungen.

Aufgrund der Einschränkungen der vom Browser implementierten Same-Origin-Richtlinie darf XmlHttpRequest nur Ressourcen von der aktuellen Quelle (Domänenname, Protokoll, Port) anfordern, sodass AJAX nicht domänenübergreifend sein darf. Hier sind drei häufig verwendete Methoden:

1. JSONP-Zugriff

JSONP (JSON mit Padding) ist ein inoffizielles Protokoll, das die Integration von Skript-Tags auf der Serverseite und die Rückgabe an den Client ermöglicht. , domänenübergreifender Zugriff wird durch Javascript-Callback erreicht;

Implementierungsmethode

 1)

<script type="text/javascript"> 
  $.ajax({ 
    url:url, 
    dataType:'jsonp', 
    data:'', 
    jsonp:'callback', 
    success:function(result) { 
    }, 
  }); 
</script>
Nach dem Login kopieren

 2)

$.getJSON(url+"?callback=?", 
  function(result) { 
  });
Nach dem Login kopieren

Hinweis: 1 】 jsonp kann nur mit get angefordert werden. Selbst wenn Sie die Post-Anfrage verwenden, wird sie automatisch in Post konvertiert.

 2】 JSONP kann nicht nur zum Abrufen von Daten verwendet werden Daten übermitteln.

2. Damain-Methode

Wenn die Hauptdomäne dieselbe und die Unterdomänen unterschiedlich sind, können Sie diese Methode verwenden, um den Verweis auf den Domänennamen so zu ändern, dass sie auf denselben Domänennamen verweisen. Diese Methode kann das Problem nur lösen, wenn die primäre Domäne gleich ist, der sekundäre Domänenname jedoch unterschiedlich ist.

document.domain = 'a.com'
Nach dem Login kopieren

Hinweis: In der tatsächlichen Entwicklung ist dies nicht möglich Wird die Schnittstelle lokal debuggen, unterscheidet sich der Domänenname von localhost vollständig vom Domänennamen des Unternehmens, sodass die Domänenmethode keine Wirkung erzielen kann. Die Lösung besteht darin, die Hostdatei auf dem Laufwerk C zu ändern und die lokale Adresse von localhost in das Unternehmen zu ändern Domänenname oder der Domänenname der zweiten Ebene des Unternehmens, und dann kann diese Methode verwendet werden.

Das Folgende ist der geänderte Domainname, der auf:

#127.0.0.1 localhost
127.0.0.1 company.com

3. postMessage

postMessage ist eine der neuen Funktionen von h5. Da wir ein Unternehmen sind, das h5-Spiele herstellt, ist es unvermeidlich, Iframes zu verschachteln, um die Übermittlung von Daten usw. zu erleichtern.

Es wird hier davon ausgegangen, dass die Id des Iframes „iframe“ ist.

sollte im js geschrieben werden js außerhalb des Iframes.

var message = 'date';<br>if (parent.document.getElementById(‘iframe‘)) {
          //捕获iframe
          var iframe = parent.document.getElementById(‘iframe').contentWindow;
          //发送消息
          parent.postMessage(message, "*");
        }
Nach dem Login kopieren

Dann können Sie die Nachrichtendaten abrufen.

window.addEventListener('message',function(e){
      },false);
Nach dem Login kopieren
Verwandte Empfehlungen:

Fehlerlösung für Parserfehler unter Ajax-Cross-Domain-Anfrage

JS implementiert Ajax-Cross-Domain-Request-Flask-Antwortinhalte

Detailliertes Beispiel für das Prinzip der domänenübergreifenden Ajax-Anfrage

Das obige ist der detaillierte Inhalt vonBeispielfreigabe für eine domänenübergreifende perfekte Ajax-Lösung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage