我对这个问题的探究来源于一个需求:

当访问某个页面的时候,需要向另外一个网站报告一下这次访问的信息。

其实发一个跨域的请求就能大致实现这个需求。我们发跨域的例子其实很常见,例如请求一个第三方的图片、引入一个第三方的样式文件、引入一个cdn上的js文件。然后,说到发送请求,在这个web2.0的时代,我们自然而然会想到Ajax请求。但是遗憾的是,考虑到安全问题,即所谓的同源安全策略,用ajax请求一个第三方的地址是被浏览器所禁止的。然而天无绝人之路,有个叫JSONP的技术就是来解决这种问题的。

说道JSONP,可能多数人对它的知晓程度仅限于jQuery,jQuery提供了发送jsonp请求的方法。比如在使用$.ajax()方法的时候:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Using YQL and JSONP
$.ajax({
url: "http://query.yahooapis.com/v1/public/yql", // the name of the callback parameter, as specified by the YQL service
jsonp: "callback", // tell jQuery we're expecting JSONP
dataType: "jsonp", // tell YQL what we want and that we want JSON
data: {
q: "select title,abstract,url from search.news where query=\"cat\"",
format: "json"
}, // work with the response
success: function( response ) {
console.log( response ); // server response
}
});

jQuery将jsonp请求封装成类似ajax请求的样子,这样能让开发者在使用的时候更加方便,但是实际上,jsonp压根不是通过XMLHttpRequest来实现的。

一个简单的JSONP请求可以通过一下代码实现:

1
2
3
4
5
6
7
8
9
var callbackName = 'iAmTheCallback';
window[callbackName] = function (uuu, vvv, www) {
// 对返回的数据做后续处理
} var script = document.createElement('script');
script.src = 'http://melon.github.io/xxx/yyy?callback='+callbackName;
document.body.appendChild(script);

这是前端部分的代码,要想真正实现JSONP的功能,还需要后端的配合。针对上面这个例子,当前端请求这个script地址的时候,后端只要按以下内容响应就会有神奇的效果:

1
iAmTheCallback('abc', 'def', 'ghi');

说道这儿,很多人也许就恍然大悟了。JSONP名字听着高端,其实也不过如此嘛。

实际上,jQuery发JSONP请求时也是这么做的,去这里可以窥见一斑。

JSONP是如何工作的的更多相关文章

  1. 浅谈JSONP 的本质工作原理

    json 是一种数据格式jsonp 是一种数据调用的方式. 你可以简单的理解为 带callback的json就是jsonp 话说我们访问一个页面的时候 需要像另一个网站获取部分信息, 这就是所谓的跨域 ...

  2. 从 AJAX 到 JSONP的基础学习

    目录索引: 一.AJAX的概念二.POST && GET三.原生实现AJAX简单示例 3.1 实现代码 3.2 重点说明四.框架隐藏域 4.1 基本概念 4.2 后台写入脚本 4.3 ...

  3. JSONP解决ajax跨域问题

    在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested r ...

  4. JavaScript的jsonp

    目录索引: 一.AJAX的概念二.POST && GET三.原生实现AJAX简单示例 3.1 实现代码 3.2 重点说明四.框架隐藏域 4.1 基本概念 4.2 后台写入脚本 4.3 ...

  5. JSON,JSONP

    http://blog.csdn.net/huaishuming/article/details/40046729 说明: 在做2个系统间传值时出现: 已阻止交叉源请求:同源策略不允许读取 http: ...

  6. 说说JSON和JSONP,浅析JSONP解决AJAX跨域问题

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

  7. JSON和JSONP,浅析JSONP解决AJAX跨域问题

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

  8. 浅析JSONP-解决Ajax跨域访问问题

    浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...

  9. http与websocket(基于SignalR)两种协议下的跨域基于ASP.NET MVC--竹子整理

    这段时间,项目涉及到移动端,这就不可避免的涉及到了跨域的问题.这是本人第一次接触跨域,有些地方的配置是有点麻烦,导致一开始的不顺. 至于websocket具体是什么意义,用途如何:请百度. 简单说就是 ...

随机推荐

  1. spring 多数据源一致性事务方案

    spring 多数据源配置 spring 多数据源配置一般有两种方案: 1.在spring项目启动的时候直接配置两个不同的数据源,不同的sessionFactory.在dao 层根据不同业务自行选择使 ...

  2. svn迁移gitlab,构建前端打包发布流程

    前端资源迁移     目前公司的前端资源托管在svn服务器上,由于团队的逐渐扩大,svn的分支管控越来越不灵活,而且对于以后前端流程一体化的处理支持不是很好,因此决定在版本控制上转向git.git的好 ...

  3. Oracle冷备迁移脚本(文件系统)

    Oracle冷备迁移脚本(文件系统) 两个脚本: 配置文件生成脚本dbinfo.sh 网络拷贝到目标服务器的脚本cpdb16.sh 1. 配置文件生成脚本 #!/bin/bash #Usage: cr ...

  4. css或者js文件后面跟着参数

    以前一直不懂,看到某某网站上面css链接 ?v=20130203类似这样的 后来发现是为了避免浏览器读取缓存而采取的强制刷新缓存的办法. “比如新浪首页在2010年4月5日改版,只是改变CSS样式表, ...

  5. C语言计算2个数的最小公倍数

    #include<stdio.h>int main(){   int a,b,i=1,temp,lcm;   scanf("%d %d",&a,&b); ...

  6. JavaWeb_day03_员工信息添加修改删除

    day03员工的添加,修改,删除 修改功能 思路 : 点击修改员工数据之后,跳转到单行文本,查询要修改的员工id的全部信息,主键id设置为readonly,其余的都可以修改, 修改之后,提交按钮,提交 ...

  7. 灾难 bzoj 2815

    灾难(1s 128MB)catas [样例输入] 5 0 1 0 1 0 2 3 0 2 0 [样例输出] 4 1 0 0 0 题解: 主要算法:拓扑排序:最近公共祖先(Lca): 先跑出拓扑序 我们 ...

  8. 分布式文件系统 - FastDFS 在 CentOS 下配置安装部署

    少啰嗦,直接装 看过上一篇分布式文件系统 - FastDFS 简单了解一下的朋友应该知道,本次安装是使用目前余庆老师开源的最新 V5.05 版本,是余庆老师放在 Github 上的,和目前你能在网络上 ...

  9. Jquery 页面间传值(非QuerryString)

    实现原理: 实现方式不是很复杂,父页面A打开一个子页面 A1,并同时写一个带参数的接收数据函数Receive(result),在A1页面进行逻辑操作,然后调用父页面A的Receive(result)函 ...

  10. 【原】EasyUI ComboGrid 集成分页、按键示例

    需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下键在表格中移动选择行数据: 4.可以使用回车键在表格中选中行数据: 5.在下拉框的文本框中输入内容,能查询表格: 6. ...