跨域訪問的解決方案（非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物件）並且顯示在客戶端了：

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

本文轉自 charles_wang888 51CTO部落格，原文連結：http://blog.51cto.com/supercharles888/856886，如需轉載請自行聯絡原作者

跨域訪問的解決方案（非HTML5的方法：JSONP)

相關文章