前兩天被問(wèn)到ajax跨域如何解決，還真被問(wèn)住了，光知道有個(gè)什么jsonp，迷迷糊糊的沒(méi)有說(shuō)上來(lái)。抱著(zhù)有問(wèn)題必須解決的態(tài)度，我看了許多資料，原來(lái)如此。。。
為何一直知道jsonp，但一直迷迷糊糊的不明白呢？——網(wǎng)上那些介紹資料都寫(xiě)的太復雜了！
我是能多簡(jiǎn)單就多簡(jiǎn)單，爭取讓你十分鐘看完！
ajax之所以需要“跨域”，罪魁禍首就是瀏覽器的同源策略。即，一個(gè)頁(yè)面的ajax只能獲取這個(gè)頁(yè)面相同源或者相同域的數據。
如何叫“同源”或者“同域”呢？——協(xié)議、域名、端口號都必須相同。例如：
http://google.com 和 https://google.com 不同，因為協(xié)議不同；
http://localhost:8080 和 http://localhost:1000 不同，因為端口不同；
http://localhost:8080 和 https://google.com 不同，協(xié)議、域名、端口號都不同，根本不是一家的。
根據同源策略，我自己做的一個(gè)網(wǎng)頁(yè) http://localhost:8080/test.html 就無(wú)法通過(guò)ajax直接獲取 http://google.com 的數據。
例如，我用ajax去訪(fǎng)問(wèn)一個(gè)不同域的頁(yè)面，錯誤結果是這樣的：
大家想想，這樣其實(shí)也有道理。如果沒(méi)有同源策略，你我都可以隨便通過(guò)ajax直接獲取其他網(wǎng)站的信息，這還不亂套了。。。我自己做一個(gè)搜索界面，搜索時(shí)直接用ajax從百度獲取數據，那不成了小偷了。。。
但是跨域訪(fǎng)問(wèn)是少不了的，mail.163.com 的網(wǎng)頁(yè)可能需要從 news.163.com 域下獲取新聞信息，那怎么辦？——開(kāi)始咱們的跨域之旅。（當然用iframe也可以實(shí)現）
互聯(lián)網(wǎng)的許多網(wǎng)站之間圖片相互盜鏈，A網(wǎng)站網(wǎng)頁(yè)的img.src直接鏈接到B網(wǎng)站的圖片地址，這是常有的事兒。說(shuō)到“盜鏈”，大家第一想到的可能是如何去防止盜鏈，今兒咱不管那個(gè)。
你再想想“盜鏈”和“同源策略”這兩個(gè)詞之間有什么關(guān)系？——對，矛盾！既然都“同源策略”了，怎么還能“盜鏈”呢？
世間萬(wàn)物都有矛盾，有矛盾了照樣可以和諧共處，并不一定非要你死我活。
重點(diǎn)：<img>的src（獲取圖片），<link>的href（獲取css），<script>的src（獲取javascript）這三個(gè)都不符合同源策略，它們可以跨域獲取數據。因此，你可以直接從一些cdn上獲取jQuery，并且你網(wǎng)站上的圖片也隨時(shí)可能被別人盜用，所有最好加上水??！
而我們今天的主角——jsonp——就是因為<script>的src不符合同源策略而來(lái)的。
例如，域名 a.com 下有一個(gè) a.com/test.html 網(wǎng)頁(yè)，域名 b.com 下有一個(gè) b.com/data.html 網(wǎng)頁(yè)和 b.com/alert.js 文件。
引導第一步：簡(jiǎn)單引用js
編寫(xiě) b.com/alert.js 如下：
alert(123);
對 a.com/test.html 編寫(xiě)如下代碼：
<script type='text/javascript' src='http://b.com/alert.js'/>
運行 a.com/test.html，結果很明顯，就是彈出 【123】 。
引導第二步：引用js返回數據
將 b.com/alert.js 修改為：
myFn(100);
將 a.com/test.html 修改為：
<script type='text/javascript' src='http://b.com/alert.js'/><script> function myFn ( data ) { alert( data + 'px' ); }</script>
運行 a.com/test.html，結果是彈出【 100px 】，這個(gè)應該也沒(méi)有什么疑問(wèn)。
引導第三步：已經(jīng)跨域成功！
第二步中，如果data——即100——是我要跨域在b.com下獲取的一個(gè)數據，那么咱們這不就是已經(jīng)實(shí)現跨域請求了嗎?。?！
把這個(gè)過(guò)程再清晰的捋一遍：
引導第四步：引用html格式
<script>的src不一定僅僅指向javascript文件，可以指向任何地址。例如：
將 a.com/test.html 修改為：
<script type='text/javascript' src='http://b.com/data.html'/><script> function myFn ( data ) { alert( data + 'px' ); }</script>
將 b.com/data.html 編寫(xiě)為：（注意，data.html中就寫(xiě)以下一行代碼，多了不寫(xiě)）
myFn(100);
運行 a.com/test.html ，結果依然是【 100px 】
其中，“100”就是我們要跨域請求的數據。
引導第五步：動(dòng)態(tài)數據
如果要請求的數據是動(dòng)態(tài)的，那就要在動(dòng)態(tài)頁(yè)面中編寫(xiě)。
那么我們就讓 a.com/test.html 去調用一個(gè)動(dòng)態(tài)的aspx頁(yè)面：
<script type='text/javascript' src='http://b.com/data.aspx?callback=myFn'/><script> function myFn ( data ) { alert( data + 'px' ); }</script>
大家注意，我們在 src 地址中增加了“?callback=myFn”，意思是把顯示數據的函數也動(dòng)態(tài)傳過(guò)去了，而第二步、第四步都是靜態(tài)的寫(xiě)在被調用的文件中的。
至于callback參數后臺如何接收，如何使用，請接著(zhù)看：
在 b.com 下增加一個(gè) b.com/data.aspx 頁(yè)面，后臺代碼如下：
protected void Page_Load(object sender, EventArgs e) { if (this.IsPostBack == false) { string callback = ""; if (Request["callback"] != null) { callback = Request["callback"]; //服務(wù)器端要返回的數據 string data = "1024"; Response.Write(callback + "(" + data + ")"); } } }
代碼很簡(jiǎn)單，獲取callback參數，然后組成一個(gè)函數的形式返回。如果“b.com/data.aspx?callback=myFn”調用的話(huà)，那么返回的就是" myFn(1024) "。
返回的數據變成動(dòng)態(tài)的了（“1024”），前端頁(yè)面用于顯示數據的函數也編程了動(dòng)態(tài)的了（“callback=myFn”），但是歸根結底，形式還是一樣的。
引導第六步：調用封裝
a.com/test.html 中，僅僅有一個(gè)<script>靜靜的躺在那里，執行一次之后，就沒(méi)有作用了。
而實(shí)際情況是，a.com/test.html 中，可能隨著(zhù)用戶(hù)的操作發(fā)生若干次的調用。怎么辦？——動(dòng)態(tài)增加唄。
function addScriptTag(src) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.src = src; document.body.appendChild(script);}//需要調用時(shí)：addScriptTag('b.com/data.aspx?callback=myFn');function myFn (data) { alert(data + 'px'); }
以上層層描述的就是JSONP，你不必去記住它的定義，看明白了上述文字，就全能理解。
重點(diǎn)在于：同源策略 + <script>的src不屬于同源策略 + 通過(guò)<script>的src指向的文件返回服務(wù)器端數據。
ok，就這些！
聯(lián)系客服
