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 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
Javascript 面向对象 继承
May 13 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
原生js简单实现放大镜特效
May 16 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
JavaScript函数柯里化实现原理及过程
Dec 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
JSON在PHP中的应用介绍
2012/09/08 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
Json解析的方法小结
2016/06/22 Javascript
js友好的时间返回函数
2016/08/24 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
用python生成1000个txt文件的方法
2018/10/25 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
德国团购网站:Groupon德国
2018/03/13 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
银行实习生的自我评价
2014/01/13 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
2016年春节慰问信息
2015/03/25 职场文书
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android