1. 程式人生 > >ajax中的json和jsonp詳解

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,到這裡就全部完成了,解決的所有疑惑,我也該先我朋友交差了。