Nutz 框架下 測試 jQuery-JSONP 插件跨域調用功能（Uncaught SyntaxError: Unexpected token : 出錯緣由解釋）

注：本文歡迎轉載，如下爲本人親測，轉載請註明：http://blog.csdn.net/wqmain/article/details/8905287

插件介紹：衆所周知，使用ajax直接發起請求存在跨域無權限訪問的問題，這時候，須要使用jsonp協議（非官方的協議）處理，jQuery中的$.ajax方法也直接支持使用該協議進行跨域訪問。下面首先介紹使用jQuery的$.ajax方法進行跨域訪問，而後再介紹使用其它jQuery插件（jQuery-JSONP）實現樣的功能。

一、新建一個jsp頁面，加入一段js代碼內容以下：

<script type="text/javascript">  
function ajaxtest() {  
$.ajax({  
   url:'http://192.168.10.111/demo/testjson',  
   data:{rel:13},  
   dataType:"jsonp",  
   jsonp:"callback",  
   jsonpCallback:"success_jsonp",  
   timeout:3000,  
   dataFilter:function(json){  
       console.log("jsonp.filter:"+json);  
       return json;  
   },  
   success:function(json,textStatus){  
       console.log("jsonp.success:"+json.name);  
   },  
   error:function(XMLHttpRequest,textStatus,errorThrown){  
       console.log("jsonp.error:"+textStatus);  
   }  
});  
}  
</script>

再添加一個按鈕用來測試該js方法，以下：

<input type="button" value="ajaxtest" onclick="ajaxtest()"/>

說明：當點擊 ajaxtest 按鈕時，就會發起一個請求，由url、dataType、jsonp等參數可知，ajax使用jsonp協議向 http://192.168.10.111/demo/testjson 這個地址發起請求，並自動在url後追加callback參數，實際請求的url地址應爲：http://192.168.10.111/demo/testjson?rel=13&callback=success_jsonp，請求超時時間爲3秒，接收的數據爲json格式字符串。若是成功接收到遠程方法返回的json數據而且格式正確的話，首先會進入dataFilter方法（你能夠在這個方法內對返回的json數據進行預處理，好比過濾、更改json數據等），而後進入success方法；若是請求失敗或者返回的json數據格式不正確的話會直接進入error方法。

那麼服務端的testjson方法應該返回什麼樣的數據呢？直接返回json對象或json字符串是不對的！還須要在以前加上請求時傳過來的callback的參數值，後臺（以servlet爲例）應相似以下處理：

public void testjson(HttpServletRequest request, HttpServletResponse response) {
	String callback = (String)request.getParameter("callback");
	String jsonData = "{\"id\":\"3\", \"name\":"zhangsan", \"telephone\":"13612345678"}";//爲了演示效果，json數據是寫死的
	String retStr = callback + "(" + jsonData + ")";
	response.getWriter().print(retStr);
}

這樣後臺響應的的數據實際爲：success_jsonp({"id":"3", "name":"zhangsan", "telephone":"13612345678"})    其中success_jsonp取決於ajax參數值的設定，若是未設定，jQuery將會自動生成一個名字做爲callback的參數值。總之，後臺只需request接收parameter後，動態拼接callback變量的值就能夠了。

若是返回的數據格式不按上述講的這樣，請求就會失敗並直接進入ajax的error方法。像 Uncaught SyntaxError: Unexpected token : 相似這種錯誤就是返回的json數據沒用「(」和「)」小括號包起來或者前面沒加callback值而引發的。

跨域調用功能除了用Query的$.ajax方法能夠實現外，網絡上還有其它衆多的jQuery插件能夠完成，下面就來看一下使用jQuery的jsonp插件來進行跨域調用：

首先在以前建立的jsp頁面中引入jQuery-JSONP插件並加入jsonptest測試方法，下載地址：https://github.com/jaubourg/jquery-jsonp

<script type="text/javascript" src="jquery.jsonp.js"></script>
<script type="text/javascript">
function jsonptest(){
$.jsonp({
   url:'http://192.168.10.111/demo/testjson',
   data:{rel:13},
   callbackParameter:"callback",
   timeout:3000,
   dataFilter:function(json){
    console.log("jsonp.filter:"+json.name);
    json.name = "測試123435";
return json;
},
   success:function(json,textStatus,xOptions){
       console.log("jsonp.success:"+json.name);
   },
   error:function(xOptions,textStatus){
    console.log("jsonp.error:"+textStatus+", rel="+xOptions.data.rel);
   }
});
}

再添加一個按鈕用來測試該js方法，以下：

<input type="button" value="jsonptest" onclick="jsonptest()"/>

說明：點擊jsonptest按鈕後，控制檯打印出來的效果和使用$ajax方法時的基本一致，不一樣的是dataFilter方法：雖然兩者都提供了dataFilter方法，但$.jsonp的dataFilter中數據已經直接轉換成json對象了，而$.ajax的dataFilter中獲取的倒是原生的帶callback方法名的json字符串(測試時控制檯打印出來的是undefined)。若是須要對返回的數據作預處理的話，建議使用jQuery-JSONP插件的$.jsonp方法。

前面介紹了用servlet編寫testjson方法，假設你對nutz框架（ http://code.google.com/p/nutz/）熟悉的話，下面貼出使用nutz框架編寫testjson方法：

@At("/testjson")
@Ok("raw")
public String testjson(HttpServletRequest req, String callback, String rel) throws Exception {
	Map<String, String> jsonMap = new LinkedHashMap<String, String>();
	jsonMap.put("id", "3");
	jsonMap.put("name", "zhangsan");
	jsonMap.put("telephone", "13612345678");
	jsonMap.put("rel", rel);
	String jsonp = callback + "(" + Json.toJson(jsonMap) + ")";
	return jsonp;
}

注意：若是你在MainModule中設置了全局的返回類型爲json的話（@Ok("json")），那麼testjson方法上須要加上 @Ok("raw")註解，不作解釋，不明白能夠看nutz官方文檔。