格式明智,文件类型明智和实际使用明智?
当前回答
当从客户端发送来自不同域的JSON响应时,JSONP是克服浏览器限制的一种简单方法。
但是,这种方法的实际实施涉及到一些微妙的差异,这些差异往往没有得到清楚的解释。
下面是一个简单的教程,并排展示了JSON和JSONP。
所有的代码都可以在Github上免费获得,并且可以在http://json-jsonp-tutorial.craic.com上找到一个实时版本
其他回答
JSONP允许您指定传递JSON对象的回调函数。这允许您绕过同源策略,并将JSON从外部服务器加载到网页上的JavaScript中。
JSON
JSON (JavaScript对象表示法)是在应用程序之间传输数据的一种方便方法,特别是当目标是JavaScript应用程序时。
例子:
下面是一个使用JSON作为服务器响应传输的最小示例。客户端使用jQuery简写函数$. getjson发出Ajax请求。服务器生成一个散列,将其格式化为JSON并返回给客户端。客户端将其格式化并放入页面元素中。
服务器:
get '/json' do
content_type :json
content = { :response => 'Sent via JSON',
:timestamp => Time.now,
:random => rand(10000) }
content.to_json
end
客户:
var url = host_prefix + '/json';
$.getJSON(url, function(json){
$("#json-response").html(JSON.stringify(json, null, 2));
});
输出:
{
"response": "Sent via JSON",
"timestamp": "2014-06-18 09:49:01 +0000",
"random": 6074
}
JSONP(带填充的JSON)
当从客户端发送来自不同域的JSON响应时,JSONP是克服浏览器限制的一种简单方法。
JSONP在客户端唯一的变化是向URL添加回调参数
服务器:
get '/jsonp' do
callback = params['callback']
content_type :js
content = { :response => 'Sent via JSONP',
:timestamp => Time.now,
:random => rand(10000) }
"#{callback}(#{content.to_json})"
end
客户:
var url = host_prefix + '/jsonp?callback=?';
$.getJSON(url, function(jsonp){
$("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
});
输出:
{
"response": "Sent via JSONP",
"timestamp": "2014-06-18 09:50:15 +0000",
"random": 364
}
基本上,由于同源策略,您不允许通过AJAX从另一个域请求JSON数据。AJAX允许您在页面已经加载后获取数据,然后在返回后执行一些代码/调用函数。我们不能使用AJAX,但我们可以将<script>标签注入到我们自己的页面,这些标签可以引用托管在其他域的脚本。
Usually you would use this to include libraries from a CDN such as jQuery. However, we can abuse this and use it to fetch data instead! JSON is already valid JavaScript (for the most part), but we can't just return JSON in our script file, because we have no way of knowing when the script/data has finished loading and we have no way of accessing it unless it's assigned to a variable or passed to a function. So what we do instead is tell the web service to call a function on our behalf when it's ready.
例如,我们可能会从股票交易所API请求一些数据,除了我们通常的API参数外,还会给它一个回调函数,比如?callback=callThisWhenReady。web服务然后用我们的函数包装数据并像这样返回它:callThisWhenReady({…data…})。现在,一旦脚本加载,您的浏览器将尝试执行它(正常),然后调用我们的任意函数并为我们提供我们想要的数据。
它的工作原理很像普通的AJAX请求,只是我们必须使用命名函数而不是调用匿名函数。
jQuery实际上为您无缝地支持这一点,它为您创建了一个唯一命名的函数并将其传递出去,然后该函数将依次运行您想要的代码。
JSONP是带填充的JSON。也就是说,在开头放一个字符串,在它周围放一对括号。例如:
//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});
结果是,您可以将JSON作为脚本文件加载。如果您之前设置了一个名为func的函数,那么当脚本文件加载完成时,该函数将使用一个参数(即JSON数据)调用。这通常用于允许使用JSON数据进行跨站点AJAX。如果您知道example.com提供的JSON文件与上面给出的JSONP示例类似,那么您可以使用如下代码来检索它,即使您不在example.com域中:
function func(json){
alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);
“JSONP是带有额外代码的JSON”对于现实世界来说太简单了。不,你得有一点出入。如果一切都能正常工作,编程还有什么乐趣?
JSON不是JavaScript的子集。如果您所做的只是获取一个JSON对象并将其包装在一个函数调用中,总有一天您会被奇怪的语法错误所困扰,就像我今天一样。
推荐文章
- 用套接字发送消息到指定客户端。IO和node.js
- 在ASP中使用jQuery渲染局部视图。NET MVC
- 如何提取扩展从文件名字符串在Javascript?
- 在JavaScript中获取字符串中破折号后面的所有内容
- SystemJS和Webpack有什么不同?
- JSON到pandas DataFrame
- 如何使用jQuery去一个URL ?
- 停止/关闭由navigator.mediaDevices.getUserMedia打开的网络摄像头流
- Jquery禁用表单提交进入
- Javascript数组搜索和删除字符串?
- 如何复制对象属性在另一个对象?
- 如何绕过Access-Control-Allow-Origin?
- 我如何使用Node.js Crypto创建HMAC-SHA1哈希?
- JavaScript获取滚动窗口的X/Y位置
- JavaScript中不带else的三元运算符