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\":\"[email protected]\",\"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的資源 |
非同源 |
|
|
域名相同,端口不同 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