Résumé de plusieurs méthodes pour acquérir des compétences js inter-domaines (ping d'image, JSONP et CORS)_javascript

Cross domaine

Bien qu'il existe une politique de même origine, le cross-domain est toujours très courant dans js, y compris document.domain, window.name, image ping, jsonp et CORS. Voici un bref résumé de image ping, jsonp, et les préparations CORS oublient.

Ping d'image

Les images peuvent être chargées à partir de n'importe quelle URL, donc définir le src de img sur l'URL d'un autre domaine peut réaliser un inter-domaine simple. Vous pouvez utiliser les événements onload et onerror pour déterminer si une réponse a été reçue.

var img=new Image();
img.src='http://www.jb51.net';
img.onerror=function(){
 alert('error');
}
img.onload=function(){
 alert('success');
}

Un nouvel objet img est créé ici. L'URL indiquée est l'adresse du blog. Il s'agit d'un événement d'erreur, donc une erreur apparaît si l'URL est modifiée en image http://images.jb51. net//710118 /o_MacBook Air.png, le succès du chargement des informations apparaîtra, réalisant ainsi un inter-domaine simple.

En utilisant le ping d'image sur tous les domaines, vous pouvez uniquement envoyer des demandes d'obtention et vous ne pouvez pas accéder au texte de la réponse. Vous pouvez uniquement surveiller s'il existe une réponse, qui peut être utilisée pour suivre les clics sur les annonces.

jsonp

jsonp est json avec fonction de rappel. Son nom d'origine est json avec remplissage. Il est traduit par json rembourré et paramètre json.

Parce que le src du script peut traverser les domaines, ajoutez un paramètre de rappel après l'URL envoyée et transmettez-le au serveur. Ensuite, les données renvoyées par le serveur seront utilisées comme paramètre de rappel car ce rappel est implémenté. par nous-mêmes, nous pouvons recevoir des données json pour les traiter.

Le code simple est le suivant :

<script type="text/javascript">
function call(data){
 alert(data.city);
}
</script>
<script type="text/javascript" src='http://freegeoip.net/json/&#63;callback=call'></script>

Ici, nous définissons le src du script sur http://freegeoip.net/json/?callback=call, qui est une API permettant d'obtenir l'adresse IP de l'utilisateur (si vous êtes intéressé, vous pouvez cliquez ici pour voir), puis épissez le rappel en tant que paramètre dans l'URL, et les données json renvoyées seront utilisées comme paramètre du rappel. Ici, nous définissons le rappel comme une fonction d'appel, c'est-à-dire que les données json renvoyées seront. transmis en paramètre de l'appel. Cette fonction d'appel Seule la ville de l'utilisateur apparaît. Le résultat de sortie ici est Hebei. Pour d'autres informations IP, vous pouvez consulter le site officiel, qui contient une liste détaillée, telle que country_name, time_zone, etc.

CORS (partage de ressources croisées)

CORS est le partage de ressources entre sites. C'est à peu près la même chose que ajax. Pour IE, l'objet xdr, XDomainRequest, est instancié. La seule chose à laquelle nous pouvons accéder est le texte de réponse. La méthode est à peu près la même que xhr, et open et send sont également requis.

Pour d'autres navigateurs tels que ff et chrome, xhr est instancié. Ici, myvin utilise uniquement xhr pour démontrer. Si vous souhaitez obtenir une compatibilité multi-navigateur, vous pouvez coopérer avec xdr pour obtenir la compatibilité.

xhr est le suivant :

var xhr=new XMLHttpRequest();   
var url="http://www.jb51.net";
xhr.open('GET', url); 
xhr.send(null);

L'URL utilisée ici est http://www.jb51.net La seule différence avec ajax est que l'URL utilise une adresse absolue inter-domaines. L'adresse relative dans cette page utilisée en ajax. adresse ou adresse absolue.

Regardez la console, ff40.0.3 est utilisé ici, et les informations affichées sont les suivantes :

Demande d'origine croisée bloquée : la politique de même origine interdit la lecture de la ressource distante sur http://www.jb51.net. (Cause : l'en-tête CORS 'Access-Control-Allow-Origin' est manquant).

Il reste donc une étape supplémentaire pour implémenter le cross-domain à l'aide de CORS, qui consiste à définir Access-Control-Allow-Origin côté serveur.