跨域訪問一直是困擾很多開發者的問題之一。因為涉及到安全性問題，所以跨域訪問預設是不可以進行的，否則假設今天我寫了一段js去更改google的圖示，明天他寫了一段程式碼去吧google首頁的文字全部變成梵文，那還得了？

首先，講下什麼是相同的域。域是這樣定義的，協議名+host名+埠號,只有這3個都一樣，才能說是同樣的域，同樣的域裡面的訪問不受到同源策略限制，你可以用你的js程式碼任意的去操作資源，但是不同域你就不能這樣做了。

解決跨域訪問有很多方法，最常見的一種“單向”跨域訪問方式是用JSONP(Json with Padding)，它解決思路就是如果域A (充當客戶端)上的js 要操作域B（充當伺服器端）上的資源，那麼只要吧域A上的js函式名傳遞給域B，然後在域B進行封裝，它解析來自域A的函式名，並且將域B上的資源轉為json物件，並且兩者進行組合，組合後的字串就是 域A函式名(域B json物件) 

為了更有說服力，我們這裡做一個非常簡單的實驗，假定域A（客戶端）有個應用部署在http://localhost:8180上，域B(伺服器端）有個應用部署在http://localhost:8080上，顯然這2個域由於埠不同，所以域A如果要訪問域B必定是跨域訪問的。域A 有一段js函式，域B提供了一個json物件，我們想要域A的js函式操作域B的json物件。會怎樣呢？

服務端（我們部署在http://localhost:8080

先貼上域B(伺服器端的程式碼），它用一個java servlet，負責接收來自客戶端的帶回調函式名引數的請求，並且與自己端提供的json物件包裝，包裝為一個jsonp後然後放入響應輸出流。

1. package com.charles.jsonp; 
2. import java.io.IOException; 
3. import java.io.PrintWriter; 
4. import javax.servlet.ServletException; 
5. import javax.servlet.http.HttpServlet; 
6. import javax.servlet.http.HttpServletRequest; 
7. import javax.servlet.http.HttpServletResponse; 
8. import org.json.simple.JSONObject; 
9. /** 
10.  * Servlet implementation class JSONPServlet 
11.  */
12. publicclass JSONPServlet extends HttpServlet { 
13.     privatestaticfinallong serialVersionUID = 1L; 
14.     /** 
15.      * @see HttpServlet#HttpServlet() 
16.      */
17.     public JSONPServlet() { 
18.         super(); 
19.         // TODO Auto-generated constructor stub
20.     } 
21.     /** 
22.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 
23.      */
24.     protectedvoid doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
25.         // TODO Auto-generated method stub
26.         //get the callback function which comes from client
27.         String callbackFuncFromClient= request.getParameter("callbackFunc"); 
28.         //create a json object
29.         JSONObject jsonInfo = new JSONObject(); 
30.         jsonInfo.put("name","charles"); 
31.         jsonInfo.put("title", "technical lead"); 
32.         jsonInfo.put("info","talent man"); 
33.         //create a string which stands for a javascript with the format func(jsonobject)
34.         StringBuffer jsonpString = new StringBuffer(); 
35.         jsonpString.append(callbackFuncFromClient).append("(").append(jsonInfo.toJSONString()).append(")"); 
36.         //construct the output jsonp and output to the client
37.         response.setCharacterEncoding("utf-8"); 
38.         PrintWriter out = response.getWriter(); 
39.         out.println(jsonpString); 
40.         out.flush(); 
41.     } 
42.     /** 
43.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 
44.      */
45.     protectedvoid doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
46.         // TODO Auto-generated method stub
47.     } 
48. } 

然後我們把這個servlet對映到某個url上，見web.xml：

1. <servlet>
2.     <description>This servlet will create a jsonp object,it wraps the js function and the json object</description>
3.     <display-name>JSONPServlet</display-name>
4.     <servlet-name>JSONPServlet</servlet-name>
5.     <servlet-class>com.charles.jsonp.JSONPServlet</servlet-class>
6.   </servlet>
7.   <servlet-mapping>
8.     <servlet-name>JSONPServlet</servlet-name>
9.     <url-pattern>/JSONPServlet</url-pattern>
10.   </servlet-mapping>

