Explication détaillée du principe inter-domaines de js et de deux compétences solutions

Explication détaillée du principe inter-domaines de js et de deux compétences solutions_javascript

WBOY

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

original

1625 Les gens l'ont consulté

1. Qu'est-ce que le cross-domain

Nous utilisons souvent ajax pour demander des données à d'autres serveurs sur la page. À ce stade, des problèmes inter-domaines se produiront sur le client.

Le problème inter-domaines est causé par la politique de même origine dans les restrictions de sécurité du langage JavaScript.

En termes simples, la politique de même origine signifie qu'un script ne peut lire que les propriétés des fenêtres et des documents provenant de la même source. La même source fait ici référence à la combinaison du nom d'hôte, du protocole et du numéro de port.

Par exemple :

2.Principe de mise en œuvre

Dans le DOM HTML, la balise Script peut accéder aux données sur le serveur dans tous les domaines. Par conséquent, l'attribut src du script peut être spécifié comme URL inter-domaines pour obtenir un accès inter-domaines.

Par exemple :

Cette méthode d'accès n'est pas possible. Mais la méthode suivante est possible.

Il existe une exigence concernant les données renvoyées, c'est-à-dire : les données renvoyées par le serveur ne peuvent pas être simplement {"Name": "zhangsan">

Si cette chaîne json est renvoyée, nous n'avons aucun moyen de référencer cette chaîne. Par conséquent, la valeur renvoyée doit être

var json={"Name":"zhangsan"}, ou json({" Nom":"zhangsan"})

Afin d'éviter que le programme ne signale des erreurs, nous devons également créer une

fonction json.

3. Solution

Option 1
Côté serveur :

protected void Page_Load(object sender, EventArgs e)
  {
    string result = "callback({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

    Response.Clear();
    Response.Write(result);
    Response.End();
  }

Copier après la connexion

Client :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">

    var result = null;
    window.onload = function () {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://192.168.0.101/ExampleBusinessApplication.Web/web2.aspx";

      var head = document.getElementsByTagName("head")[0];
      head.insertBefore(script, head.firstChild);

    };

    function callback(data) {
      result = data;
    }

    function b_click() {
      alert(result.name);
    }
  </script>
</head>
<body>
  <input type="button" value="click me!" onclick="b_click();" />
</body>
</html>

Copier après la connexion

Option 2 : Compléter via jquery

Grâce à la méthode jsonp de jquery, l'utilisation de cette méthode a des exigences pour le côté serveur.

Le côté serveur est le suivant :

  protected void Page_Load(object sender, EventArgs e)
  {
    string callback = Request.QueryString["jsoncallback"];

    string result = callback + "({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

    Response.Clear();
    Response.Write(result);
    Response.End();
  }

Copier après la connexion

Client :

$.ajax({ 
        async: false, 
        url: "http://192.168.0.5/Web/web1.aspx", 
        type: "GET", 
        dataType: 'jsonp', 
        //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象. 
        jsonp: 'jsoncallback', 
        //要传递的参数,没有传参时，也一定要写上 
         data: null, 
        timeout: 5000, 
        //返回Json类型 
         contentType: "application/json;utf-8", 
        //服务器段返回的对象包含name,data属性. 
        success: function (result) { 
          alert(result.date); 
        }, 
        error: function (jqXHR, textStatus, errorThrown) { 
          alert(textStatus); 
        } 
      });

Copier après la connexion

En fait, lorsque nous exécutons ce js, js envoie une telle requête au serveur :

http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742

Le serveur a également renvoyé l'objet suivant en conséquence :

jsonp1354506338864({"name":"zhangsan","date":"2012-12-03"})

À ce stade, les exigences relatives aux exemples de données inter-domaines sont satisfaites.

Ce qui précède est une introduction au principe inter-domaines de js et à deux solutions. J'espère que cela sera utile à tout le monde pour apprendre des points de connaissances inter-domaines. Vous pouvez également le combiner avec d'autres articles connexes pour l'étude et la recherche.