js jsonp
来源:互联网 发布:mac怎么下载lol美服 编辑:程序博客网 时间:2024/06/06 00:31
json和jsonp的关系
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
json和jsonp缩写只相差一个字母,但是两者却完全不同。前者是一种数据的表达方式,后者则是网络请求的一种解决方案。
同源策略
使用ajax发送网络请求有一个条件,那就是同源策略。
同源策略要求:
- 协议类型相同 ->
http
、https
、ftp
等等 - 主机地址相同 ->
https://www.baidu.com/
或者自己的主机ip地址 - 端口号相同 ->
8080
、80
等等
例如平常使用webstorm进行调试的时候,webstorm会开一个本地服务器http://localhost:63342/xxxx
,但是如果你使用ajax去访问https://www.baidu.com/
之类的服务器你是无法拿到数据的。实际上浏览器已经拿到数据,但是做了一层隔离,不给你数据。
jsonp原理
在说原理之前首先要了解两个关于<script>
的特点
1. <script>
标签可以使用cdn加速(根据浏览器所在网络地区,从最近的服务器下载js脚本,一般下载框架和库),那么cdn的服务器毫无疑问是不同源的。所以,<script>
标签可以跨域访问别的服务器。
2. <script>
标签是通过src
节点属性获取js代码的,并且获取到的代码可以直接执行。
在了解了上面的2个<script>
的特点之后大概都能猜出来,jsonp就是使用<script>
以上两个特点来实现的,具体的实现方式有2种。
- 方式一
- 创建一个函数(名字随机生成,避免多次请求被覆盖),并且接收一个参数(服务器返回的数据)。
- 利用
<script>
标签发送请求,拼接上callback=方法名
参数。 - 后端要求接收这个
callback
参数,拿到方法名后在方法名后拼接()
,并且传入返回的数据
这种方式对于php来说就是字符串拼接,但是传回来的时候则是被js解析成调用对应的方法了。
// php$res = file_get_contents($url);$func = $_GET[callback];echo callback.'('.$res.')';
- 方式二
- 使用php或者nodejs去访问需要跨域的请求
- 用ajax访问这个php或者nodejs脚本
jsonp无论如何都要后端支持(要么是自己的后端写的php,要么是别人接口支持jsonp跨域的回调方法),否则无法使用。
方式一示例
// 1. 创建一个script标签var script = document.createElement('script');// 2. 随机生成一个方法// 用时间戳作为种子,这样随机生成的方法名绝对没有重复的。var funcName = 'jsonpFunc' + Math.floor(new Date().getTime() * Math.random());window[funcName] = function (json) { console.log(json); // 把请求完的标签从文档中移除 document.head.removeChild(script);};// 3. 拼接请求地址,加上回调script.src = 'http://api.douban.com/v2/movie/in_theaters?callback=' + funcName;// 4. 把script标签放到文档中,就会发送请求document.head.appendChild(script);
封装一下:
window.myJsonp = function (opt) { // 简单的容错 if (!opt || !opt.url) return; opt.callback = opt.callback || 'callback'; opt.params = opt.params || {}; opt.callback = opt.callback || function () {}; // 1. 创建一个script标签 var script = document.createElement('script'); // 2. 随机生成一个方法 var funcName = 'jsonpFunc' + Math.floor(new Date().getTime() * Math.random()); window[funcName] = function (json) { // 5. 把请求完的标签从文档中移除 document.head.removeChild(script); // 6. 删除添加到window的方法名称,避免污染 delete window[funcName]; // 7. 把获取到的数据通过回调的方式传出去 opt.callback(json); }; // 3. 拼接请求地址,加上回调(参数拼接和get请求一致) var params = ''; for (var key in opt.params) { params += key + '=' + opt.params[key] + '&'; } script.src = opt.url + '?' + params + 'callback=' + funcName; // 4. 把script标签放到文档中,就会发送请求 document.head.appendChild(script);};// 使用myJsonp({ url: 'http://api.douban.com/v2/movie/in_theaters', callback: function (json) { console.log(json); }});
方式二
待续。。。
- js jsonp
- JSONP解决JS跨域
- JS跨域 JSONP
- JS解析JSONP格式
- JS----Jsonp 简单使用
- js中利用jsonp来跨域
- js的json、jsonp、ajax
- Jsonp的实现js跨域
- js 跨域请求jsonp
- 【js】Jsonp解决js跨域问题
- JS跨域调用和JSONP
- js跨域简单解决(jsonp)
- jsonp实现跨越js调用的原理
- js 跨域请求,使用 jsonp
- js用jsonp跨域问题
- js jsonp跨域请求实现
- js跨域请求jsonp数据
- js利用jsonp实现跨域
- 用户名,密码,登录
- 糟糕的开始并不会糟糕结束
- 获取末级节点
- 笨办法学 Python · 续 练习 17:字典
- mipmap和drawable技术-Android
- js jsonp
- 腾讯优图NCNN框架在windows下的vs2013配置
- File路径相关_关于文件路径的反斜杠正斜杠和双斜杠问题
- Python小游戏 -- 猜数字
- Unity3d 技巧(14) -自定义 UnityEvent 序列化到Editor 界面
- HDU3265 Posters(线段树,扫描线,矩形面积并)
- Spring实战笔记——面向切面编程(一)
- tomcat安装前为什么要安装jdk?
- c++对象内存布局