現在我們測試伺服器端是否已經正確部署：

我們開啟瀏覽器，輸入訪問伺服器端這個servlet的url，注意帶上請求引數，引數名為callbackFunc,引數值為任意函式名：則我們可以看到封裝後的JSONP效果，的確是“函式名（json物件）”的字串形式。比如我們例子中，我們傳入的函式名是 someFunc ,而伺服器端自身提供的json物件是{"title":"technical lead","name":"charles","info":"talent man"},則最後伺服器端返回的JSONP 字串是someFunc{json}

客戶端：

伺服器端部署正確後，我們讓客戶端部署在另外一個域:http://localhost:8180上，要實現跨域訪問，客戶端必須有2部分，1是定義一個回撥函式（這個函式用於將來處理伺服器json資料），二是一個頁面，這個頁面要用<script src來指向伺服器端能 提供JSONP的url)，我們一步步來：

先定義一個回撥函式：

這個回撥函式能在控制檯和alert視窗打印出伺服器端的json物件提供的資訊

1. //這段程式碼用於定義回撥函式
2. function clientMethodWhichOperateServerResource(result){ 
3.     console.log("Begin to execute the call function named clientMethodWhichOperateServerResource(result)"); 
4.     //獲取伺服器端傳遞過來的json字串，轉為json物件
5.     var jsonObject=result; 
6.     //從json物件中分離出一些相關資訊
7.     var name=jsonObject.name; 
8.     var title=jsonObject.title; 
9.     var info=jsonObject.info; 
10.     console.log("name: "+name); 
11.     console.log("title: "+title); 
12.     console.log("info: "+info); 
13.     var serverInfoString="姓名: "+name+","; 
14.     serverInfoString+="頭銜: "+title+","; 
15.     serverInfoString+="資訊： "+info; 
16.     alert(serverInfoString); 
17. } 

然後我們定義一個頁面：

這個頁面的關鍵之處在於兩段<script>，第一段是引入了客戶端的回撥函式（上面我們定義的那段），從而這個函式被頁面可視，精華在於第二段，它用src標籤指向了伺服器端（http://localhost:8080域上）能提供JSONP 字串物件的url（對應上面我們寫的那個servlet）,而且吧回撥函式的名字當做引數傳遞過去（就像我們用於測試伺服器端的訪問示例一樣）：

1. <%@ page language="java"contentType="text/html; charset=UTF-8"
2.     pageEncoding="UTF-8"%>
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4. <html>
5. <head>
6. <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
7. <title>這個頁面用於演示JSONP</title><base>
8. <!--這裡引入了javascript檔案，js函式有2個，一個是回撥函式，它的函式名將作為引數傳遞給伺服器端， 
9. 另外一個是負責向服務端用src的方式請求jsonp  -->
10. <!-- 這裡引入的js檔案中定義了回撥函式，這個函式的函式名將作為引數傳遞到伺服器端，它最終會操作伺服器端的資源 -->
11. <scripttype="text/javascript"src="js/callbackFuncDef.js"></script>
12. <!-- 這裡就是jsonp的使用，它以src的方式向伺服器端傳送一個jsonp請求，並且把這邊定義好的處理函式的函式名以引數形式傳遞 -->
13. <scripttype="text/javascript"src="http://localhost:8080/JSONPServerSide/JSONPServlet?callbackFunc=clientMethodWhichOperateServerResource"></script>
14. </head>
15. <body>
16. <p>這個JSONP的例子的要點是，它用定義在客戶端的一段js程式碼，去處理伺服器上的json資源</p>
17. </body>
18. </html>

所以，當我們開啟瀏覽器訪問客戶端的頁面時候，它就可以顯示結果了，我們可以看到，它的確取到了伺服器端的資料（json物件）並且顯示在客戶端了：

所以，非常順利成章，跨域訪問得到實現。