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