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

　　　　　　　　加油~   

　　　　　　　　　　　　　　　　--WZY

一、什么是javascript跨域問題？

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

　　　　　 跨域：在一個服務器上，去訪問另一個服務器上，並且得到另一個服務器返回回來的值，這就是javascript跨域，其實簡單點，之前我們做的ajax，都是在同域中訪問，現在只是訪問的服務器變成了另外的，不是同一台了。僅此而已。但是這樣一變，之前的代碼就不能用了。

 

 

二、解決javascript跨域問題

　　　　　解決該問題，有很多種方式，我百度了一下，好像這就屬於前端的范疇了，所以我決定研究一下JSONP的這種解決方案即可，留一篇我百度到的博文，詳細講解了其他的解決方案，僅供參考。

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

　　　　　2.1、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>

　　　　　　　　　　　　提供數據端

　　　　　　　　　　　　　　

 

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

　　　　2.2、jQuery跨域處理

　　　　　　　　2.2.1、使用$.getJSON();

　　　　　　　　原理圖

　　　　　　　　　　　　　

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

　　　　　　　　　　　　　　

　　　　　　　　　操作：

　　　　　　　　　　　　　　　

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

　　

　　　　　　　　 提供數據端還是不變的。

 

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

　　　　　　　　　　　　

 

 

三、總結

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