ajax跨域

Posted 背着泰山找黄河

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax跨域相关的知识,希望对你有一定的参考价值。

  因工作需求,需要给一个移动端写一个登录验证。具体需求:由移动端访问java项目并传递相应的参数,项目后台接收参数并进行查询判断,然后返回给移动端,从而是移动端完成登录。

  解决步骤一,首先要在java项目中编写一个免登陆的方法,java项目正常都会有登录验证,想要访问项目中的某个方法时,均需要先进行登录,有个过滤器可以控制。我的登录验证方法如下:

  

/**
     * @param p
     * @throws Throwable
     */
    @Around("allMethod()")
    public Object apple(ProceedingJoinPoint p) throws Throwable {    
        /** 初始化参数 */
        InitArgs(p);
        if(map!=null&&request!=null){
            map.put("cpage", Common.isEmpty(request.getParameter("cpage"))?1:request.getParameter("cpage"));
        }
        boolean isReturnMAV = p.getSignature().toLongString().contains("org.springframework.web.servlet.ModelAndView");
        boolean isAjax = methodName.startsWith("aj_");
        boolean video = methodName.equals("video");
        Map<String, Object> paramMap = new HashMap<String, Object>();
        /** 验证登录 */
        LoginUser loginUser = (LoginUser)session.getAttribute(Constant.SS_LOGIN_USER);
    //当用户为空 并且isNeedValidLogin这个方法为true的时候才能走以下方法
if(loginUser == null && isNeedValidLogin(className, methodName)){ if(!isAjax){ if(video){ HttpSession session2 = request.getSession(); int id = Integer.parseInt(request.getParameter("id")); int equId = Integer.parseInt(request.getParameter("equId")); Equ equ = equManager.doGet(Equ.class, equId); List<Media> mlist = mediaManager.getListByequId(equId,1L); Media media = mediaManager.getById(id,1L); session2.setAttribute("melist",mlist); session2.setAttribute("mlist",media); session2.setAttribute("equ",equ); return "/equ/video3"; } return isReturnMAV ? new ModelAndView("redirect:/system/logout.htm") : "redirect:/system/logout.htm"; }else{ ControllerBase.responseJSONWrite(response, Common.JsonStrResult(-901, "会话超时!请重新登录! ", "")); } } /** LoginUser */ paramMap.put("LoginUser", loginUser); paramMap.put("SYS_MENU_MAP", session.getAttribute("Meau")); if(SystemController.class.toString().contains(className) && !",aj_setting,dialog_set_wgt,home,index,".contains(","+methodName+",")){ if(loginUser != null && loginUser.IS_WGT && (loginUser.GROUP_ID == null || loginUser.WTIME_ID == null)){ if(!isAjax){ Object result = p.proceed(); return result; }else{ ControllerBase.responseJSONWrite(response, Common.JsonStrResult(-903, "请求超时! ", "")); } } } try { //执行方法 Object result = p.proceed(); //获取页面样式标记 Object cssTip = RequestUtil.getSessionAttr(session, Constant.SS_PAGE_CSS); if(cssTip == null){ RequestUtil.setSessionAttr(session, Constant.SS_PAGE_CSS, "mcss/baitian.css"); } if(result != null && !result.toString().contains("redirect:")){ if(map!=null&&request!=null){ map.put("cpage", Common.isEmpty(request.getParameter("cpage"))?1:request.getParameter("cpage")); } paramMap.put("PAGE_TITLE", Constant.PAGE_TITLE); /*if(request!=null){ paramMap.put("PATH_", request.getContextPath()); }*/ //paramMap.put("REQ_URI", request.getRequestURI()); if(loginUser != null){ //System.out.println(loginUser.UNAME); //map.put("M_MENU_AUTH", ","+loginUser.MENU_AUTH+","); paramMap.put("M_ACTION_AUTH", Common.Base64EncodeStr(","+loginUser.ACTION_AUTH+",")); //paramMap.put("SYS_MENU_MAP", GlobalUtil.SysMenuMap); //paramMap.put("SYS_MENU_MAP", session.getAttribute("Meau")); paramMap.put("SYS_MENU_MAP_", GlobalUtil.SysMenuMap_); /** 记录处理用户当前正在操作的菜单ID,涉及菜单选中、当前位置 */ /*InitMenu_(paramMap);*/ } } //获取args_参数 并放入map if(request!=null){ String args_ = RequestUtil.getStringParam(request, "args_", ""); if(!"".equals(args_)){ paramMap.put("args_", args_); } if(map != null){ map.putAll(paramMap); }else{ for (Iterator<String> keys = paramMap.keySet().iterator(); keys.hasNext();) { String key = keys.next(); request.setAttribute(key, paramMap.get(key)); } } } return result; } catch (Exception ex) { ex.printStackTrace(); if(!isAjax){ String exceptUrl_ = "redirect:/system/except.htm?id_="; return isReturnMAV ? new ModelAndView(exceptUrl_) : exceptUrl_; }else{ ControllerBase.responseJSONWrite(response, Common.JsonStrResult(-902, "操作失败! 异常:"+ex.getMessage(), ex.getMessage())); } } return null; } /** * 后台-- 是否需要验证 登录 * @param className * @param methodName * @return */ private static boolean isNeedValidLogin(String className, String methodName){ if(SystemController.class.toString().contains(className)){
      //当满足以下条件的时候isNeedValidLogin()方法为false,aj_mbUser此方法即移动端访问项目的方法
if(",gologin,dologin,logout,except,aj_mbUser,".contains(","+methodName+",")){ return false; } } if(MyHandlerExceptionResolver.class.toString().contains(className)){ return false; } if(MediaController.class.toString().contains(className)){ if(",doTime1,".contains(","+methodName+",")){ return false; } } return true; }

  步骤二:以上是为了实现当移动端访问项目时的免登陆功能,以下为移动端访问项目的方法。以为,移动端访问java项目,属于跨域访问,所以添加了ResponseBody属性

