ajax中的json和jsonp詳解
出現的問題:
花了點時間研究ajax中的json和jsonp的原理,這裡記錄一下。以前一直在使用ajax呼叫資料,但是從來沒有遇到跨域問題,也從來沒有注意過json和jsonp的區別,總是一通亂用。但昨天朋友遇到這個問題,讓我幫他研究研究。直接上圖。
然後我的第一反應當然是去找哪裡少一個分號,但是該加分號的位置都加分號了,如圖:
這段簡單的程式碼其他位置我都懂,就是dataType這段不懂,我就去百度,百度告訴我,jsonp是用來解決跨域問題的,但是為什麼我用了jsonp還是不能呢?我就去研究研究jsonp,看看jsonp到底封裝的什麼函式。看看它如何實現跨域的。
什麼是跨域和同域:
跨域是指程式執行在當前域中去呼叫其他域,簡單的說就是網頁在www.baidu.com中開啟去獲取www.goolg.com中的資料。這是因為瀏覽器對於javascript的同源策略的限制。
那什麼是同域呢? 簡單的解釋就是相同域名,埠相同,協議相同即為同域。
這個就是同源策略的保護,如果瀏覽器對javascript沒有同源策略的保護,那麼一些重要的機密網站將會很危險~
study.cn/json/jsonp/jsonp.html | ||
請求地址 | 形式 | 結果 |
http://study.cn/test/a.html | 同一域名,不同資料夾 | 成功 |
http://study.cn/json/jsonp/jsonp.html | 同一域名,統一資料夾 | 成功 |
http://a.study.cn/json/jsonp/jsonp.html | 不同域名,檔案路徑相同 | 失敗 |
http://study.cn:8080/json/jsonp/jsonp.html | 同一域名,不同埠 | 失敗 |
https://study.cn/json/jsonp/jsonp.html | 同一域名,不同協議 | 失敗 |
大牛們如何實現跨域的呢?
OK,我知道了跨域是什麼了,那麼別人是怎麼實現跨域的呢?首先我們知道script標籤是可以引入別的域中的js程式碼的,也就是說script是不受跨域限制的。那我們何不像請求js檔案去請求資料呢。Talk nonsense and put it down.
PHP程式碼如下:
這段程式碼簡簡單單的實現了用script標籤獲取PHP中列印的資料,然後用flightHandler函式回撥。但是出現了同樣的問題,還是說少一個分號,wtfk,怎麼會出現這樣的問題呢?然後我重新審視一下程式碼發現了兩個問題。
1、flightHandler並沒有執行,因為從上面這串程式碼中根本看不出來是什麼地方執行的。
2、PHP檔案返回的是json資料,怎麼能直接引用呢?
這就好像程式碼是這樣子的:
mmp,你說這樣瀏覽器不會提醒你少一個分號?到這裡我已經找到了為什麼會少一個分號。so,得出的結論是返回的應該是去執行的js函式,並且這個函式名是flightHandler,傳入的引數就是想要獲取的資料,這樣回撥函式才會打印出我們想要的東西。所以我簡單的改了一下如下的PHP檔案。
然後我就成功跨域獲取到資料了。
jsonp如何知道本地回撥函式js函式名呢?
那就是將服務端提供的js指令碼是動態生成的就行了。
dataType: "jsonp", jsonp: "callback",//傳遞給請求處理程式或頁面的,用以獲得jsonp回撥函式名的引數名(一般預設為:callback) jsonpCallback:"flightHandler",//自定義的jsonp回撥函式名稱,預設為jQuery自動生成的隨機函式名,也可以寫"?",jQuery會自動為你處理資料
然後我在火狐中看到了隨機生成的函式名
也就是說我在PHP中返回的執行的js函式名要和這一致,於是我這樣修改了一下PHP程式碼:
ok,到這裡就全部完成了,解決的所有疑惑,我也該先我朋友交差了。