最近一直在搞公眾號前臺開發(fā)，遇到了ajax跨域請求的問題，像地區(qū)的省-市-縣三級聯(lián)動(dòng)、汽車品牌-車系-車款的三級聯(lián)動(dòng)查詢等都需要調(diào)用外部接口(其他工程項(xiàng)目的接口)完成。下面就分享一下個(gè)人解決跨域請求的方案，當(dāng)然是在后臺程序猿大哥的幫助下，我才弄明白了其中的淵源，趕緊記錄下來慢慢積累，也希望對大家能有所幫助，還請積極提出意見或建議。

跨域請求需要借助后臺代碼接收callback回調(diào)函數(shù)，對json數(shù)據(jù)進(jìn)行進(jìn)一步處理；前臺再用ajax請求向服務(wù)器發(fā)送callback參數(shù)，并指定數(shù)據(jù)格式為jsonp。

一、后臺對跨域請求進(jìn)行處理

1.CarBrandController.java(汽車品牌接口java文件)，這里列出的方法主要用來根據(jù)不同的level值查詢對應(yīng)的品牌、車系、車款，在這里對跨域請求做一個(gè)接收回調(diào)函數(shù)的處理，如果返回的callback為null,則不是跨域請求，不需要做特殊處理，直接打印json接口數(shù)據(jù)即可；如果返回的callback不為null，則表示跨域請求，這時(shí)要對json數(shù)據(jù)做一個(gè)特殊處理，即在json數(shù)據(jù)的外層加一對小括號包起來，具體請看HttpAdapter.java文件中的printlnJSONObject方法。

public void json(HttpServletRequest request,HttpServletResponse response){   Map<String,Object>map=new HashMap<String, Object>();   String id = request.getParameter("id");      //接收ajax請求帶過來的id   String level = request.getParameter("level");   //接收ajax請求帶過來的level   String callback=request.getParameter("callback"); //接收ajax請求帶過來的callback參數(shù)   if ("1".equals(level)) {             //如果level是'1',則查詢第一級目錄內(nèi)容     map.put("results", this.carBrandService.findByAttr(null, "first_letter asc")); //調(diào)用查詢方法，結(jié)果放入map   } else if ("2".equals(level)) {          //如果level是'2',則查詢第二級目錄內(nèi)容     map.put("results", this.carSerieService.findByAttr("parent_id="+id, "first_letter asc"));//調(diào)用查詢方法，結(jié)果放入map   } else if ("3".equals(level)) {          //如果level是'3',則查詢第三極目錄內(nèi)容     map.put("results", this.carModelYearService.findByAttr("parent_id="+id, "jian_pin desc"));//調(diào)用查詢方法，結(jié)果放入map   }   map.put("level",level);   if (null==callback) {               //如果接收的callback值為null,則是不跨域的請求,輸出json對象     HttpAdapter.printlnObject(response, map);   }else{                      //如果接收的callback值不為null,則是跨域請求，輸出跨域的json對象   HttpAdapter.printlnJSONPObject(response, map, callback);   } } 

2.HttpAdapter.java(輸出對象的java文件)，printlnObject方法打印正常json字符串；printlnJSONObject方法對json字符串進(jìn)行了特殊處理。

/**  * 打印對象  * @param response  * @param object */ public static void printlnObject(HttpServletResponse response,Object object){   PrintWriter writer=getWriter(response);   writer.println(JSON.toJSONString(object)); } /**  * 打印跨域?qū)ο? * @param response  * @param object */ public static void printlnJSONPObject(HttpServletResponse response,Object object,String callback){   PrintWriter writer=getWriter(response);   writer.println(callback+"("+JSON.toJSONString(object)+")"); } 

二、前臺ajax跨域請求數(shù)據(jù)

寫法1：向服務(wù)器發(fā)送一個(gè)參數(shù)callback=？，同時(shí)指定dataType為'jsonp'的格式，跨域請求時(shí)指定的數(shù)據(jù)格式必須是jsonp的形式。

function loadData(obj,level,id,value){   $.ajax({      url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id+'&callback=?',   //將callback寫在請求url后面作為參數(shù)攜帶     type:'GET',     async:false,     dataType:'jsonp',     success:function(data){               console.log(data);                   //其他處理(動(dòng)態(tài)添加數(shù)據(jù)元素)         });    }   

寫法2：callback不需要寫在url中，但是要指定jsonp參數(shù)為'callback'，并給jsonpCallback參數(shù)一個(gè)值。

function loadData(obj,level,id,value){   $.ajax({      url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id,     type:'GET',     dataType:'jsonp',     jsonp: 'callback',          //將callback寫在jsonp里作為參數(shù)連同請求一起發(fā)送     jsonpCallback:'jsonpCallback1',        success:function(data){                console.log(data);       }); }

以上兩種寫法的含義是一樣的，只是寫法不同罷了。

接下來補(bǔ)充一下jsonp的工作原理。

三、jsonp跨域的原理解析

jsonp的最基本的原理是:動(dòng)態(tài)添加一個(gè)<script>標(biāo)簽，而script標(biāo)簽的src屬性是沒有跨域的限制的。這樣說來,這種跨域方式其實(shí)與ajax XmlHttpRequest協(xié)議無關(guān)了.

JSONP是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過javascript callback的形式實(shí)現(xiàn)跨域訪問JSONP即JSON with Padding。由于同源策略的限制，XmlHttpRequest只允許請求當(dāng)前源（域名、協(xié)議、端口）的資源。如果要進(jìn)行跨域請求，我們可以通過使用html的script標(biāo)記來進(jìn)行跨域請求，并在響應(yīng)中返回要執(zhí)行的script代碼，其中可以直接使用JSON傳遞javascript對象。這種跨域的通訊方式稱為JSONP。

jsonCallback 函數(shù)jsonp1236827957501(....): 是瀏覽器客戶端注冊的，獲取跨域服務(wù)器上的json數(shù)據(jù)后，回調(diào)的函數(shù)

Jsonp原理：

首先在客戶端注冊一個(gè)callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)傳給服務(wù)器。注意：服務(wù)端得到callback的數(shù)值后，要用jsonp1236827957501(......)把將要輸出的json內(nèi)容包括起來，此時(shí)，服務(wù)器生成 json 數(shù)據(jù)才能被客戶端正確接收。

然后以 javascript 語法的方式，生成一個(gè)function , function 名字就是傳遞上來的參數(shù) 'jsoncallback'的值 jsonp1236827957501 .

最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞剑胖玫?function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。

客戶端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的 javascript 文檔，此時(shí)javascript文檔數(shù)據(jù),作為參數(shù)，
傳入到了客戶端預(yù)先定義好的 callback 函數(shù)(如上例中jquery $.ajax()方法封裝的的success: function (json))里.（動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)）

可以說jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空間就是大量采用這種方式來實(shí)現(xiàn)跨域數(shù)據(jù)交換的) .JSONP是一種腳本注入(Script Injection)行為,所以也有一定的安全隱患.

注意,jquey是不支持post方式跨域的.