利用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. }
  7. FileScope fileScope=service.getFileById(id);
  8. String result=callbackName+"("+"{\"pageNums\":\"";
  9. if(fileScope==null){
  10. result+="0";
  11. }
  12. else {
  13. result+=String.valueOf(ViewFileAPI.viewFilePageNums(fileScope.getFileId()));
  14. }
  15. result+="\"})";
  16. return result;
  17. }

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

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

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

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





posted @ 2015-08-04 18:52  小指  阅读(764)  评论(0编辑  收藏  举报