jQuery(三) javascript跨域問題(JSONP解決)

　　　　　　　　加油~   

　　　　　　　　　　　　　　　　--WZY

1、什麼是javascript跨域問題？

　　　　　 域：服務器域名，惟一標識(協議，域名，端口)必須保證一致，說明域相同

　　　　　 跨域：在一個服務器上，去訪問另外一個服務器上，而且獲得另外一個服務器返回回來的值，這就是javascript跨域，其實簡單點，以前咱們作的ajax，都是在同域中訪問，如今只是訪問的服務器變成了另外的，不是同一臺了。僅此而已。可是這樣一變，以前的代碼就不能用了。

 

 

2、解決javascript跨域問題

　　　　　解決該問題，有不少種方式，我百度了一下，好像這就屬於前端的範疇了，因此我決定研究一下JSONP的這種解決方案便可，留一篇我百度到的博文，詳細講解了其餘的解決方案，僅供參考。

js中幾種實用的跨域方法原理

　　　　　2.一、javascript跨域處理(JSONP)　

　　　　　　　　原理圖

　　　　　　　　　　　　　　

　　　　　　　　　可能初次看這張圖不是很理解，其實很簡單，跟着個人思路理清楚便可。

　　　　　　　　　左邊tomcat1服務器中有一個頁面須要請求右邊tomcat2服務器中的GetDataServlet，GetDataServlet就模擬用來返回json數據給tomcat1(跨域)，這就是跨域問題。

　　　　　　　　　tomcat1中編寫請求目標地址，http://localhost:80/web/getData?callback=showData  後面會解釋爲何呆callback這個參數。showData這個方法是用來接收返回回來的數據所作的一些處理的方法，  在tomcat2這邊，提供數據的GetDataServlet首先獲取請求參數，也就是那個回調方法的方法名稱。而後生成要發送回去的json數據，最後就是通知tomcat1執行回調方法(爲何能夠通知？這就是前面帶callback這個回調方法名稱的參數的做用，由於獲取到了tomcat1中的回調方法名稱，因此就能夠經過該名稱去通知tomcat1去執行回調方法。)

　　　　　　　　　因此總的步驟就是4步，按照原理圖上得步驟，一步步執行，而後獲取到返回數據。注意，若是獲取數據的jsonp地址頁面不是你本身能控制的，就得按照提供數據的那一方的規定格式來操做了，這裏只是模擬一下這個過程。講解原理。

 

　　　　　　　　　操做：

　　　　　　　　　　　　

    <!-- 須要將函數存在 調用以前，從而保存函數存在-->
    <script type="text/javascript">
        function showData(data){
            alert(data.success);    
        }
    </script>
    <script type="text/javascript" src="http://localhost/web/getData?callback=showData"></script>

js跨域處理

　　　　　　　　　　　　提供數據端

　　　　　　　　　　　　　　

 

　　　　　　　　　　這裏只是模擬一下這種解決方案，實際開發中遇到問題，採用這種思路便可。　　

　　　　2.二、jQuery跨域處理

　　　　　　　　2.2.一、使用$.getJSON();

　　　　　　　　原理圖

　　　　　　　　　　　　　

　　　　　　　　　這裏惟一要解釋的就是，匿名回調方法的使用。

　　　　　　　　　　　　　　

　　　　　　　　　操做：

　　　　　　　　　　　　　　　

    <script type="text/javascript">
        $.getJSON("http://localhost/web/getData?callback=?",function(data){
            alert(data.success)
        });

$.getJSON操做

　　

　　　　　　　　 提供數據端仍是不變的。

 

　　　　　　　　2.2.二、使用$.ajax()也能解決跨域問題。這裏不作多陳述，具體能夠查看文檔進行操做。

　　　　　　　　　　　　

 

 

3、總結

　　　　　這一章節圖比較多，代碼比較少，主要把這個跨域問題講解清楚了，解決跨域問題還有其餘不少種方式，有興趣能夠自行百度。