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 中关于CSS操作部分使用说明
Jun 10 Javascript
javascript document.images实例
May 27 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
浅谈angular4实际项目搭建总结
Dec 01 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
微信API接口大全
2015/04/15 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
js a标签点击事件
2017/03/30 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
对python的输出和输出格式详解
2018/12/08 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
电子商务个人自荐信
2013/12/12 职场文书
美国留学经济担保书
2014/05/20 职场文书
大学专科求职信
2014/07/02 职场文书
室内趣味活动方案
2014/08/24 职场文书
英语教育专业毕业生求职信
2014/08/28 职场文书