我理解JSON,但不是JSONP。维基百科关于JSONP的文档是JSONP的顶级搜索结果。它说:
JSONP或“带填充的JSON”是一个JSON扩展,其中前缀被指定为调用本身的输入参数。
哼?什么电话?这对我来说没有任何意义。JSON 是一种数据格式。没有电话。
第二个搜索结果来自一个名叫Remy的人,他写了关于JSONP的文章:
JSONP 是脚本标记注入,将响应从服务器传递到用户指定的函数。
我有点理解,但这仍然没有任何意义。
那么什么是JSONP?为什么创建它(它解决了什么问题)?我为什么要使用它?
附录:我刚刚在维基百科上为JSONP创建了一个新页面;它现在基于JVENEMA的答案对JSONP进行了清晰而彻底的描述。
网友回答:
JSONP实际上是克服XMLHttpRequest same域策略的简单技巧。(如您所知,不能将AJAX(XMLHttpRequest)请求发送到其他域。
因此,我们必须使用脚本HTML标签,而不是使用XMLHttpRequest,这些标签通常用于加载js文件,以便js从另一个域获取数据。听起来很奇怪?
事情是 – 事实证明脚本标签可以以类似于XMLHttpRequest的方式使用!看看这个:
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';
加载数据后,您最终会得到如下所示的脚本段:
<script>
{['some string 1', 'some data', 'whatever data']}
</script>
但是这有点不方便,因为我们必须从脚本标签中获取此数组。因此,JSONP创建者决定这将更好地工作(确实如此):
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data?callback=my_callback';
注意到那边的my_callback功能了吗?所以 – 当 JSONP 服务器收到您的请求并找到回调参数时 – 而不是返回纯 js 数组,它将返回以下内容:
my_callback({['some string 1', 'some data', 'whatever data']});
查看利润在哪里:现在我们得到自动回调 (my_callback),一旦我们获得数据就会触发。
这就是关于JSONP的全部信息:它是一个回调和脚本标签。
注意:这些是 JSONP 使用的简单示例,这些不是生产就绪脚本。
基本 JavaScript 示例(使用 JSONP 的简单 Twitter 提要)
<html>
<head>
</head>
<body>
<div id = 'twitterFeed'></div>
<script>
function myCallback(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
for(var i=0;i<len;i++){
twitterEntry = dataWeGotViaJsonp[i];
text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
}
document.getElementById('twitterFeed').innerHTML = text;
}
</script>
<script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
</body>
</html>
基本jQuery示例(使用JSONP的简单Twitter提要)
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
dataType: 'jsonp',
success: function(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
for(var i=0;i<len;i++){
twitterEntry = dataWeGotViaJsonp[i];
text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
}
$('#twitterFeed').html(text);
}
});
})
</script>
</head>
<body>
<div id = 'twitterFeed'></div>
</body>
</html>
JSONP 代表 JSON with Padding。(非常糟糕的命名技术,因为它实际上与大多数人认为的“填充”无关。
网友回答:
其实也不太复杂…
假设您正在使用域 example.com
,并且想要向域 example.net
发出请求。为此,您需要跨越域边界,这在大多数浏览器领域都是禁忌。
绕过此限制的一个项目是标记。当您使用脚本标签时,域限制将被忽略,但在正常情况下,您无法真正对结果执行任何操作,脚本只是被评估。<script>
输入 JSONP
。当您向启用了 JSONP 的服务器发出请求时,您会传递一个特殊参数,该参数会告知服务器一些有关您的页面的信息。这样,服务器能够以页面可以处理的方式很好地包装其响应。
例如,假设服务器需要一个名为回调
的参数来启用其 JSONP 功能。然后,您的请求将如下所示:
http://www.example.net/sample.aspx?callback=mycallback
如果没有 JSONP,这可能会返回一些基本的 JavaScript 对象,如下所示:
{ foo: 'bar' }
但是,对于 JSONP,当服务器收到“回调”参数时,它会以稍微不同的方式包装结果,返回如下内容:
mycallback({ foo: 'bar' });
如您所见,它现在将调用您指定的方法。因此,在您的页面中,您定义回调函数:
mycallback = function(data){
alert(data.foo);
};
现在,当脚本加载时,将对其进行评估,并执行您的函数。瞧,跨域请求!
还值得注意的是 JSONP 的一个主要问题:您失去了对请求的大量控制。例如,没有“好”的方法来获取正确的故障代码。结果,您最终会使用计时器来监视请求等,这总是有点可疑。JSONRequest 的提议是允许跨域脚本、维护安全性和允许正确控制请求的绝佳解决方案。
这些天(2015年),CORS是推荐的方法,而不是JSONRequest。JSONP对于较旧的浏览器支持仍然有用,但考虑到安全隐患,除非您别无选择,否则CORS是更好的选择。
网友回答:
JSONP 的工作原理是构造一个“脚本”元素(在 HTML 标记中或通过 JavaScript 插入到 DOM 中),该元素请求远程数据服务位置。响应是一个加载到浏览器上的 javascript,其中包含预定义函数的名称以及正在传递的参数,该参数是请求的 JSON 数据。当脚本执行时,该函数与 JSON 数据一起调用,允许请求页面接收和处理数据。
如需进一步阅读,请访问:https://blogs.sap.com/2013/07/15/secret-behind-jsonp/
客户端代码段
<!DOCTYPE html>
<html lang="en">
<head>
<title>AvLabz - CORS : The Secrets Behind JSONP </title>
<meta charset="UTF-8" />
</head>
<body>
<input type="text" id="username" placeholder="Enter Your Name"/>
<button type="submit" onclick="sendRequest()"> Send Request to Server </button>
<script>
"use strict";
//Construct the script tag at Runtime
function requestServerCall(url) {
var head = document.head;
var script = document.createElement("script");
script.setAttribute("src", url);
head.appendChild(script);
head.removeChild(script);
}
//Predefined callback function
function jsonpCallback(data) {
alert(data.message); // Response data from the server
}
//Reference to the input field
var username = document.getElementById("username");
//Send Request to Server
function sendRequest() {
// Edit with your Web Service URL
requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
}
</script>
</body>
</html>
服务器端的 PHP 代码片段
<?php
header("Content-Type: application/javascript");
$callback = $_GET["callback"];
$message = $_GET["message"]." you got a response from server yipeee!!!";
$jsonResponse = "{"message":"" . $message . ""}";
echo $callback . "(" . $jsonResponse . ")";
?>
模板简介:该模板名称为【什么是JSONP,为什么创建它?】,大小是暂无信息,文档格式为.编程语言,推荐使用Sublime/Dreamweaver/HBuilder打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【JavaScript】栏目查找您需要的精美模板。