有人能用外行人的话解释一下JSONP是什么吗?

有人能用外行人的话解释一下JSONP是什么吗?

我知道呀JSONPJSON用垫子。

我理解JSON是什么,以及如何使用它jQuery.getJSON()..不过,我不明白callback在介绍JSONP时。

有人能向我解释一下这是怎么回事吗?


红糖糍粑
浏览 578回答 3
3回答

冉冉说

前言:这个答案已经六年多了。虽然JSONP的概念和应用没有改变(即答案的细节仍然有效),但您应该尽可能使用CORS(即你的服务器或API支持它,并且浏览器支持),作为JSONP有固有的安全风险.JSONP(软垫)是一种常用的方法,用于绕过Web浏览器中的跨域策略。(不允许向被浏览器认为位于不同服务器上的网页发出Ajax请求。)JSON和JSONP在客户机和服务器上的行为不同。JSONP请求不使用XMLHTTPRequest以及相关的浏览器方法。相反<script>标记被创建,其源被设置为目标URL。然后将这个脚本标记添加到DOM(通常在<head>元素)。JSON请求:var&nbsp;xhr&nbsp;=&nbsp;new&nbsp;XMLHttpRequest();xhr.onreadystatechange&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;if&nbsp;(xhr.readyState&nbsp;==&nbsp;4&nbsp;&&&nbsp;xhr.status&nbsp;==&nbsp;200)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;success &nbsp;&nbsp;};};xhr.open("GET",&nbsp;"somewhere.php",&nbsp;true);xhr.send();JSONP请求:var&nbsp;tag&nbsp;=&nbsp;document.createElement("script");tag.src&nbsp;=&nbsp;'somewhere_else.php?callback=foo';document.getElementsByTagName("head")[0]. appendChild(tag);JSON响应和JSONP响应之间的区别是JSONP响应对象作为参数传递给回调函数。杰森:{&nbsp;"bar":&nbsp;"baz"&nbsp;}JSONP:foo(&nbsp;{&nbsp;"bar":&nbsp;"baz"&nbsp;}&nbsp;);这就是为什么您看到JSONP请求包含callback参数,以便服务器知道要包装响应的函数的名称。本函数必须存在在全球范围内当时这个<script>标记由浏览器计算(一旦请求完成)。处理JSON响应与JSONP响应之间的另一个不同之处在于,任何JSON响应中的解析错误都可以通过在try/catch语句中包装计算responseText的尝试来捕获。由于JSONP响应的性质,响应中的解析错误将导致无法捕获的JavaScript解析错误。这两种格式都可以通过在启动请求和清除响应处理程序中的超时之前设置超时来实现超时错误。使用jQuery发出JSONP请求的有用之处在于jQuery确实如此。所有的工作作为背景的你。默认情况下,jQuery要求您包括&callback=?在Ajax请求的URL中。jQuery将采用success函数,指定它的唯一名称,并在全局范围中发布它。然后,它将替换问号。?在……里面&callback=?用它指定的名字。类似的JSON/JSONP实现下面假设有一个响应对象{ "bar" : "baz" }杰森:var&nbsp;xhr&nbsp;=&nbsp;new&nbsp;XMLHttpRequest();xhr.onreadystatechange&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;if&nbsp;(xhr.readyState&nbsp;==&nbsp;4&nbsp;&&&nbsp;xhr.status&nbsp;==&nbsp;200)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("output").innerHTML&nbsp;=&nbsp;eval('('&nbsp;+&nbsp;this.responseText&nbsp;+&nbsp;')').bar; &nbsp;&nbsp;};};xhr.open("GET",&nbsp;"somewhere.php",&nbsp;true);xhr.send();JSONP:function&nbsp;foo(response)&nbsp;{ &nbsp;&nbsp;document.getElementById("output").innerHTML&nbsp;=&nbsp;response.bar;};var&nbsp;tag&nbsp;=&nbsp;document.createElement("script");tag.src&nbsp;=&nbsp;'somewhere_else.php? &nbsp;&nbsp;callback=foo';document.getElementsByTagName("head")[0].appendChild(tag);
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JQuery