Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung des domänenübergreifenden Prinzips von js und zweier Lösungen_Javascript-Fähigkeiten

Detaillierte Erläuterung des domänenübergreifenden Prinzips von js und zweier Lösungen_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:26:521627Durchsuche

1. Was ist domänenübergreifend?

Wir verwenden häufig Ajax, um Daten von anderen Servern auf der Seite anzufordern. Zu diesem Zeitpunkt treten auf dem Client domänenübergreifende Probleme auf.

Das domänenübergreifende Problem wird durch die Same-Origin-Richtlinie in den Sicherheitsbeschränkungen der JavaScript-Sprache verursacht.

Einfach ausgedrückt bedeutet die Same-Origin-Richtlinie, dass ein Skript nur die Eigenschaften von Fenstern und Dokumenten aus derselben Quelle lesen kann. Die gleiche Quelle bezieht sich hier auf die Kombination aus Hostname, Protokoll und Portnummer.

Zum Beispiel:

2. Umsetzungsprinzip

Im HTML-DOM kann das Script-Tag domänenübergreifend auf Daten auf dem Server zugreifen. Daher kann das src-Attribut des Skripts als domänenübergreifende URL angegeben werden, um einen domänenübergreifenden Zugriff zu erreichen

Zum Beispiel:

Diese Zugriffsmethode ist nicht möglich. Die folgende Methode ist jedoch möglich.

Es gibt eine Anforderung für die zurückgegebenen Daten, das heißt: Die vom Server zurückgegebenen Daten dürfen nicht einfach {"Name": "zhangsan" sein🎜>

Wenn diese JSON-Zeichenfolge zurückgegeben wird, haben wir keine Möglichkeit, auf diese Zeichenfolge zu verweisen. Daher muss der zurückgegebene Wert

var json={"Name":"zhangsan"} oder json({" sein. Name: „zhangsan“}) Um zu verhindern, dass das Programm Fehler meldet, müssen wir auch eine

JSON-Funktion

erstellen.

3. Lösung

Option 1

Serverseite:

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

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

Kunde:

<!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>

Option 2:

Durch JQuery abschließen Über die JSONP-Methode von jquery gelten Anforderungen für die Serverseite.

Die Serverseite ist wie folgt:

  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();
  }

Kunde:

$.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); 
        } 
      });

Wenn wir dieses js ausführen, sendet js tatsächlich eine solche Anfrage an den Server:

http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742 Der Server hat dementsprechend auch das folgende Objekt zurückgegeben:

jsonp1354506338864({"name":"zhangsan","date":"2012-12-03"}) An diesem Punkt sind die Anforderungen für domänenübergreifende Beispieldaten erfüllt.

Das Obige ist eine Einführung in das domänenübergreifende Prinzip von js und zwei Lösungen. Ich hoffe, dass es für alle beim Erlernen domänenübergreifender Wissenspunkte hilfreich ist. Sie können es auch mit anderen verwandten Artikeln zum Lernen und Forschen kombinieren.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So schreiben Sie eine Heatmap in Javascript_Javascript-KenntnissenNächster Artikel：So schreiben Sie eine Heatmap in Javascript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen