Es gibt mehrere Möglichkeiten, domänenübergreifende Probleme mit Ajax zu lösen

Ajax verfügt über drei Methoden zur Lösung domänenübergreifender Probleme: 1. Verwenden Sie einen Proxy, um Inhalte unter anderen Domänennamen über den Hintergrund abzurufen, und geben Sie die erhaltenen Inhalte dann an das Frontend zurück, sodass sie sich unter demselben Domänennamen befinden. 2 . Verwenden Sie JSONP. Diese Methode unterstützt nur Get Request, das Laden der Daten in eine JS-Datei auf dem Remote-Server für den Client-Aufruf und die weitere Verarbeitung. Verwenden Sie „LHttpRequest Level 2“, die Syntax lautet „header('Access-Control-Allow -Herkunft:*')".

Die Betriebsumgebung dieses Artikels: Windows 10-System, Javascript 1.8.5 und HTML5-Version, Dell G3-Computer.

Es gibt drei Möglichkeiten, domänenübergreifendes Ajax zu lösen

Domäne: Domäne ist die Sicherheitsgrenze des WIN2K-Netzwerksystems. Wir wissen, dass die grundlegendste Einheit eines Computernetzwerks eine „Domäne“ ist. Dies gilt nicht nur für WIN2K, aber Active Directory kann über eine oder mehrere Domänen laufen. Auf einem unabhängigen Computer bezieht sich eine Domäne auf den Computer selbst. Eine Domäne kann auf mehrere physische Standorte verteilt sein. Gleichzeitig kann ein physischer Standort in verschiedene Netzwerksegmente unterteilt werden seine Beziehung zu Vertrauensbeziehungen mit anderen Domänen. Wenn mehrere Domänen über Vertrauensbeziehungen verbunden sind, kann Active Directory von mehreren vertrauenden Domänen gemeinsam genutzt werden.

Aufgrund der Notwendigkeit, AJAX zum Anfordern von Anforderungen unter anderen Domänennamen bei der Arbeit zu verwenden, wird der Zugriff verweigert. Dies liegt daran, dass AJAX aus Sicherheitsgründen nur auf lokale Ressourcen und nicht auf domänenübergreifende Ressourcen zugreifen kann.

Wenn der Domänenname Ihrer Website beispielsweise aaa.com lautet und Sie den Inhalt des Domänennamens bbb.com über AJAX anfordern möchten, betrachtet der Browser ihn als unsicher und verweigert den Zugriff.

Es gibt mehrere Situationen, in denen domänenübergreifende Probleme auftreten können:

Insgesamt werden drei Lösungen zusammengefasst: Proxy, JSONP und XHR2 (XMLHttpRequest Level 2).

Die erste Methode ist Proxy: Diese Methode besteht darin, den Inhalt unter anderen Domänennamen über das Backend (ASP, PHP, JAVA, ASP.NET) abzurufen und den erhaltenen Inhalt dann an das Front-End zurückzugeben Da es sich um denselben Domänennamen handelt, treten keine domänenübergreifenden Probleme auf.

Implementierungscode: Erstellen Sie eine AJAX-Anfrage (die Seitenadresse lautet: http://localhost/ajax/proxy.html)

var request = null;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHttp");
}
request.onreadystatechange = function(){
console.log(this.readyState);
if(this.readyState===4 && this.status===200){
var resultObj = eval("("+this.responseText+")"); //将返回的文本数据转换JSON对象
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex; //将返回的内容显示在页面中
}
}
request.open("POST","proxy.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("name=吕铭印&sex=男");

Erstellen Sie eine AJAX-Anfrage.

Proxy.php-Code

header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents;

Verwenden Sie den PHP-Code, um die Proxy.js-Datei unter localhost:63342 abzurufen.

proxy.js-Code

{
name : "吕铭印",
sex : "男"
}

proxy.html führt Ergebnisse aus

An diesem Punkt verwenden Sie einen Proxy, um auf Dateien zwischen verschiedenen Domänen zuzugreifen.

Zuerst verwenden Sie AJAX, um im Hintergrund auf die Datei „proxy.php“ in „proxy.html“ zuzugreifen, und greifen Sie dann, nachdem „proxy.php“ die Anforderung erhalten hat, auf die Datei „proxy.js“ in „localhost:63342“ zu. Geben Sie den Inhalt zurück an Die Front-End-Seite realisiert domänenübergreifende Funktionalität.

Wenn Sie auf mehrere domänenübergreifende Dateien zugreifen möchten, können Sie der Hintergrunddatei „proxy.php“ die Adresse der Datei, auf die Sie zugreifen möchten, in Form eines Parameters mitteilen.

Die zweite Methode JSONP (unterstützt nur GET-Anfragen): Später entdeckten die Leute, dass beim Aufrufen von Js-Dateien diese nicht von domänenübergreifenden Problemen betroffen sind, daher wurde die zweite Lösung abgeleitet.

Es geht darum, die Daten in eine JS-Datei auf dem Remote-Server zu laden, damit sie vom Client aufgerufen und weiterverarbeitet werden können.

jsonp.html

var url = "http://localhost:63342/ajax/jsonp.php?name=吕铭印&sex=男&callbackname=jsonp_callback"; //访问localhost:63342下的jsonp.php
var scriptTag = document.createElement("script"); //创建一个script标签
scriptTag.setAttribute("src",url); //设置script的src属性
document.body.appendChild(scriptTag); //将script标签添加到body中
//回调函数
var jsonp_callback = function(resultObj){
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;
}
jsonp.php
$name = $_GET["name"];
$sex = $_GET["sex"];
$callbackname = $_GET["callbackname"]; //回调函数名称
echo "$callbackname({name:'$name',sex:'$sex'})";

Implementierungsprinzip: Da die Verwendung von Skript-Tags zum Aufrufen von Remote-JS-Dateien nicht von domänenübergreifenden Auswirkungen betroffen ist, können Sie ein Skript-Tag erstellen und über das src-Attribut auf die Remote-Datei zugreifen.

Eigentlich gehört dies nicht zu AJAX, kann aber AJAX-ähnliche Funktionen erreichen. Die dritte Methode XMLHttpRequest Level 2 Methoden auf dem Client-AJAX-Code sind ausreichend.

Zusammenfassung: Die Proxy-Implementierung ist am problematischsten, wird aber am häufigsten verwendet. Jeder Browser, der AJAX unterstützt, kann diese Methode verwenden. JSONP ist relativ einfach, unterstützt jedoch nur GET-Methodenaufrufe.

XHR2 ist das einfachste, unterstützt jedoch nur HTML5. Wenn Sie für mobile Endgeräte entwickeln, können Sie XHR2 verwenden.

【Ähnliche Tutorial-Empfehlung:

AJAX-Video-Tutorial

】

Das obige ist der detaillierte Inhalt vonEs gibt mehrere Möglichkeiten, domänenübergreifende Probleme mit Ajax zu lösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!