首页猿问有人能用外行人的话解释一下JSON...

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

JQuery

红糖糍粑 2019-06-19 10:18:57

有人能用外行人的话解释一下JSONP是什么吗？我知道呀JSONP是JSON用垫子。我理解JSON是什么，以及如何使用它jQuery.getJSON()..不过，我不明白callback在介绍JSONP时。有人能向我解释一下这是怎么回事吗？

查看完整描述

3 回答

冉冉说

TA贡献1877条经验获得超1个赞

前言：

这个答案已经六年多了。虽然JSONP的概念和应用没有改变(即答案的细节仍然有效)，但您应该尽可能使用CORS(即你的服务器或API支持它，并且浏览器支持)，作为JSONP有固有的安全风险.

JSONP(软垫)是一种常用的方法，用于绕过Web浏览器中的跨域策略。(不允许向被浏览器认为位于不同服务器上的网页发出Ajax请求。)

JSON和JSONP在客户机和服务器上的行为不同。JSONP请求不使用XMLHTTPRequest以及相关的浏览器方法。相反<script>标记被创建，其源被设置为目标URL。然后将这个脚本标记添加到DOM(通常在<head>元素)。

JSON请求：

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // success
  };};xhr.open("GET", "somewhere.php", true);xhr.send();

JSONP请求：

var tag = document.createElement("script");tag.src = 'somewhere_else.php?callback=foo';document.getElementsByTagName("head")[0].
appendChild(tag);

JSON响应和JSONP响应之间的区别是JSONP响应对象作为参数传递给回调函数。

杰森：

{ "bar": "baz" }

JSONP：

foo( { "bar": "baz" } );

这就是为什么您看到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 xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById("output").innerHTML = eval('(' + this.responseText + ')').bar;
  };};xhr.open("GET", "somewhere.php", true);xhr.send();

JSONP：

function foo(response) {
  document.getElementById("output").innerHTML = response.bar;};var tag = document.createElement("script");tag.src = 'somewhere_else.php?
  callback=foo';document.getElementsByTagName("head")[0].appendChild(tag);

反对回复 2019-06-19

3 回答
0 关注
626 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

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

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

3 回答

前言：

JSON请求：

JSONP请求：

杰森：

JSONP：

类似的JSON/JSONP实现

杰森：

JSONP：

添加回答