AJAX utilise proxy, JSONP et XHR2 pour réaliser des opérations inter-domaines

Cette fois, je vais vous présenter AJAX utilisant un proxy, JSONP et XHR2 pour réaliser des opérations inter-domaines. Quelles sont les précautions pour AJAX utilisant un proxy, JSONP et une fois.

Domaine : Le domaine est la limite de sécurité du système réseau WIN2K. Nous savons que l'unité la plus élémentaire d'un réseau informatique est un « domaine ». Ce n'est pas unique à WIN2K, mais Active Directory peut fonctionner via un ou plusieurs domaines. Sur un ordinateur indépendant, un domaine fait référence à l'ordinateur lui-même. Un domaine peut être distribué sur plusieurs emplacements physiques. Dans le même temps, un emplacement physique peut être divisé en différents segments de réseau en différents domaines. sa relation avec les relations de confiance avec d'autres domaines. Lorsque plusieurs domaines sont connectés via des relations d'approbation, Active Directory peut être partagé par plusieurs domaines d'approbation.

En raison de la nécessité d'utiliser AJAX pour demander des requêtes sous d'autres noms de domaine au travail, l'accès sera refusé car, pour des raisons de sécurité, AJAX ne peut accéder qu'aux ressources locales et ne peut pas accéder aux ressources inter-domaines.

Par exemple, si le nom de domaine de votre site Web est aaa.com et que vous souhaitez demander le contenu du nom de domaine bbb.com via AJAX, le navigateur le considérera comme dangereux et refusera l'accès.

Il existe plusieurs situations dans lesquelles des problèmes inter-domaines se produiront :

L'arrière-plan a recherché une solution sur Baidu pour résoudre ce problème, et un total de trois solutions ont été résumées : Proxy, JSONP, XHR2 (XMLHttpRequest Level 2).

La première méthode proxy : Cette méthode consiste à obtenir le contenu sous d'autres noms de domaine via le backend (ASP, PHP, JAVA, ASP.NET), puis à renvoyer le contenu obtenu au front-end, afin que de la même manière sous le nom de domaine, il n'y aura donc pas de problèmes entre domaines.

Code d'implémentation : Créez une requête AJAX (l'adresse de la page est : 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=男");

Créez une requête AJAX.

code proxy.php

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

Utilisez le code php pour obtenir le fichier proxy.js sous localhost:63342.

code proxy.js

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

proxy.html exécutant les résultats

À ce stade, utilisez implémentation du proxy Pour accéder aux fichiers entre différents domaines.

Tout d'abord, utilisez AJAX dans proxy.html pour accéder au fichier proxy.php en arrière-plan. Ensuite, une fois que proxy.php a reçu la demande, il accède au fichier proxy.js dans localhost:63342. contenu de proxy.js, renvoie le contenu à la page frontale, qui implémente la fonctionnalité inter-domaines.

Si vous souhaitez accéder à plusieurs fichiers inter-domaines, vous pouvez indiquer au fichier proxy.php en arrière-plan l'adresse du fichier auquel accéder sous la forme d'un paramètre.

La deuxième méthode JSONP (prend uniquement en charge les requêtes GET) : plus tard, les gens ont découvert qu'elle n'était pas affectée par le cross-domain lors de l'appel de fichiers JS, la deuxième méthode a donc été dérivée.

consiste à charger les données dans un fichier js sur le serveur distant pour l'appel du client et un traitement ultérieur.

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'})";

jsonp.html résultat en cours d'exécution :

Principe d'implémentation : Étant donné que l'utilisation de balises de script pour appeler des fichiers js distants n'est pas affectée par le cross-domain, vous pouvez créer une balise de script et accéder au fichier distant via l'attribut src.

En fait, ce n'est pas AJAX, mais il peut réaliser des fonctions de type AJAX.

La troisième méthode XMLHttpRequest Niveau 2 : XMLHttpRequest Niveau 2 fournie par HTML5 a implémenté l'accès inter-domaines et quelques autres nouvelles fonctionnalités

Cela nécessite l'ajout du code suivant côté serveur distant

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

De cette façon, vous pouvez utiliser le code AJAX normal sur le client.

Résumé : L'implémentation du proxy est la plus problématique, mais c'est la plus largement utilisée. Tout navigateur prenant en charge AJAX peut utiliser cette méthode.

JSONP est relativement simple, mais ne prend en charge que les appels de méthode GET.

XHR2 est le plus simple, mais il ne prend en charge que HTML5. Si vous développez pour des terminaux mobiles, vous pouvez choisir d'utiliser XHR2.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Encapsulation JS dans le même domaine, jsonp cross-domain (avec code)

jQuery définit le clavier pour changer le focus de la zone de texte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!