JSONP个人心得笔记

青旅半醒 2022-01-17 01:27 329阅读 0赞

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

<table style="margin-left:.3333in;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:2.4472in;"> 例子 </td> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:2.7326in;"> 说明 </td> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:1.2687in;"> 是否同源 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:2.4472in;"> <a rel="nofollow">www.a.com(1)</a> <a rel="nofollow">www.b.com(2)</a> </td> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:2.7326in;"> 域名完全布不同 1的js访问2的资源 </td> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:1.2687in;"> 非同源 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:2.4472in;"> www.a.com:8080(1) www.a.com:8081(2) </td> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:2.7326in;"> 域名相同,端口不同 1的js访问2的资源 </td> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:1.2687in;"> 非同源 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:2.4472in;"> <a href="http://www.a.com/haha%281%29" rel="nofollow">www.a.com/haha(1)</a> <a href="http://www.a.com/kaka%282%29" rel="nofollow">www.a.com/kaka(2)</a> </td> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:2.7326in;"> 域名相同,端口相同,路径不同 1的js访问2的资源 </td> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:1.2687in;"> 同源 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:2.4472in;"> <a href="http://www.a.com" rel="nofollow">www.a.com</a> 10.9.8.8 </td> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:2.7326in;"> 域名,访问ip(hosts或者dns中的域名和ip映射) 1的js访问2的资源 </td> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:1.2687in;"> 非同源 </td> 
 </tr> 
 <tr> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:2.4472in;"> <a href="http://www.a.com" rel="nofollow">www.a.com</a> user.a.com </td> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:2.7326in;"> 主域名相同,子域名不同(a.com,www开始的是主域名,user子域名) </td> 
 <td style="border-color:#a3a3a3;vertical-align:top;width:1.2687in;"> 非同源 </td> 
 </tr> 
 </tbody> 
</table>

**只要访问的资源域名不同,端口不同,即使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**