@RequestMapping("/sysuser/aj_mbuser.htm")
    @ResponseBody
    public String aj_mbUser(HttpServletRequest request,HttpServletResponse response,
            String callback,String userName,String passWord,ModelMap model) throws Exception{
        
        TSysUser user = sysUserManager.getSysUserByLogin(userName, passWord);
        String result = "false";

        if(user!=null&&user.getId()>0){
             result = "{\'isOk\':\'true\'}";
            
        }else{
             result = "{\'isOk\':\'false\'}";
        }
        result = callback+"("+result+")";
        return result;

    }

  步骤三:页面中的方法如下,dataType切记,是jsonp格式,不是jeson格式,并且jsonp属性后边是callback。

function submitForm(){
            var uname=$("#uname").val();
            var upass=$("#upass").val();
            var url="http://211.103.196.218:8083/yyhspx/sysuser/aj_mbuser.htm";
            $.ajax({
                type: "POST",//请求方式
                url: url,
                dataType: "jsonp",
                jsonp: "callback",
                data: {
                    "userName": uname,
                    "passWord": upass
                },
                success : function(data) {
                    if(data.isOk==\'true\'){
                        window.location.href="index.html";
                    }else{
                        alert("用户名或者密码错误");
                    }
            },
                error : function() {
                alert("用户名或者密码错误");
        }
    });
<input type="text" name="" class="userName" placeholder="admin" id="uname">
        <input type="password" name="" class="passWord"  value="admin" id="upass">
        <input type="button" name="" onclick="submitForm()" class="subBut" value="登录">

 对于json和jsonp的区别,来自另外一个博客,地址:http://www.cnblogs.com/sunxucool/p/3433992.html 

json格式:
{
    "message":"获取成功",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
}
jsonp格式:
callback({
    "message":"获取成功",
    "state":"1",
    "result":{"name":"工作组1","id":1,"description":"11"}
})

看出来区别了吧,在url中callback传到后台的参数是神马callback就是神马,jsonp比json外面有多了一层,callback()。这样就知道怎么处理它了。于是修改后台代码。

后台java代码最终如下:

复制代码
@RequestMapping(value = "/getGroupById")
  public String getGroupById(@RequestParam("id") Long id,
      HttpServletRequest request, HttpServletResponse response)
      throws IOException {
    String callback = request.getParameter("callback");
    ReturnObject result = null;
    Group group = null;
    try {
      group = groupService.getGroupById(id);
      result = new ReturnObject(group, "获取成功", Constants.RESULT_SUCCESS);
    } catch (BusinessException e) {
      e.printStackTrace();
      result = new ReturnObject(group, "获取失败", Constants.RESULT_FAILED);
    }
    String json = JsonConverter.bean2Json(result);
    response.setContentType("text/html");
    response.setCharacterEncoding("utf-8");
    PrintWriter out = response.getWriter();
    out.print(callback + "(" + json + ")");
    return null;
  }
复制代码

注意这里需要先将查询结果转换我json格式,然后用参数callback在json外面再套一层,就变成了jsonp。指定数据类型为jsonp的ajax就可以做进一步处理了。

追求永无止境,在google的过程中,无意中发现了一个专门用来解决跨域问题的jQuery插件-jquery-jsonp

有第一种方式的基础,使用jsonp插件也就比较简单了,server端代码无需任何改动。

来看一下如何使用jquery-jsonp插件解决跨域问题吧。

复制代码
var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
    +"?id=1&callback=?";
$.jsonp({
  "url": url,
  "success": function(data) {
    $("#current-group").text("当前工作组:"+data.result.name);
  },
  "error": function(d,msg) {
    alert("Could not find user "+msg);
  }
});
复制代码

 

至此两种解决跨域问题的方式就全部介绍完毕。

 

以上是关于ajax跨域的主要内容,如果未能解决你的问题,请参考以下文章

如何发送跨域ajax请求[重复]

关于ajax跨域

如何解决ajax跨域问题

jQuery:跨域 AJAX 调用导致“访问受限 URI 被拒绝”(代码 1012)

前端Jquery-Ajax跨域请求,并携带cookie

ajax之jsonp跨域请求