跨域访问的解决方案（非HTML5的方法：JSONP)

跨域访问一直是困扰很多开发者的问题之一。因为涉及到安全性问题，所以跨域访问默认是不可以进行的，否则假设今天我写了一段js去更改google的图标，明天他写了一段代码去吧google首页的文字全部变成梵文，那还得了？

首先，讲下什么是相同的域。域是这样定义的，协议名+host名+端口号,只有这3个都一样，才能说是同样的域，同样的域里面的访问不受到同源策略限制，你可以用你的js代码任意的去操作资源，但是不同域你就不能这样做了。

解决跨域访问有很多方法，最常见的一种“单向”跨域访问方式是用JSONP(Json with Padding)，它解决思路就是如果域A (充当客户端)上的js 要操作域B（充当服务器端）上的资源，那么只要吧域A上的js函数名传递给域B，然后在域B进行封装，它解析来自域A的函数名，并且将域B上的资源转为json对象，并且两者进行组合，组合后的字符串就是 域A函数名(域B json对象) 这种函数调用的形式，然后当域A上用script src=""的形式访问时，它拿到的结果就是一段js代码，并且是域A函数名（域B json对象）的形式，于是就达到了域A函数处理域B资源的效果。

为了更有说服力，我们这里做一个非常简单的实验，假定域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.  
3. import java.io.IOException; 
4. import java.io.PrintWriter; 
5.  
6. import javax.servlet.ServletException; 
7. import javax.servlet.http.HttpServlet; 
8. import javax.servlet.http.HttpServletRequest; 
9. import javax.servlet.http.HttpServletResponse; 
10.  
11. import org.json.simple.JSONObject; 
12.  
13. /** 
14.  * Servlet implementation class JSONPServlet 
15.  */ 
16. public class JSONPServlet extends HttpServlet { 
17.     private static final long serialVersionUID = 1L; 
18.         
19.     /** 
20.      * @see HttpServlet#HttpServlet() 
21.      */ 
22.     public JSONPServlet() { 
23.         super(); 
24.         // TODO Auto-generated constructor stub 
25.     } 
26.  
27.     /** 
28.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 
29.      */ 
30.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
31.         // TODO Auto-generated method stub 
32.          
33.         //get the callback function which comes from client 
34.         String callbackFuncFromClient= request.getParameter("callbackFunc"); 
35.         //create a json object 
36.         JSONObject jsonInfo = new JSONObject(); 
37.         jsonInfo.put("name","charles"); 
38.         jsonInfo.put("title", "technical lead"); 
39.         jsonInfo.put("info","talent man"); 
40.         //create a string which stands for a javascript with the format func(jsonobject) 
41.         StringBuffer jsonpString = new StringBuffer(); 
42.         jsonpString.append(callbackFuncFromClient).append("(").append(jsonInfo.toJSONString()).append(")"); 
43.          
44.          
45.         //construct the output jsonp and output to the client 
46.         response.setCharacterEncoding("utf-8"); 
47.         PrintWriter out = response.getWriter(); 
48.         out.println(jsonpString); 
49.         out.flush(); 
50.     } 
51.  
52.     /** 
53.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 
54.      */ 
55.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
56.         // TODO Auto-generated method stub 
57.     } 
58.  
59. } 

然后我们把这个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.      
4.     console.log("Begin to execute the call function named clientMethodWhichOperateServerResource(result)"); 
5.      
6.     //获取服务器端传递过来的json字符串，转为json对象 
7.     var jsonObject=result; 
8.     //从json对象中分离出一些相关信息 
9.     var name=jsonObject.name; 
10.     var title=jsonObject.title; 
11.     var info=jsonObject.info; 
12.     console.log("name: "+name); 
13.     console.log("title: "+title); 
14.     console.log("info: "+info); 
15.      
16.  
17.     var serverInfoString="姓名: "+name+","; 
18.     serverInfoString+="头衔: "+title+","; 
19.     serverInfoString+="信息： "+info; 
20.     alert(serverInfoString); 
21.      
22.      
23. } 

然后我们定义一个页面：

这个页面的关键之处在于两段<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. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
7. <title>这个页面用于演示JSONP</title><base> 
8.  
9. <!--这里引入了javascript文件，js函数有2个，一个是回调函数，它的函数名将作为参数传递给服务器端， 
10. 另外一个是负责向服务端用src的方式请求jsonp  --> 
11.  
12. <!-- 这里引入的js文件中定义了回调函数，这个函数的函数名将作为参数传递到服务器端，它最终会操作服务器端的资源 --> 
13. <script type="text/javascript" src="js/callbackFuncDef.js"></script> 
14.  
15. <!-- 这里就是jsonp的使用，它以src的方式向服务器端发送一个jsonp请求，并且把这边定义好的处理函数的函数名以参数形式传递 --> 
16. <script type="text/javascript" src="http://localhost:8080/JSONPServerSide/JSONPServlet?callbackFunc=clientMethodWhichOperateServerResource"></script> 
17. </head> 
18. <body> 
19.  
20.  
21. <p>这个JSONP的例子的要点是，它用定义在客户端的一段js代码，去处理服务器上的json资源</p> 
22.  
23.  
24. </body> 
25. </html> 

所以，当我们打开浏览器访问客户端的页面时候，它就可以显示结果了，我们可以看到，它的确取到了服务器端的数据（json对象）并且显示在客户端了：

所以，非常顺利成章，跨域访问得到实现。