ajax前台后台跨域请求处理方式


Posted in Javascript onFebruary 08, 2018

最近一直在搞公众号前台开发,遇到了ajax跨域请求的问题,像地区的省-市-县三级联动、汽车品牌-车系-车款的三级联动查询等都需要调用外部接口(其他工程项目的接口)完成。下面就分享一下个人解决跨域请求的方案,当然是在后台程序猿大哥的帮助下,我才弄明白了其中的渊源,赶紧记录下来慢慢积累,也希望对大家能有所帮助,还请积极提出意见或建议。

跨域请求需要借助后台代码接收callback回调函数,对json数据进行进一步处理;前台再用ajax请求向服务器发送callback参数,并指定数据格式为jsonp。

一、后台对跨域请求进行处理

1.CarBrandController.java(汽车品牌接口java文件),这里列出的方法主要用来根据不同的level值查询对应的品牌、车系、车款,在这里对跨域请求做一个接收回调函数的处理,如果返回的callback为null,则不是跨域请求,不需要做特殊处理,直接打印json接口数据即可;如果返回的callback不为null,则表示跨域请求,这时要对json数据做一个特殊处理,即在json数据的外层加一对小括号包起来,具体请看HttpAdapter.java文件中的printlnJSONObject方法。

public void json(HttpServletRequest request,HttpServletResponse response){ 
  Map<String,Object>map=new HashMap<String, Object>(); 
  String id = request.getParameter("id");      //接收ajax请求带过来的id 
  String level = request.getParameter("level");   //接收ajax请求带过来的level 
  String callback=request.getParameter("callback"); //接收ajax请求带过来的callback参数 
  if ("1".equals(level)) {             //如果level是'1',则查询第一级目录内容 
    map.put("results", this.carBrandService.findByAttr(null, "first_letter asc")); //调用查询方法,结果放入map 
  } else if ("2".equals(level)) {          //如果level是'2',则查询第二级目录内容 
    map.put("results", this.carSerieService.findByAttr("parent_id="+id, "first_letter asc"));//调用查询方法,结果放入map 
  } else if ("3".equals(level)) {          //如果level是'3',则查询第三极目录内容 
    map.put("results", this.carModelYearService.findByAttr("parent_id="+id, "jian_pin desc"));//调用查询方法,结果放入map 
  } 
  map.put("level",level); 
  if (null==callback) {               //如果接收的callback值为null,则是不跨域的请求,输出json对象 
    HttpAdapter.printlnObject(response, map); 
  }else{                      //如果接收的callback值不为null,则是跨域请求,输出跨域的json对象 
  HttpAdapter.printlnJSONPObject(response, map, callback); 
  } 
}

2.HttpAdapter.java(输出对象的java文件),printlnObject方法打印正常json字符串;printlnJSONObject方法对json字符串进行了特殊处理。

/** 
 * 打印对象 
 * @param response 
 * @param object 
*/ 
public static void printlnObject(HttpServletResponse response,Object object){ 
  PrintWriter writer=getWriter(response); 
  writer.println(JSON.toJSONString(object)); 
} 
/** 
 * 打印跨域对象 
 * @param response 
 * @param object 
*/ 
public static void printlnJSONPObject(HttpServletResponse response,Object object,String callback){ 
  PrintWriter writer=getWriter(response); 
  writer.println(callback+"("+JSON.toJSONString(object)+")"); 
}

二、前台ajax跨域请求数据

写法1:向服务器发送一个参数callback=?,同时指定dataType为'jsonp'的格式,跨域请求时指定的数据格式必须是jsonp的形式。

function loadData(obj,level,id,value){ 
  $.ajax({  
    url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id+'&callback=?',   //将callback写在请求url后面作为参数携带 
    type:'GET', 
    async:false, 
    dataType:'jsonp', 
    success:function(data){         
      console.log(data);             
      //其他处理(动态添加数据元素)       
  });    
}

写法2:callback不需要写在url中,但是要指定jsonp参数为'callback',并给jsonpCallback参数一个值。

function loadData(obj,level,id,value){ 
  $.ajax({  
    url:'http://192.168.1.106:8086/carBrand/json.html?level='+level+'&id='+id, 
    type:'GET', 
    dataType:'jsonp', 
    jsonp: 'callback',          //将callback写在jsonp里作为参数连同请求一起发送 
    jsonpCallback:'jsonpCallback1',    
    success:function(data){            
    console.log(data);       
}); }

以上两种写法的含义是一样的,只是写法不同罢了。

接下来补充一下jsonp的工作原理。

三、jsonp跨域的原理解析

jsonp的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.

JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

jsonCallback 函数jsonp1236827957501(....): 是浏览器客户端注册的,获取跨域服务器上的json数据后,回调的函数

Jsonp原理:

首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意:服务端得到callback的数值后,要用jsonp1236827957501(......)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。

然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)

可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

注意,jquey是不支持post方式跨域的.

Javascript 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
微信开发 微信授权详解
Oct 21 Javascript
jQuery插件之validation插件
Mar 29 jQuery
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 #Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 #Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 #Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 #Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 #Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 #Javascript
使用veloticy-ui生成文字动画效果
Feb 08 #Javascript
You might like
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
jquery动态添加option示例
2013/12/30 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
vue debug 二种方法
2018/09/16 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
python读写csv文件实例代码
2019/07/05 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
药学专业大学生个人的自我评价
2013/11/04 职场文书
写自荐信三大法宝
2014/01/24 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
植树节标语
2014/06/27 职场文书
聚会通知怎么写
2015/04/23 职场文书
婚育证明样本
2015/06/16 职场文书
公司人事管理制度
2015/08/05 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript