Résumé des méthodes d'implémentation inter-domaines dans les compétences javascript

Résumé des méthodes d'implémentation inter-domaines dans les compétences javascript_javascript

WBOY

Libérer： 2016-05-16 15:52:48

original

1239 Les gens l'ont consulté

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 non officiel d'interaction de données inter-domaines 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 connexion 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 à l'aide de la fonction de rappel pour transmettre les paramètres
(Vous pouvez l'appeler directement, ce qui équivaut à évaluer le traitement de la chaîne obtenue)
Par exemple : function databack(data){ alert(data.name1) } // Affichera et affichera "data1"

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?callback=?"; // La valeur de rappel ici dans jquery peut être arbitraire, car

Une fois jquery traité, la fonction de rappel de réussite est utilisée pour accepter les données
; $.getJSON(url, function(data){ alert(data.name1) });

Troisième méthode :

Proxy de serveur inter-domaines Ajax
Mettre en place un programme proxy (proxy.jsp...) en arrière-plan de la même origine ; interagir avec le serveur dans un domaine étranger 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 en arrière-plan :

    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

Récupérez 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 :

　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