跨域訪問的解決方案（非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後而後放入響應輸出流。

package com.charles.jsonp;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONObject;

/**
 * Servlet implementation class JSONPServlet
 */
public class JSONPServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public JSONPServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub

        //get the callback function which comes from client
        String callbackFuncFromClient= request.getParameter("callbackFunc");
        //create a json object
        JSONObject jsonInfo = new JSONObject();
        jsonInfo.put("name","charles");
        jsonInfo.put("title", "technical lead");
        jsonInfo.put("info","talent man");
        //create a string which stands for a javascript with the format func(jsonobject)
        StringBuffer jsonpString = new StringBuffer();
        jsonpString.append(callbackFuncFromClient).append("(").append(jsonInfo.toJSONString()).append(")");


        //construct the output jsonp and output to the client
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        out.println(jsonpString);
        out.flush();
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
    }

}

 

而後咱們把這個servlet映射到某個url上，見web.xml：

<servlet>
    <description>This servlet will create a jsonp object,it wraps the js function and the json object</description>
    <display-name>JSONPServlet</display-name>
    <servlet-name>JSONPServlet</servlet-name>
    <servlet-class>com.charles.jsonp.JSONPServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>JSONPServlet</servlet-name>
    <url-pattern>/JSONPServlet</url-pattern>
  </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對象提供的信息

//這段代碼用於定義回調函數
function clientMethodWhichOperateServerResource(result){

    console.log("Begin to execute the call function named clientMethodWhichOperateServerResource(result)");

    //獲取服務器端傳遞過來的json字符串，轉爲json對象
    var jsonObject=result;
    //從json對象中分離出一些相關信息
    var name=jsonObject.name;
    var title=jsonObject.title;
    var info=jsonObject.info;
    console.log("name: "+name);
    console.log("title: "+title);
    console.log("info: "+info);


    var serverInfoString="姓名: "+name+",";
    serverInfoString+="頭銜: "+title+",";
    serverInfoString+="信息： "+info;
    alert(serverInfoString);


}

而後咱們定義一個頁面：

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>這個頁面用於演示JSONP</title><base>

<!--這裏引入了javascript文件，js函數有2個，一個是回調函數，它的函數名將做爲參數傳遞給服務器端，
另一個是負責向服務端用src的方式請求jsonp  -->

<!-- 這裏引入的js文件中定義了回調函數，這個函數的函數名將做爲參數傳遞到服務器端，它最終會操做服務器端的資源 -->
<script type="text/javascript" src="js/callbackFuncDef.js"></script>

<!-- 這裏就是jsonp的使用，它以src的方式向服務器端發送一個jsonp請求，而且把這邊定義好的處理函數的函數名以參數形式傳遞 -->
<script type="text/javascript" src="http://localhost:8080/JSONPServerSide/JSONPServlet?callbackFunc=clientMethodWhichOperateServerResource"></script>
</head>
<body>


<p>這個JSONP的例子的要點是，它用定義在客戶端的一段js代碼，去處理服務器上的json資源</p>


</body>
</html>

因此，當咱們打開瀏覽器訪問客戶端的頁面時候，它就能夠顯示結果了，咱們能夠看到，它的確取到了服務器端的數據（json對象）而且顯示在客戶端了：

因此，很是順利成章，跨域訪問獲得實現。