Ajax-jsonp跨域請求說明

1.簡要說明： 

跨域的安全限制都是對瀏覽器端來說的，伺服器端是不存在跨域安全限制的。瀏覽器的同源策略限制從一個源載入的文件或指令碼與來自另一個源的資源進行互動。如果協議，埠和主機對於兩個頁面是相同的，則兩個頁面具有相同的源，否則就是不同源的。如果要在js裡發起跨域請求，則要進行一些特殊處理了。或者你可以把請求發到自己的服務端，再通過後臺程式碼發起請求，再將資料返回前端 。

我測試jsonp跨域請求，簡單來說就是滿足，客戶伺服器可以通過JavaScript訪問我阿里雲伺服器的Java服務端。

2.先看下直接發起ajax請求會怎麼樣？

請求的結果如下圖：可以看到跨域請求因為瀏覽器的同源策略被攔截了 

3. 如何發起跨域請求？

根據專案實際需求只測試了jquery的jsonp方式跨域請求。

Jquery程式碼：

function testJsonp(phone){
	$.ajax({
		url:"http://10.1.30.27:8080/DwrTest/TestJsServlet",
		type:"GET",
		data:{
			phone:phone
		},
		dataType:"jsonp",
		success:function(data){
			var result = JSON.stringify(data);
			console.log('response value: '+result);
			$("#text").val(result);
		},
		error:function(){
		    return "request error!";	
		}
	});
}
 

Java服務端servlet類程式碼：

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 net.sf.json.JSONObject;

public class TestJsServlet extends HttpServlet {

	private static final long serialVersionUID = 3647057807691354890L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {		
            doPost(request, response);           
	}	

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		// 接收引數 :phone：我自定義的;callback：ajax自動生成的jsonp回撥函式名稱，支援自定義，未宣告，自動把ajax success()當多回調函式處理
        String phone = request.getParameter("phone");
        String callback = request.getParameter("callback");
        // 返回json資料
        JSONObject json = new JSONObject();
        json.put("result", "you call phone is: "+phone);
        // 用回撥函式名稱包裹返回資料，這樣，返回資料就作為回撥函式的引數傳回去了
        String result = callback + "(" + json.toString() + ")";
        out.write(result);
		out.flush();
		out.close();
	}

}
 

測試效果：

注：jsonp方式不支援POST方式跨域請求，就算指定成POST方式，會自動轉為GET方式，而後端如果設定成POST方式了，那就無法請求了，此外jsonp預設會自動生成callback引數，這裡就不具體介紹了