AJAX verwendet Proxy, JSONP und XHR2, um domänenübergreifend zu erreichen

Dieses Mal werde ich Ihnen AJAX mit Proxy, JSONP und Domäne: Die 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:

Der Hintergrund hat auf Baidu nach einer Lösung gesucht, um dieses Problem zu lösen, und insgesamt Drei Lösungen wurden zusammengefasst: Proxy, JSONP, XHR2 (XMLHttpRequest Level 2).

Die erste Proxy-Methode: 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 unter dem Domänennamen gespeichert, so dass es keine domänenübergreifenden Probleme gibt.

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.

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

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

An diesem Punkt ist der Zugriff erreicht Verwendung von Proxy-Dateien zwischen verschiedenen Domänen.

Verwenden Sie zunächst AJAX in „proxy.html“, um im Hintergrund auf die Datei „proxy.php“ zuzugreifen. Nachdem Proxy.php die Anforderung erhalten hat, greift es dann auf die Datei „proxy.js“ in „localhost:63342“ zu Inhalt von Proxy.js, Gibt den Inhalt an die Front-End-Seite zurück, die domänenübergreifende Funktionen implementiert.

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

Die zweite Methode JSONP (unterstützt nur GET-Anfragen): Später stellten die Leute fest, dass sie beim Aufrufen von Js-Dateien nicht domänenübergreifend beeinflusst wird, daher wurde die zweite Methode abgeleitet.

dient dazu, die Daten in eine js-Datei auf dem Remote-Server zu laden, damit sie vom Client aufgerufen und weiterverarbeitet werden können.

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;
}

$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 der domänenübergreifenden Verwendung betroffen ist, können Sie ein Skript-Tag erstellen und über das src-Attribut auf die

zugreifen. Eigentlich ist dies kein AJAX, aber es kann AJAX-ähnliche Funktionen erreichen.

Die dritte Methode XMLHttpRequest Level 2: XMLHttpRequest Level 2, bereitgestellt von HTML5, hat den domänenübergreifenden Zugriff und einige andere neue Funktionen implementiert

Dazu ist das Hinzufügen des folgenden Codes auf der Remote-Serverseite erforderlich

header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名
header('Access-Control-Allow-Methods:POST,GET');

Auf diese Weise können Sie

-Client verwenden. 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 aber nur GET-Methodenaufrufe.

XHR2 ist das einfachste, unterstützt aber nur HTML5. Wenn Sie für mobile Endgeräte entwickeln, können Sie sich für die Verwendung von XHR2 entscheiden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

jQuery stellt die Tastatur so ein, dass sie den Fokus des Textfelds wechselt

Das obige ist der detaillierte Inhalt vonAJAX verwendet Proxy, JSONP und XHR2, um domänenübergreifend zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!