前端人员必须会的jsonp!
来源:互联网 发布:js包装函数是什么 编辑:程序博客网 时间:2024/04/30 23:08
同源策略(Same origin Policy)
浏览器出于安全方面的考虑,只允许与同域下的接口交互。
同域指的是?
同协议:如都是http或者https
同域名:如都是http://jirengu.com/a 和http://jirengu.com/b
同端口:如都是80端口
比如: 用户打开了 页面: http://jirengu.com/blog, 当前页面下的 js 向 http://jirengu.com/xxx 的接口发 ajax 请求,浏览器是允许的。但假如向: http://hunger-valley.com/xxx 发ajax请求则会被浏览器阻止掉,因为存在跨域调用。
「原来如此,怪不得浏览器会报错。跨域不过如此嘛!那 JSONP是什么呢?」
HTML 中 script 标签可以加载其他域下的js,比如我们经常引入一个其他域下线上cdn的jQuery。那如何利用这个特性实现从其他域下获取数据呢?
可以先这样试试:
这时候会向天气接口发送请求获取数据,获取数据后做为 js 来执行。但这里有个问题, 数据是 JSON 格式的数据,直接作为 JS 运行的话我如何去得到这个数据来操作呢?这样试试:这个请求到达后端后,后端会去解析callback这个参数获取到字符串showData,在发送数据做如下处理:之前后端返回数据: {“city”: “hangzhou”, “weather”: “晴天”}现在后端返回数据: showData({“city”: “hangzhou”, “weather”: “晴天”})前端script标签在加载数据后会把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行,这实际上就是调用showData这个函数,同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。用户只需要在加载提前在页面定义好showData这个全局函数,在函数内部处理参数即可。 function showData(ret){ console.log(ret); }「原来这就是 JSONP(JSON with padding),总结一下:」
1. JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行
提前在页面上声明一个函数,函数名通过接口传参的方式传给后台,后台解析到函数名后在原始数据上「包裹」这个函数名,发送给前端。换句话说,JSONP 需要对应接口的后端的配合才能实现。
[封装jsonp]
function jsonp(setting){
setting.data = setting.data || {}
setting.key = setting.key||’callback’
setting.callback = setting.callback||function(){}
setting.data[setting.key] = ‘onGetData’window.onGetData = function(data){
setting.callback (data);
}var script = document.createElement(‘script’)
var query = []
for(var key in setting.data){
query.push( key + ‘=’+ encodeURIComponent(setting.data[key]) )
}
script.src = setting.url + ‘?’ + query.join(‘&’)
document.head.appendChild(script)
document.head.removeChild(script)
}
jsonp({
url: ‘http://api.jirengu.com/weather.php‘,
callback: function(ret){
console.log(ret)
}
})
jsonp({
url: ‘http://photo.sina.cn/aj/index‘,
key: ‘jsoncallback’,
data: {
page: 1,
cate: ‘recommend’
},
callback: function(ret){
console.log(ret)
}
})
- 前端人员必须会的jsonp!
- 编程人员必须会用的软件
- 前端人员必须了解的各种浏览器
- web前端人员每天必须关注的前端社区网站
- 前端必须会的基本知识题目
- 做前端必须会用的表图插件
- 前端必须会的5个原生JavaScript对象方法
- 看完必会的JSONP
- jAVA程序人员必须知道的。
- 未来IT人员必须掌握的知识
- jsonp 前端和后端的结合
- 工作中必须会的
- 程序员必须会的英文单词
- 学习前端人员的个人动态
- 七个Web前端程序员必须会用css技巧
- 前端--一个非前端人员的个人主页优化历程
- 前端必会的知识点
- IT人员必须关注的五个IT新技术方向
- 地域性与忽略大小写的字符串比较
- Codeforces 230B
- jzoj 4812. 【NOIP2016提高A组五校联考2】string 排列组合+乘法逆元
- nginx.org的Using nginx as HTTP load balancer页面翻译
- Leetcode 286. Walls and Gates (Google面试题 BFS,记忆化搜索)
- 前端人员必须会的jsonp!
- 如何从技术菜鸟成为“10倍效率”开发者
- NRF24L01双向传输数据
- Android学习笔记-事件处理机制
- Android——View的工作原理(一)
- 多线程练习
- faster rcnn matlab
- iOS学习之定位
- 使用CH340遇到的问题