利用jquery.ajax()实现跨域

通过jQuery的ajax进行跨域，这其实是采用的jsonp的方式来实现的。

jsonp是英文json with padding的缩写。它允许在服务器端生成script tags至返回至客户端，也就是动态生成javascript标签，通过javascript callback的形式实现数据读取。

前端代码如下：

$.ajax({

type:"get",

async:false,

url:"http://192.168.0.168:8080/lightview/filecentral/filePageNums.do?id=443d6058-8f2b-4caa-97c8-bdb542346745",

dataType:"jsonp",

jsonp:"jsoncallback",

jsonpCallback:"success_jsoncallback",

success:function(data){

document.getElementById("spanTotalPageNum").innerHTML = data.pageNums;

pageNumsMax = data.pageNums;

}

})

[/code]服务器端代码如下：
开始以为，只要客户端通过jsonp就可以直接跨域访问，其实不然，需要服务器端的支持才行

@RequestMapping(value = "filePageNums.do",produces = "text/plain;charset=UTF-8")

@ResponseBody

public String getFilePageNums(@RequestParam("id") String id,@RequestParam("jsoncallback") String callbackName){

if(id==null||id.trim().equalsIgnoreCase("")){

throw new NullPointerException();

}

FileScope fileScope=service.getFileById(id);

String result=callbackName+"("+"{\"pageNums\":\"";

if(fileScope==null){

result+="0";

}

else {

result+=String.valueOf(ViewFileAPI.viewFilePageNums(fileScope.getFileId()));

}

result+="\"})";

return result;

}

[/code]首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:success_jsonpCallback)传给服务器端对应的处理函数。

服务器先生成需要返回给客户端的 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数(jsoncallback)的值(success_jsonpCallback) 。

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并将服务器端返回的数据，作为参数，
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里。

实际上跨域是通过动态增加script来加载数据，无法直接获得数据，所以需要使用回调函数。

来自为知笔记(Wiz)