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. UPC 2224 Boring Counting ★(山东省第四届ACM程序设计竞赛 tag:线段树)

    [题意]给定一个长度为N的数列,M个询问区间[L,R]内大于等于A小于等于B的数的个数. [题目链接]http://acm.upc.edu.cn/problem.php?id=2224 省赛的时候脑抽 ...

  2. Java [Leetcode 242]Valid Anagram

    题目描述: Given two strings s and t, write a function to determine if t is an anagram of s. For example, ...

  3. POJ 2677 Tour

    题意:双调欧几里得旅行商问题.算法导论15-1题,从最左边的点严格从左走到右再从右走到左回到起点,所有点都要走且只走一次,求最短路径. 解法:定义dp[i][j]表示从i走到j的双调路径,分为两种情况 ...

  4. java类加载器学习2——自定义类加载器和父类委托机制带来的问题

    一.自定义类加载器的一般步骤 Java的类加载器自从JDK1.2开始便引入了一条机制叫做父类委托机制.一个类需要被加载的时候,JVM先会调用他的父类加载器进行加载,父类调用父类的父类,一直到顶级类加载 ...

  5. 《深入Java虚拟机学习笔记》- 第9章 垃圾收集

    一.Java内存组成 组成图 堆(Heap) 运行时数据区域,所有类实例和数组的内存均从此处分配.Java虚拟机启动时创建.对象的堆内存由称为垃圾回收器的自动内存管理系统回收. 组成 组成 详解 Yo ...

  6. put a ContextMenu into the header of a TabPage z

    publicclassMyTabControl:TabControl { protected override void OnMouseUp(MouseEventArgs e){ if(e.Butto ...

  7. ccr1

    Concurrency and Coordination Runtime Jeffrey Richter Code download available at:ConcurrentAffairs200 ...

  8. 31、activity 四种工作模式

    一个应用通常(不一定)对应一个任务栈,相当于有个集合,保存了这个app里所有的页面栈的规则是先进后出,"进"就相当于打开了一个页面,"出"就相当于返回时关闭一个 ...

  9. 29、activity横竖屏切换细节问题

    1 import android.app.Activity; import android.content.Intent; import android.os.Bundle; import andro ...

  10. GTK+布局管理

    GTK+布局管理 GTK+ 布局管理 在本章中,我们将讲述如何将构件布置在窗口与对话框中. 当我们在设计应用程序的图形界面时,我们首先要决定的是在程序中用到哪种构件和管理应用程序中的这些构件.为了方便 ...