一个小例子讲讲jsonp
1.何为jsonp(json with padding)
json我们都知道并用过。那么jsonp呢,呃,好像听过,但没用过。很久以来楼主也只是听过这个名词而已。直到今晚楼主看到一篇文章(http://www.cnblogs.com/twobin/p/3395086.html),然后决定探究一下什么是jsonp。
我们都知道js文件是不能跨域操作内容的,这在js里面叫做‘同源策略’,意即js文件只能操作相同域名、相同端口、相同协议的html文档。但同时我们知道浏览器允许跨源请求<script>资源,例如可以通过指定<script>标签的src属性去请求其它域名的js文件,例如我们常常如此引用jquery文件,<script src = 'code.jquery.com/jquery-latest.min.js'></script>,然后我们就能使用jquery里的方法来任意操作我们html文档里的内容了。
嗯,jsonp就是利用这一原理实现的跨域访问数据。说白了,其实jsonp技术本质上就是创建<script>标签,并把其src指向跨域地址而实现跨域获取数据。通常的做法就是,异步请求跨域的服务器端时,不直接返回数据而是返回一个js方法调用,将真正的数据作为该js方法调用的参数传过来。
2.jsonp实例
原理不多说,下面以百度搜索为例讲讲jsonp的用法。当我们在百度首页输入关键字时,会出现下拉联想框。实际当我们在文本框中输入每一个关键字时都会动态构建一个<script>标签,访标签会将我们输入的关键字作为请求参数传递给suggestion.baidu.com。注意图中标红的部分:
在这里创建了<script src="http://suggestion.baidu.com/su?wd=ipad&p=3&cb=window.bdsug.sug&sid=&t=1383236316435" charset="gb2312"></script>。
该标签src指向的域名是suggestion.baidu.com(三级域名),与我们访问的baidu.com(二级域名)不是同一个域名,在这个请求中我们指定了wd = ipad, cb = window.bgsug.sug,合理推测cb就是baidu.com文档里包含的js方法,该方法会处理从suggestion.baidu.com返回的针对wd = ipad的响应。
看到这个<script>请求的返回内容,最终我们在baidu.com页面的home.js文件中寻找到了window.bdsug.sug方法:
相关代码如下,
1.其中getDataScript方法根据用户输入的关键字,构建相关的<script>标签向suggestion.baidu.com发起请求
2.bdsug.sug方法为收到suggestion.baidu.com响应后的处理函数
var Request = (function() {
var dataElm;
var cookieSwitch;
function getDataScript(wd) {
var requestUrl = bds.comm.sugHost || "http://suggestion.baidu.com/su";
Request.dm({type: "need_cookie"});
if (dataElm) {
document.body.removeChild(dataElm)
}
dataElm = C("SCRIPT");
dataElm.src = requestUrl + "?wd=" + encodeURIComponent(wd) + "&p=" + cookieSwitch + "&cb=window.bdsug.sug&sid=" + bds.comm.sid + "&t=" + (new Date()).getTime();
dataElm.charset = "gb2312";
document.body.appendChild(dataElm);
addTj({rsv_sug3: ++rsv_sug3});
rsv_temp_time = new Date().getTime();
rsv_temp_flag = false;
rsv_timer = setTimeout(function() {
addTj({rsv_sug4: rsv_sug4 += 5000});
rsv_temp_flag = true
}, 5000)
}
return MessageDispatcher.ini({rm: function(evtObj) {
switch (evtObj.type) {
case "request_data":
getDataScript(evtObj.wd);
break;
case "give_cookie":
var _sug = evtObj.sug;
if (_sug > 0) {
_sug = 3
}
cookieSwitch = _sug;
break
}
}})
})();
bdsug.sug = function(dataObj) {
bdsug.dm({type: "response_data",data: dataObj});
if (!rsv_temp_flag) {
var ipt = G("kw");
if (ipt.value.toLowerCase() == dataObj.q) {
addTj({rsv_sug1: ++rsv_sug1})
}
clearTimeout(rsv_timer);
addTj({rsv_sug4: rsv_sug4 += (new Date().getTime() - rsv_temp_time)})
}
};
最后我们总结一下整个流程:
1.在baidu.com输入框中键入关键字
2.动态构建<script src="http://suggestion.baidu.com/su?wd=你输入的关键字&p=3&cb=window.bdsug.sug...></script>向suggestion.baidu.com发起请求
3.suggestion.baidu.com返回内容 'window.bdsug.sug({q:"ipad",p:false,s:["ipad4","ipad mini","ipad5","ipad mini2","ipad air","ipad2"}])'
4.调用baidu.com页面home.js中的bdsug.sug方法,构建下拉联想列表。
另见我自己做的百度首页:
http://caochao.github.io/jsonp.html
参见stackoverflow关于what is jsonp的讨论帖子:
http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about
一个小例子讲讲jsonp的更多相关文章
- java连接mysql的一个小例子
想要用java 连接数据库,需要在classpath中加上jdbc的jar包路径 在eclipse中,Project的properties里面的java build path里面添加引用 连接成功的一 ...
- java操作xml的一个小例子
最近两天公司事比较多,这两天自己主要跟xml打交道,今天更一下用java操作xml的一个小例子. 原来自己操作xml一直用这个包:xstream-1.4.2.jar.然后用注解的方式,很方便,自己只要 ...
- MVVM模式的一个小例子
使用SilverLight.WPF也有很长时间了,但是知道Binding.Command的基本用法,对于原理性的东西,一直没有深究.如果让我自己建一个MVVM模式的项目,感觉还是无从下手,最近写了一个 ...
- 使用Trinity拼接以及分析差异表达一个小例子
使用Trinity拼接以及分析差异表达一个小例子 2017-06-12 09:42:47 293 0 0 Trinity 将测序数据分为许多独立的de Brujin grap ...
- 从一个小例子认识SQL游标
1 什么是游标: 关系数据库中的操作会对整个行集起作用. 例如,由 SELECT 语句返回的行集包括满足该语句的 WHERE 子句中条件的所有行. 这种由语句返回的完整行集称为结果集. 应用程序 ...
- 关于SVN配置文件的一个小例子
1 背景假设 厦门央瞬公司是一家电子元器件设备供应商,其中有个ARM部门,专门负责ARM芯片的方案设计.销售,并在北京.上海各设立了一个办事处.对于工作日志,原先采用邮件方式发给经理,但是这种方式 ...
- Vue2.x源码学习笔记-从一个小例子查看vm实例生命周期
学习任何一门框架,都不可能一股脑儿的从入口代码从上到下,把代码看完, 这样其实是很枯燥的,我想也很少有人这么干,或者这么干着干着可能干不下去了. 因为肯定很无聊. 我们先从一个最最简单的小例子,来查看 ...
- Spring和Hibernate结合的一个小例子
1.新建一个SpringHibernate的maven项目 2.pom文件的依赖为 <dependency> <groupId>junit</groupId> &l ...
- Spring.Net在ASP.NET Mvc里使用的一个小例子
就贴个小例子,就不注意格式了. 1.下载dll NuGet的下载地址:http://docs.nuget.org/docs/start-here/installing-nuget 在vs的NuGet里 ...
随机推荐
- Ajax异步请求-简单模版
<script type="text/javascript"> window.onload = function () { document.getElementByI ...
- C++ ODR规则与dlopen 问题
问题: 开发平台*.so插件的时候遇到相同的函数名称出现在不同的.so文件中,假设分别为a.so和b.so,b.so要使用a.so中的定义函数 a(),而在dlopen会先加载a.so然后加载b.so ...
- 在MFC框架中使用OpenGL的简单实例
引言 我们知道,在MFC框架中,用于绘图的接口是GDI.但GDI只能绘制简单的2D图形,要想制作精美的3D图形,一个可行的办法是使用OpenGL或者Direct3D等第三方库. 由于最近在给导师的一个 ...
- 嵌入式开发应该掌握的一些Linux命令
Linux提供了大量的命令,利用它可以有效地完成大量的工作,如磁盘操作.文件存取.目录操作.进程管理.文件权限设定等.所以,在Linux系统上工作离不开使用系统提供的命令.要想真正理解Linux系统, ...
- 【暑假】[深入动态规划]UVa 10618 Fixing the Great Wall
UVa 10618 Fixing the Great Wall 题目: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=361 ...
- 利用迅雷提供的接口从磁力链得到bt种子文件
本地下载工具的磁力链下载速度不给力,而百度云盘有提供离线下载服务,相当于就是直接到服务器取个链接而已.但这需要bt文件,而我只有链力链.网上搜了一下,可以从磁力链构造一个bt文件的下载地址,用pyth ...
- matlab 函数说明--fspecial
好吧,这个函数在图像处理中运用得非常广泛,虽然我还是觉得不知道为啥要取这个名字,fspecial的作用如下: 产生一个预定义的2D 滤波器(create a predefined 2D ...
- Excel中输入√背景显示蓝色,输入×背景显示红色
实现效果,如下图所示: 步骤:以office2013为例 1.点击"开始->条件格式" 2.点击"突出显示单元格规则->等于" 3.设置对应的规则, ...
- leetcode@ [49] Group Anagrams (Hashtable)
https://leetcode.com/problems/anagrams/ Given an array of strings, group anagrams together. For exam ...
- cadence16.6 中orcad导出网表时ERROR (ORCAP-5004)(win7 旗舰版32位)
1,选择开始>运行,打开运行窗口.2,输入cmd,打开命令行窗口.3,进入cmd,找到orpxllite.ocx和orTrueReuse.ocx的所在的目录4,输入以下命令:regsvr32 & ...