ajax跨域请求结合springmvc后台代码学习整理

ajax跨域请求,在工作中遇到使用ajax发起请求获取数据,但是请求的数据不在同一个域下,这样子就要使用到ajax的跨域请求了!
我使用的框架 SpringMVC,我在PC端的项目里面写一个接口方法,但是在wap项目中也要用改接口!下面贴出示例代码
(1):前台请求代码
①:正常请求(不跨越)

$.ajax({
    url:'${pageContext.request.contextPath}/dufy/test',type:'get',data:{data:data},dataType:'json',success:function(data){
        //do something...
    },error: function(data){
        //do something...
    }

})

也可以使用 .getJSON() .getJSON的详情请点击 这里查看
②: 跨域请求

$(function(){
$.ajax({  
        type:'get',url : '${pageContext.request.contextPath}/dufy/test',dataType : 'jsonp',jsonpCallback: 'callback',success  : function() {  
           //do something...
        },error : function(data) {  
          //do something...
        }  
   });
})

function callback(data){
    var jsonobj = eval('(' + data + ')'); 
    if(jsonobj.orderCount!=""){
        //do something...
    } 
}

(2):后台代码

@RequestMapping(value="/dufy/test",method=RequestMethod.GET)
    @ResponseBody
    public void test(HttpServletRequest request,HttpServletResponse response){
        response.setHeader("P3P","CP=CAO PSA OUR");
        response.addHeader("Access-Control-Allow-Origin","*");
        String data = request.getParameter("data");

        //1:业务逻辑
        JSONObject returnMap = new JSONObject();
        if(StringUtil.isEmpty(data)){
            returnMap.put("state","error");
        }else{
            returnMap.put("state","success");
        }
        //2:输入json数据到前台页面
        PrintWriter pWriter = null;
        try {
            pWriter = response.getWriter();

            String type = request.getParameter("type");
            if("pc".equals(type)){
                pWriter.write(returnMap.toJSONString());

            }else if("wap".equals(type)){   
                pWriter.write("callback('" + returnMap.toJSONString() + "')");
            }
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
        }finally{
            if(pWriter!=null){
                pWriter.flush();
                pWriter.close();
            }           
        }

    }

在使用过程注意:后台代码中的 callback要与前期台调用 jsonpCallback: ‘callback’, 对应!
但是实际过程中又遇到新的问题,这个callback不能直接后台硬编码写死!要不前台如果有两个以上的请求在js中写两个function callback() 就会有错误函数名称相同了,那么怎么解决这个问题呢?
优化一下后台代码

...
//优化代码:添加后台获取callback
String callback = request.getParameter("callback");
...
//优化代码
pWriter.write(""+callback+"('" + returnMap.toJSONString() + "')");
//之前前代码
pWriter.write("callback('" + returnMap.toJSONString() + "')");

这样子就实现了动态化!

使用过程中如果有问题,欢迎一起讨论!
参考资料:
1:jquery中ajax处理跨域的三大方式
2:JQuery的Ajax跨域请求的解决方案
3:疯狂的JSONP
4:关于JSON与JSONP简单总结
5:window.name实现的跨域数据传输
6:JavaScript跨域总结与解决办法

相关文章

SpringMVC学习记录 注意:以下内容是学习 北京动力节点 的SpringMVC视频后所记录的笔记、源码以及个人的...
SpringMVC拦截器
SpringMVC学习记录 注意:以下内容是学习 北京动力节点 的SpringMVC视频后所记录的笔记、源码以及个人的...
SpringMVC流程及源码分析 前言 ​	学了一遍SpringMVC以后,想着做一个总结,复习一下。复习写下...
1、添加命名空间和xsd约束 2、在 application.xml文件中开启注解 3、配置扫描任务扫描包 4、demo
SpringMVC 概述 Spring 为展现层提供的基于 MVC 设计理念的优秀的 Web 框架,是目前最主流的 MVC 框架之...