利用jquery.ajax()实现跨域

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

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

前端代码如下：

1. $.ajax({
2. type:"get",
3. async:false,
4. url:"http://192.168.0.168:8080/lightview/filecentral/filePageNums.do?id=443d6058-8f2b-4caa-97c8-bdb542346745",
5. dataType:"jsonp",
6. jsonp:"jsoncallback",
7. jsonpCallback:"success_jsoncallback",
8. success:function(data){
9. document.getElementById("spanTotalPageNum").innerHTML = data.pageNums;
10. pageNumsMax = data.pageNums;
11. }
12. })

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

1. @RequestMapping(value = "filePageNums.do",produces = "text/plain;charset=UTF-8")
2. @ResponseBody
3. public String getFilePageNums(@RequestParam("id") String id,@RequestParam("jsoncallback") String callbackName){
4. if(id==null||id.trim().equalsIgnoreCase("")){
5. throw new NullPointerException();
6. }
8. FileScope fileScope=service.getFileById(id);
10. String result=callbackName+"("+"{\"pageNums\":\"";
11. if(fileScope==null){
12. result+="0";
13. }
14. else {
16. result+=String.valueOf(ViewFileAPI.viewFilePageNums(fileScope.getFileId()));
17. }
19. result+="\"})";
20. return result;
21. }

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

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

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

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

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/xiaozhi123/p/4702852.html