關於跨域,以及跨域的幾種方式
名詞解釋:
跨域:
瀏覽器對於javascript的同源策略的限制,例如a.cn下面的js不能呼叫b.cn中的js,物件或資料(因為a.cn和b.cn是不同域),所以跨域就出現了.
上面提到的,同域的概念又是什麼呢??? 簡單的解釋就是相同域名,埠相同,協議相同
同源策略:
請求的url地址,必須與瀏覽器上的url地址處於同域上,也就是域名,埠,協議相同.
比如:我在本地上的域名是study.cn,請求另外一個域名一段資料
這個時候在瀏覽器上會報錯:
這個就是同源策略的保護,如果瀏覽器對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 | 同一域名,不同協議 | 失敗 |
jsonp:
jsonp 全稱是JSON with Padding,是為了解決跨域請求資源而產生的解決方案,是一種依靠開發人員創造出的一種非官方跨域資料互動協議。
一個是描述資訊的格式，一個是資訊傳遞雙方約定的方法。
jsonp的產生:
1.AJAX直接請求普通檔案存在跨域無許可權訪問的問題,不管是靜態頁面也好.
2.不過我們在呼叫js檔案的時候又不受跨域影響,比如引入jquery框架的,或者是呼叫相片的時候
3.凡是擁有scr這個屬性的標籤都可以跨域例如<script><img><iframe>
4.如果想通過純web端跨域訪問資料只有一種可能,那就是把遠端伺服器上的資料裝進js格式的檔案裡.
5.而json又是一個輕量級的資料格式,還被js原生支援
6.為了便於客戶端使用資料，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP
demo1:基於script標籤實現跨域
舉個例子:我在http://study.cn/json/jsonp/jsonp_2.html下請求一個遠端的js檔案
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 7 <script type="text/javascript"> 8 var message = function(data) { 9 alert(data[1].title); 10 }; 11 </script> 12 13 <script type="text/javascript" src="http://web.cn/js/message.js"></script> 14 </head> 15 <body> 16 <div id='testdiv'></div> 17 </body> 18 </html>
遠端的message.js檔案是
1 message([ 2 {"id":"1", "title":"天津新聞聯播，雷人搞笑的男主持人"}, 3 {"id":"2", "title":"樓市告別富得流油 專家:房價下跌是大概率事件"}, 4 {"id":"3", "title":"法國人關注時事 八成年輕人每天閱讀新聞"}, 5 {"id":"4", "title":"新聞中的歷史,歷史中的新聞"}, 6 {"id":"5", "title":"東陽新聞20140222"}, 7 {"id":"6", "title":"23個職能部門要增加新聞釋出頻次"}, 8 {"id":"7", "title":"《貴州新聞聯播》 中國美麗鄉村"}, 9 {"id":"8", "title":"朝韓離散家屬團聚首輪活動結束"}, 10 {"id":"9", "title":"索契冬奧會一天曝出兩例興奮劑事件"}, 11 {"id":"10", "title":"今天中國多地仍將出現中度霾"} 12 ]);
這個時候我們得到的相應頭是:
這樣就實現跨域成功了,因為服務端返回資料時會將這個callback引數(message)作為函式名來包裹住JSON資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。
demo2: 基於script標籤實現跨域
讓遠端js知道它應該呼叫的本地函式叫什麼名字,只要服務端提供的js指令碼是動態生成的就好了,這樣前臺只需要傳一個callback引數過去告訴服務端,我需要XXX程式碼,於是服務端就會得到相應了.
例如 在http://study.cn/json/jsonp/jsonp_3.html頁面請求 http://192.168.31.137/train/test/jsonpthree
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 7 <script type="text/javascript"> 8 var messagetow = function(data){ 9 alert(data); 10 }; 11 var url = "http://192.168.31.137/train/test/jsonpthree?callback=messagetow"; 12 var script = document.createElement('script'); 13 script.setAttribute('src', url); 14 document.getElementsByTagName('head')[0].appendChild(script); 15 </script> 16 </head> 17 <body> 18 </body> 19 </html>
得到的響應頭是:
demo3: 基於jquery跨域
那麼如何用jquery來實現我們的跨域呢???jquery已經把跨域封裝到ajax上了,而且封裝得非常的好,使用起來也特別方便
如果是一般的ajax請求:
1 $.ajax({ 2 url:'http://192.168.31.137/train/test/testjsonp', 3 type : 'get', 4 dataType : 'text', 5 success:function(data){ 6 alert(data); 7 }, 8 error:function(data){ 9 alert(2); 10 } 11 });
那麼在瀏覽器中會報錯:
jsonp形式的ajax請求:並且通過get請求的方式傳入引數,注意:跨域請求是隻能是get請求不能使用post請求
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="./js/jquery.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 var name = 'chenshishuo'; 10 var sex = 'man'; 11 var address = 'shenzhen'; 12 var looks = 'handsome '; 13 $.ajax({ 14 type : 'get', 15 url:'http://192.168.31.137/train/test/testjsonp', 16 data : { 17 name : name, 18 sex : sex, 19 address : address, 20 looks : looks, 21 }, 22 cache :false, 23 jsonp: "callback", 24 jsonpCallback:"success", 25 dataType : 'jsonp', 26 success:function(data){ 27 alert(data); 28 }, 29 error:function(data){ 30 alert('error'); 31 } 32 }); 33 }); 34 </script> 35 </head> 36 <body> 37 <input id='inputtest' value='546' name='inputtest'> 38 <div id='testdiv'></div> 39 </body> 40 </html>
jsonp 傳遞給請求處理程式或頁面的，用以獲得jsonp回撥函式名的引數名(預設為:callback)
jsonpCallback 自定義的jsonp回撥函式名稱，預設為jQuery自動生成的隨機函式名
看看請求頭和相應頭吧
請求頭:jquery會自動帶入callback引數,當服務端獲取到這個引數後,返回回來.(響應頭)
現在是不是明白了跨域的基本原理,和基本的使用方法呢??
上面我們說到img中的src可以自動呼叫遠端圖片的(這個比較簡單我在這裡就不說了)
還有ifram請求:
基於iframe實現的跨域要求兩個域具有aa.xx.com,bb.xx.com 這種特點，
也就是兩個頁面必須屬於一個基礎域（例如都是xxx.com)，使用同一協議和同一埠，這樣在兩個頁面中同時新增document.domain，就可以實現父頁面呼叫子頁面的函式
要點就是 :通過修改document.domain來跨子域
demo4: 通過iframe來跨子域
http://a.study.cn/a.html 請求 http://b.study.cn/b.html
在a.html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 document.domain = 'study.cn'; 8 function test() { 9 alert(document.getElementById('a').contentWindow); 10 } 11 </script> 12 </head> 13 <body> 14 <iframe id='a' src='http://b.study.cn/b.html' onload='test()'> 15 </body> 16 </html>
在b.html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 7 <script type="text/javascript">