JSONP扫盲篇
来源:互联网 发布:关键词软件 编辑:程序博客网 时间:2024/06/06 13:16
参考资料
- JSONP-w3cschools
- JSONP的工作原理是什么
- JSONP详解
- 说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
- 浏览器同源政策及其规避方法
JSONP的起源
- 普通的Ajax请求不能跨域
- Web上拥有src属性的标签(例如<script>、<img>、<iframe>)拥有跨域的能力
- 想要通过Web端跨域访问数据,就需要在服务端设法把数据装进js文件,然后让Web端去调用
- 刚好JSON格式流行起来了,而且原声JS支持JSON格式
- Web端请求服务器上动态生成的JS文件,来解决Web端跨域请求的问题
- 慢慢就形成了一种非正式协议,叫做JSONP。
什么是JSONP
JSONP(JSONP - JSON with Padding)
利用script标签的src属性,通过动态创建一个script标签,指定src属性为跨域的api,在返回的字符串中使用自定义函数形式包装起来,然后在html中调用自定义函数,拿到返回的字符串。
允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
JSONP的前端实现方式
- 本人太懒,此处套用一下阮老师的代码
<script>function addScriptTag(src) { var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script);}window.onload = function () { addScriptTag('http://example.com/ip?callback=foo');}function foo(data) { console.log('Your public IP address is: ' + data.ip);};</script>
- 不得不提的jQuery中的实现方式
- jQuery在处理JSONP类型的请求时,自动帮你生成回调函数并把数据取出来供success属性方法来调用。
- 在jQuery中,使用JSONP感觉就和使用Ajax没有区别,但实际上它们的底层实现实现是完全不一样的。
- 通常都会把JSONP封装到了ajax中,但是JSONP不是Ajax的一个特例。
需要后台支持什么
当使用script请求地址时,会将返回的字符串,默认当成js解析。由于后端返回是的callback(xxx),所以会调用本地的callback函数。
从原理上来看,要使用JSONP,必须要后端返回相应的数据,这个就是JSONP的模式了,允许客户端传递一个callback函数,后端将数据包裹在callback函数中返回。
容易混淆的概念之xhr
- XMLHttpRequest 用于在后台与服务器交换数据,是Ajax的基础。
- 可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
阅读全文
1 0
- JSONP扫盲篇
- GPRS扫盲篇
- AIX常用命令扫盲篇
- 服务器扫盲篇
- Portal 扫盲篇
- 互联网扫盲100篇
- java扫盲篇之一
- hadoop扫盲篇
- Android NDK扫盲篇
- android扫盲篇
- hadoop扫盲篇
- hadoop-扫盲篇
- 批处理扫盲篇
- 项目管理扫盲篇
- bluez 扫盲篇
- flex扫盲篇
- Linux中断扫盲篇
- 常用电子元件扫盲篇
- c++的数据类型的引用(三种方式有一些区别)
- Ubuntu Linux 安装gSoap
- 挑战程序竞赛系列(19):3.1最小化第k大的值
- 不要总做老好人
- 51nod 1574 排列转换
- JSONP扫盲篇
- 从头到尾彻底理解KMP(2014年8月22日版)转载
- iOS中UITableView的cell点击事件不触发didSelectRowAtIndexPath
- Java爬虫实践--爬取CSDN网站图片为例
- jxbrowser java代码直接调用js代码 (破解版请联系作者)免license
- 文件权限和属性: drwxr-xr-x 具体含义
- iOS8 通过xib创建ViewController控制器 错误问题解决
- Scrapy网络爬虫----初识
- 二叉树层次遍历-LintCode