Explication détaillée d'exemples de méthodes inter-domaines dans les compétences js

Explication détaillée d'exemples de méthodes inter-domaines dans les compétences js_javascript

WBOY

Libérer： 2016-05-16 15:53:23

original

1148 Les gens l'ont consulté

Les exemples de cet article décrivent la méthode d'implémentation inter-domaines en js. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

En raison des restrictions de la politique de même origine, XMLHttpRequest est uniquement autorisé à demander des ressources à la source actuelle (y compris le nom de domaine, le protocole et le port).

La différence entre json et jsonp :

JSON est un format d'échange de données, tandis que JSONP est un protocole d'échange de données inter-domaines non officiel créé par les développeurs.

La balise

script est souvent utilisée pour charger des ressources de différents domaines et peut contourner la politique de même origine. (Toute personne possédant l'attribut src peut obtenir des fichiers étrangers).
Si les données distantes demandées elles-mêmes sont un js exécutable, alors ces js seront exécutés (équivalent à eval).

Méthode 1 :

Utilisez la balise de script pour demander ()
Avant d'utiliser la balise de script pour demander, déclarez d'abord la fonction de rappel,

<script>
function 回调函数名(data数据){ 。。。。 }
</script>
<script src="http://....jsp&#63;callback=回调函数名"></script>

Copier après la connexion

Utiliser JSON pour transférer des objets javascript est le moyen le plus simple. Cette méthode de communication inter-domaines est appelée JSONP.

Chaîne de patchwork du serveur distant :

Nom de la fonction de rappel ({"name1":"data1","name2","data2"})

Ce type de données json est reconstitué en arrière-plan et renvoyé au client sous la forme de transmission de paramètres via la fonction de rappel
(Vous pouvez l'appeler directement, ce qui équivaut à évaluer le traitement de la chaîne obtenue)

Par exemple :

function databack(data){ alert(data.name1) }
// 会输出显示"data1"

Copier après la connexion

Méthode 2 :

Il est plus simple d'implémenter la méthode de chargement étranger avec jquery (la même que la méthode de requête asynchrone d'ajax)

$.ajax({
  type : "get",
  dataType:"json",
  success : function(data){ alert(data.name1) };
})

Copier après la connexion

ou forme abrégée

var url = "http://.....jsp&#63;callback=&#63;";
// 在jquery中此处的callback值可以为任意，
// 因为jquery进行处理后都是利用success回调函数进行数据的接受；
$.getJSON( url, function(data){ alert(data.name1) });

Copier après la connexion

Méthode 3 :

Proxy de serveur inter-domaines Ajax

Configurer un programme proxy (proxy.jsp...) en arrière-plan de la même source ;
Interagissez avec des serveurs dans des domaines étrangers côté serveur.

Transmission de données frontales jquery :

Par exemple :

$.get(
　　 'http://。。。.jsp', // 代理程序地址
　　 {
　　  name1 : "data1",
　　  name2 : "data2"
　　 },
　　 function(data){
　　 if(data == 1) alert('发送成功！');
　　 }
);

Copier après la connexion

Traitement des données de base :

String data1 = request.getParameter("name1");
........
// 此处的url为另一域下的地址并带有参数
String url = "http://.....com/.../sss.jsp&#63;" +　"name1=" + data1+　"name2=" + data2;
// 跳转到另一个域进行数据的处理并返回json格式的数据
request.getRequestDispatcher(url).forward(request,response);

Copier après la connexion

Méthode 4 :

Utilisez l'attribut src de la balise iframe pour effectuer un accès inter-domaines, stockez la valeur obtenue dans l'iframe actuelle, puis obtenez la valeur dans le corps de l'iframe sur la même page.

<body>
  <div id="show"></div>
  <iframe id="frame" style="display: none;"></iframe>
</body>
<script>
$("#frame").attr("src", "路径&#63;time=" + new Date().getTime()).load(function(){
 // 获取iframe标签的值并进行获取，显示到页面
 $("#show").append("[data: " + $($("#frame").get(0).contentDocument).find("body").text()+ " ]");
});
</script>

Copier après la connexion

Méthode 5 :

Websocket en HTML5 peut fournir un accès inter-domaines ;

Créez un objet websocket :

Copier le code Le code est le suivant :

var ws = new WebSocket(url);

Les principaux types d'événements traités sont (onopen, onclose, onmessage, onerror

) ;

Par exemple :

ws.onopen = function(){
console.log("open")；
// 向后台发送数据
ws.send("open");
}

Copier après la connexion

L'arrière-plan peut être Java, php, nodejs, etc. Pour le traitement des données, utilisez l'événement time onmessage pour effectuer un traitement frontal sur la valeur renvoyée.

ws.onmessage = function(eve){
console.log(eve.data);
}

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.