JSONP的客户端的具体实现
JSONP的客户端的具体实现
1.远程调用一个js,代码如下:
<script type="text/javascript">
var localHandler = function(data){
alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
remote.js文件代码如下:
localHandler({"result":"我是远程js带来的数据"});
2.动态生成脚本
<script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签,设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head,此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
3.封装代码
把代码封装一下,以便于与用户界面交互,从而实现多次和重复调用。
JSONP的客户端的具体实现的更多相关文章
- 使用Httpclient来替代客户端的jsonp跨域解决方案
最近接手一个项目,新项目需要调用老项目的接口,但是老项目和新项目不再同一个域名下,所以必须进行跨域调用了,但是老项目又不能进行任何修改,所以jsonp也无法解决了,于是想到了使用了Httpclient ...
- jQuery-1.9.1源码分析系列(十六)ajax——jsonp原理
json jsonp 类型 "json": 把响应的结果当作 JSON 执行,并返回一个JavaScript对象.如果指定的是json,响应结果作为一个对象,在传递给成功处理函数 ...
- 深入理解JSONP原理——前端面试
JSON和JSONP虽然只有一个字之差,但是它们俩是八竿子打不着的:JSON是一种数据交换格式,JSONP是非正式的跨域数据交换协议. 为什么说JSONP是非正式的传输协议呢?因为它就是利用了< ...
- 关于试用jquery的jsonp实现ajax跨域请求数据的问题
我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...
- jQuery源码分析系列(34) : Ajax - 预处理jsonp
上一章大概讲了前置过滤器和请求分发器的作用,这一章主要是具体分析每种对应的处理方式 $.ajax()调用不同类型的响应,被传递到成功处理函数之前,会经过不同种类的预处理(prefilters). 预处 ...
- Angularjs学习笔记9_JSON和JSONP
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决.最被推崇或者说首选的 ...
- [转]说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
本文转自:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临两 ...
- json jsonp的区别
前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域 ...
- JSON和JSONP (含jQuery实例)(share)
来源:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临两个问 ...
随机推荐
- 光盘卡在MacBook里退不出来咋办?
如果光盘推不出来了怎么办?很多同学想到的是:上针!不过这招对MacBook Pro毫无用处,因为没有给你插针的地方,没有机械按键,只有键盘右上角一个推出的快捷键,不过在光盘卡在光驱里时,按此健基本无效 ...
- Jasper_filter data_pass field data from main to sub to filter some data
main report: 1 add variable <variable name="Variable_rule" class="java.lang.String ...
- 移动端app测试
对于手机项目(应用软件),主要是进行系统测试. 而针对手机应用软件的系统测试,我们通常从如下几个角度开展测试工作: 功能模块测试: 交叉事件测试: 性能测试: 安全测试: 容量测试: 兼容性测试: 接 ...
- 对比iOS网络组件:AFNetworking VS ASIHTTPRequest
对比iOS网络组件:AFNetworking VS ASIHTTPRequest 作者 高嘉峻 发布于 2013年2月28日 | 7 讨论 分享到:微博微信FacebookTwitter有道云笔记邮件 ...
- 用法总结:NSArray,NSSet,NSDictionary-备用
Foundation framework中用于收集cocoa对象(NSObject对象)的三种集合分别是: NSArray 用于对象有序集合(数组)NSSet 用于对象无序集合 (集合)NS ...
- Web2py也有意思的
多学学,以后可以方便的自己写代码了. 对于各种WEB框架,这也是打一个基础的时候. 相信学入门了,对PHP的,JAVA的WEB框架,都是能理解更深入的. def index(): "&quo ...
- GS1011无线模块的使用简介。
一.硬件说明: 只是用电脑的串口助手与之通信,利用了max232进行电平转换.是用模块的UART0作为通信接口. 模块引脚 接点 说明 1.17.32.48 GND 模块地 9 3.3V VB ...
- 总结:man, info, hwclock, cal, type, which, dirname, basename, who, which, whatis, makewhatis, hash, tty
man, info, help, date, hwclock, cal, shutdown, reboot, halt, poweroff, type, cd, which, dirname, bas ...
- 杜教的AAA树
膜膜膜,常数挺小的... #include<iostream> #include<cstdio> #include<cmath> #include<algor ...
- Java---设计模块(工厂方法)
★ 场景和问题 Java程序开发讲究面向接口编程,隐藏具体的实现类,可是如何得到接口呢? 工厂类的命名规范:***Factory 单例工厂方法的命名规范:getInstance() 工厂的本质是&qu ...