JSONP个人心得笔记

                                      JSONP个人心得笔记

---

目录

                                      JSONP个人心得笔记

1.学习jsonp掌握三个问题

2.什么是jsonp

2.1定义

2.2样子

 3.为什么使用jsonp

3.1使用jsonp的场景

3.2js的跨域非同源

3.3为什么使用jsonp

4.jsonp的调用原理

5.jquery的封装

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数据;

例子	说明	是否同源
www.a.com(1) www.b.com(2)	域名完全布不同 1的js访问2的资源	非同源
www.a.com:8080(1) www.a.com:8081(2)	域名相同,端口不同 1的js访问2的资源	非同源
www.a.com/haha(1) www.a.com/kaka(2)	域名相同,端口相同,路径不同 1的js访问2的资源	同源
www.a.com 10.9.8.8	域名,访问ip(hosts或者dns中的域名和ip映射) 1的js访问2的资源	非同源
www.a.com 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