Dieses Mal werde ich Ihnen eine detaillierte Erläuterung der Schritte der domänenübergreifenden AJAX-Anfrage zum Abrufen von JSON-Daten (mit Code) geben Das Folgende ist ein praktischer Fall. Asynchrones
JavaScriptund XML (Ajax) sind Schlüsseltechnologien, die eine neue Generation von Websites vorantreiben (im Volksmund als Web 2.0-Sites bekannt). Ajax ermöglicht den Datenabruf im Hintergrund, ohne die Anzeige und das Verhalten der Webanwendung zu beeinträchtigen. Rufen Sie Daten mithilfe der XMLHttpRequest-Funktion ab, einer API, die es clientseitigem JavaScript ermöglicht, über HTTP eine Verbindung zu einem Remote-Server herzustellen. Ajax ist auch die treibende Kraft hinter vielen Mashups, die Inhalte von mehreren Orten in einer einzigen Webanwendung integrieren. Aufgrund von Browsereinschränkungen ermöglicht diese Methode jedoch keine domänenübergreifende Kommunikation. Wenn Sie versuchen, Daten von einer anderen Domäne anzufordern, tritt ein Sicherheitsfehler auf. Diese Sicherheitsfehler können vermieden werden, wenn Sie den Remote-Server kontrollieren können, auf dem sich die Daten befinden, und wenn jede Anfrage an dieselbe Domäne geht. Doch was nützt eine Webanwendung, wenn sie einfach auf dem eigenen Server bleibt? Was ist, wenn Sie Daten von mehreren Drittanbieterservern sammeln müssen?
Grundlegendes zur Same-Origin-Richtlinie Die Same-Origin-Richtlinie verhindert, dass in einer Domäne geladene Skripts Dokumenteigenschaften in einer anderen Domäne abrufen oder manipulieren. Das heißt, die Domäne der angeforderten URL muss mit der Domäne der aktuellen Webseite übereinstimmen. Das bedeutet, dass der Browser Inhalte aus verschiedenen Quellen isoliert, um Vorgänge zwischen ihnen zu verhindern. Diese Browserrichtlinie ist alt und existiert seit Netscape Navigator Version 2.0.
Eine relativ einfache Möglichkeit, diese Einschränkung zu überwinden, besteht darin, dass die Webseite Daten von dem Webserver anfordert, von dem sie stammt, und dass der Webserver wie ein Proxy fungiert und die Anfrage an den eigentlichen Drittanbieterserver weiterleitet . Obwohl diese Technologie weit verbreitet ist, ist sie nicht skalierbar. Eine andere Möglichkeit besteht darin, Frame-Elemente zu verwenden, um einen neuen Bereich innerhalb der aktuellen Webseite zu erstellen und GET-Anfragen zu verwenden, um etwaige Ressourcen von Drittanbietern abzurufen. Nach Erhalt der Ressourcen wird der Inhalt im Frame jedoch durch die Same-Origin-Richtlinie eingeschränkt.
Eine idealere Möglichkeit, diese Einschränkung zu überwinden, besteht darin, ein dynamisches Skriptelement in eine Webseite einzufügen, dessen Quelle auf eine Dienst-URL in einer anderen Domäne verweist und die Daten in einem eigenen Skript abruft. Die Ausführung beginnt, wenn das Skript geladen wird. Dieser Ansatz funktioniert, weil die Same Origin Policy das dynamische Einfügen von Skripten nicht verhindert und das Skript so behandelt wird, als ob es von der Domäne geladen würde, die die Webseite bereitstellt. Wenn das Skript jedoch versucht, das Dokument aus einer anderen Domäne zu laden, gelingt es nicht. Glücklicherweise kann diese Technik durch Hinzufügen von JavaScript Object Notation (JSON) verbessert werden.
1. Was ist JSONP? Um JSONP zu verstehen, müssen wir JSON erwähnen. Was ist JSON?
JSON ist eine Teilmenge der Objektliteralnotation von JavaScript. Da JSON eine Teilmenge von JavaScript ist, kann es in der Sprache ohne großen Aufwand verwendet werden.
JSONP(JSON mit Padding ) ist ein inoffizielles Protokoll, das die Integration von Skript-Tags auf der Serverseite und deren Rückgabe an den Client ermöglicht und so einen domänenübergreifenden Zugriff in Form von Javascript-Rückrufen ermöglicht (dies ist nur eine einfache Implementierung von JSONP).
2. Wozu dient JSONP? Aufgrund der Einschränkungen der Same-Origin-Richtlinie erlaubt XmlHttpRequest nur Anfragen nach Ressourcen von der aktuellen Quelle (Domänenname, Protokoll, Port), um domänenübergreifende Anfragen zu erreichen Domänenübergreifende Anforderungen können über das Skript-Tag implementiert werden. Anschließend werden die JSON-Daten auf der Serverseite ausgegeben und die Rückruffunktion
ausgeführt, wodurch domänenübergreifende Datenanforderungen gelöst werden. Die folgende DEMO ist eigentlich eine einfache Darstellung von JSONP. Nachdem der Client die Rückruffunktion deklariert hat, fordert der Client über das Skript-Tag Daten vom Server an, und dann gibt der Server die entsprechenden Daten zurück und führt sie dynamisch aus die Callback-Funktion. HTML-Code (entweder):oder
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function jsonpCallback(result) {
//alert(result);
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}
var JSONP=document.createElement("script");
JSONP.type="text/javascript";
JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>JavaScript-Link muss sich unterhalb der Funktion befinden.
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function jsonpCallback(result) {
alert(result.a);
alert(result.b);
alert(result.c);
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}
</script>
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>PHP-Code
Wenn der oben genannte JS client Der Endcode wird mit jQuery implementiert, was ebenfalls sehr einfach ist.
<?php
//服务端返回JSON数据
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result=json_encode($arr);
//echo $_GET['callback'].'("Hello,World!")';
//echo $_GET['callback']."($result)";
//动态执行回调函数
$callback=$_GET['callback'];
echo $callback."($result)";Implementierungsmethode 1 des Client-JS-Codes in jQuery:
$.getJSON $.ajax $.get
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.getJSON("http://crossdomain.com/services.php?callback=?",
function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
});
</script>客户端JS代码在jQuery中的实现方式2：
Js代码
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url:"http://crossdomain.com/services.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
},
timeout:3000
});
</script>客户端JS代码在jQuery中的实现方式3：
其中 jsonCallback 是客户端注册的，获取跨域服务器上的json数据后，回调的函数。
http://crossdomain.com/services.php?callback=jsonpCallback
这个 url 是跨域服务器取 json 数据的接口，参数为回调函数的名字，返回的格式为
jsonpCallback({msg:'this is json data'})Jsonp原理：
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
使用JSON的优点在于：
比XML轻了很多，没有那么多冗余的东西。
JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。
在JavaScript中处理JSON很简单。
其他语言例如PHP对于JSON的支持也不错。
JSON也有一些劣势：
JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。
如果你使用eval()来解析的话，会容易出现安全问题。
尽管如此，JSON的优点还是很明显的。他是Ajax数据交互的很理想的方式。
主要提示：
JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。
第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。
JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Das obige ist der detaillierte Inhalt vonDetaillierte Schritte zur domänenübergreifenden AJAX-Anfrage JSONP zum Abrufen von JSON-Daten (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
