JQuery Jsonp解決ajax跨域請求
阿新 • • 發佈：2019-01-26
1、同源策略
瀏覽器有一個很重要的概念——同源策略(Same-Origin Policy)。所謂同源是指，域名，協議，埠相同。不同源的客戶端指令碼(javascript、ActionScript)在沒明確授權的情況下，不能讀寫對方的資源。
2、JSONP
JSONP（JSON with Padding）是JSON的一種”使用模式”，可用於解決主流瀏覽器的跨域資料訪問的問題。由於同源策略，一般來說位於 server1.example.com 的網頁無法與不是 server1.example.com的伺服器溝通，而 HTML 的script 元素是一個例外。利用
3、具體實現
那下面我們來看看jquery 是怎麼處理跨域請求的，不多說，直接貼程式碼，先看個詳細版的：
<script type="text/javascript">
function getResult(data){
alert("through jsonp,receive data from other domain : "+data.result);
}
function jsonp_fun(){
$.ajax({
url:'http://localhost:8888/other/other.jsp',
type:'post',
data:{'params' 這裡的jsonCallback，回撥函式設定為getResult，那麼返回後會先呼叫getResult函式中的程式碼，再呼叫success函式中的程式碼，一般情況下，不用定義getResult函式，同樣jsonCallback不需要設定，那麼就只執行success中的程式碼，也就跟平時的ajax一樣用。
下面我們來看看正式的工作實現：
function jsonp_fun(){
$.ajax({
url:'http://localhost:8888/other/other.jsp',
type:'post',
data:{'params':'fromjsonp'},
dataType: "jsonp",
jsonp: "callback",//傳遞給請求處理程式或頁面的，用以獲得jsonp回撥函式名的引數名(一般預設為:callback)
success: function(data){
alert("through jsonp,receive data from other domain : "+data.result);
},
error: function(){
alert('fail');
}
});
}<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String params = request.getParameter("params");
String callback = request.getParameter("callback");
// 經過該介面一系列操作，然後得到data，將data返回給呼叫者
String data = "{\"result\":\""+params+"\"}";
out.println(callback + "("+data+")");
%> 這裡沒有指定jsonpCallback，實際上jquery底層拼裝了一個函式名。
補充：
1、ajax和jsonp這兩種技術在呼叫方式上“看起來”很像，目的也一樣，都是請求一個url，然後把伺服器返回的資料進行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝；
2、但ajax和jsonp其實本質上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態新增