JSONP—or JSON with padding—is a sneaky technique that web developers came up with to work around the browser restrictions when requesting data from third-party domains.

It bypasses these restrictions by loading external content using script tags instead of the usual XMLHttpRequest. Adding a script tag to the DOM loads and executes its content directly, and the security restrictions are not applied. The remote request’s content is then normal JSON wrapped in a function call (the P in JSONP). It looks like this:

callbackFn({ a: , b: , c: })

JSONP URLs usually accept a query string parameter so that the caller can specify the name of the callback. The developer then has to define a function in her code that has the same name as the callback in the server response, and when the script tag is added to the document, that function will be called with the JSON data as the first parameter. Libraries like jQuery automate this process by internally creating the global function to handle the JSONP call, and tidying up afterward to avoid polluting the global namespace.

Example:

JSONP data:

eqfeed_callback({
"type": "FeatureCollection",
"metadata": {
"generated": 1408030886000,
"url": "http://earthquake.usgs.gov/earthquakes/...",
"title": "USGS All Earthquakes, Past Day",
"status": 200, "api": "1.0.13", "count": 134
},
"features": [
{
"type": "Feature",
"properties": {
"mag": 0.82,
"title": "M 0.8 - 3km WSW of Idyllwild-Pine Cove, California",
"place": "3km WSW of Idyllwild-Pine Cove, California",
"time": 1408030368460,
...
},
"geometry": {
"type": "Point",
"coordinates": [ -116.7636667, 33.7303333, 17.33 ]
},
"id": "ci15538377"
},
...
]
})

So 'eqfeed_callback' is the callback we will call.

Load JSONP data to the script tag:

    function loadJSONP(url) { /* (2)  */
var script = document.createElement('script');
script.src = url; var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
}
var quakes = Rx.Observable.create(function(observer){
window.eqfeed_callback = function(response){
var quakes = response.features;
console.log("quakes:", JSON.stringify(quakes, null, 2));
quakes.forEach(function(quake){
observer.onNext(quake)
})
} loadJSONP(QUAKE_URL);
}); quakes.subscribe(function(quake){
var coords = quake.geometry.coordinates;
var size = quake.properties.mag * 1000; L.circle([coords[1], coords[0]], size).addTo(map)
});

We create the callback or let's say the logic to handle the JSONP data, here using RxJS, after subscribe, then we can get the data stream.

[Web] What Is JSONP?的更多相关文章

  1. 通过扩展让ASP.NET Web API支持JSONP

    同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...

  2. (转)通过扩展让ASP.NET Web API支持JSONP

    原文地址:http://www.cnblogs.com/artech/p/3460544.html 同源策略(Same Origin Policy)的存在导致了“源”自A的脚本只能操作“同源”页面的D ...

  3. ASP.NET Web API 配置 JSONP

    之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...

  4. Web API 实现JSONP或者安装配置Cors跨域

    前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...

  5. 通过扩展让ASP.NET Web API支持JSONP -摘自网络

    同源策略(Same Origin Policy)的存在导致了“源”自A的脚本只能操作“同源”页面的DOM,“跨源”操作来源于B的页面将会被拒绝.同源策略以及跨域资源共享在大部分情况下针对的是Ajax请 ...

  6. web.py实现jsonp

    浏览器端请求 $.getJSON("/currenttime?callback=?", function (json){ $("#time").html(jso ...

  7. ahjesus 让我的MVC web API支持JsonP跨域

    无数被跨域请求爆出翔来的人 遇到请求成功却不能进入success 总是提示parsererror 参考一下两篇文章吧 参考文章http://www.asp.net/web-api/overview/s ...

  8. JavaScript跨域调用、JSONP、CORS与ASP.NET Web API[共8篇]

    [第1篇] 同源策略与JSONP 浏览器是访问Internet的工具,也是客户端应用的宿主,它为客户端应用提供一个寄宿和运行的环境.而这里所说的应用,基本是指在浏览器中执行的客户端JavaScript ...

  9. [CORS:跨域资源共享] 同源策略与JSONP

    Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分."同源策略"限制了JavaScript的跨站点调用 ...

随机推荐

  1. hdu 4642 Fliping game(博弈)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4642 题意:给定一个棋盘,0表示向下,1表示向上,选一个x,y, 然后翻转从x,y 到n,m.的所有硬币, ...

  2. [转]jBoss事务控制

    转自:http://blog.csdn.net/trendgrucee/article/details/8545512   一.基础知识 1.JTA,即Java Transaction API,译为J ...

  3. EF的表连接方法Include() - nlh774

    在EF中表连接常用的有Join()和Include(),两者都可以实现两张表的连接,但又有所不同. 例如有个唱片表Album(AlbumId,Name,CreateDate,GenreId),表中含外 ...

  4. Oracle数据库安装后,登录Database Control时密码错误

    解决方案1(实测可行): sys 和 system用户的用户名和密码还记得不?试试看如果不行,用sqlplus 在服务器本地登录%sqlplus / as sysdbaSQL>alter use ...

  5. Swift数组的加法运算符用法:array1 += array2

    var stringList1 = [String]() //创建String类型空数组 var stringList2 = ["1", "3", " ...

  6. Print the numbers between 30 to 3000.

    Microsoft Interview Question Developer Program Engineers 看到一个题目比较有意思: Print the numbers between 30 t ...

  7. Ofbiz 10.04 + eclipse 安装与配置

    1.下载 ofbiz 10.04:http://ofbiz.apache.org/download.html: 2.下载 freemarker-2.3.15 eclipse 插件(FreeMarker ...

  8. linux常识

    一.linux常识 1.为什么学习linux及如何学习linux? 基于linux的操作系统是一种自由和开放源代码的类UNIX操作系统,其定义组件是linux内核,其稳定性.安全性.处理多并发已经得到 ...

  9. DateTime和DateTime2

    1.与ANSI和ISO8601标准的一致性不同 datetime不符合该标准,datetime2符合该标准.对于新的应用,尽量使用符合标准的类型. 2.表示范围的不同 datetime:1753-01 ...

  10. ubuntu openstack spice

    Openstack启用spice协议 #控制节点 #安装 ? 1 apt-get install nova-spiceproxy spice-html5 spice-vdagent #配置 nano ...