JSONP个人心得笔记
目录
1.学习jsonp掌握三个问题
- 1.1什么是jsonp
- 1.2为什么使用jsonp
- 1.3jsonp的调用原理是什么
2.什么是jsonp
2.1定义
基于json字符串格式的一种使用模式,相当于在json字符串外包装一个方法名称,json就相当于这个方法的参数function test(String json)
2.2样子
test({"status":200,"msg":"","data":"{\"userId\":\"ecaf1f41-bc7b-4d2d-a237-3731caa11d86\",\"userName\":\"eeee\",\"userPassword\":\"e10adc3949ba59abbe56e057f20f883e\",\"userNickname\":\"sad\",\"userEmail\":\"23432@qq.com\",\"userType\":0}"})
3.为什么使用jsonp
3.1使用jsonp的场景
大型项目,一般有可能涉及到跨系统的访问,ajax可以实现跨系统的访问,必须应用jsonp格式.
3.2js的跨域非同源
js发起ajax的位置(web系统,www.easymall.com),和访问的资源位置(user系统,user.easymall.com)不在同一个域名:端口内,违反了js的同源策略,ajax无法解析json数据;
例子 | 说明 | 是否同源 |
域名完全布不同 1的js访问2的资源 | 非同源 | |
www.a.com:8080(1) www.a.com:8081(2) | 域名相同,端口不同 1的js访问2的资源 | 非同源 |
域名相同,端口相同,路径不同 1的js访问2的资源 | 同源 | |
10.9.8.8 | 域名,访问ip(hosts或者dns中的域名和ip映射) 1的js访问2的资源 | 非同源 |
user.a.com | 主域名相同,子域名不同(a.com,www开始的是主域名,user子域名) | 非同源 |
只要访问的资源域名不同,端口不同,即使ip映射相关也都是非同源
3.3为什么使用jsonp
在复杂的,大型的项目开发过程中,一般无法避免js的跨域访问(违反同源策略),造成json字符串无法解析,使用jsonp来解决
4.jsonp的调用原理
- script标签,src属性可以访问跨域,跨系统的任何数据; test({})拿到的是jsonp
- 本地系统中,有一个js的方法,名称必须和jsonp中的方法名称一致,将会自动调用,把json传递给这个方法,作为参数解析,相当于一个js方法直接解析了json
底层原理:script标签的src获取jsonp,本地js同名方法解析json数据;
5.jquery的封装
jquery封装了底层原理,src自动使用创建,function同名方法自动创建;
只要在$.ajax中的dataType:指定jsonp结构,就会在url地址后面自动拼接一个callback=jsonp+currenttime