利用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;
          }
          })

服务器端代码如下：
开始以为，只要客户端通过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;
    }

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

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

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

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

利用jquery.ajax()实现跨域

标签：

原文地址：http://www.cnblogs.com/xiaozhi123/p/4702852.html