JSONP跨域请求


Posted in Javascript onMarch 02, 2017

什么是跨域:

1、域名不同

2、域名相同端口不同

js出于对安全考虑不支持跨域请求。我们可以使用JSONP解决跨域问题。

一、JSONP是什么

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页js是无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

原理:浏览器在js请求中,是允许通过script标签的src跨域请求,可以在请求的结果中添加回调方法名,在请求页面中定义方法,既可获取到跨域请求的数据。(js请求的不是一个单纯的json数据而是一段包含json数据的js脚本)

JSONP跨域请求

二、模拟JSONP

服务器域名:http://localhost:8081/rest/itemcat/list

客户端服务器:http://localhost:8082/test.html

1、普通的JS跨域请求

服务器数据:

JSONP跨域请求

客户端请求代码:

$(function(){
  $.ajax(    {url: "http://localhost:8081/rest/itemcat/list?callback=myFunction", 
     success: function(data){
      console.info(data)
   }}); 
 });

结果

XMLHttpRequest cannot load http://localhost:8081/rest/itemcat/list?callback=myFunction. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access.

2、模拟JSONP请求

客户端请求代码:

$(function(){
  greateScript("http://localhost:8081/rest/itemcat/list");
  function greateScript(src) {
   $("<script><//script>").attr("src", src).appendTo("body")
  } 
 });

结果:

list?_=1488425374097:1 Uncaught SyntaxError: Unexpected token :

三、使用JSONP

环境:

服务器域名:http://localhost:8081/rest/itemcat/list

客户端服务器:http://localhost:8082/test.html

服务端代码(本人使用springmvc4):

@RequestMapping("/itemcat/list")
 @ResponseBody
 public Object getItemCatList(String callback) {
  CatResult catResult = itemCatService.getItemCatList();
  MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(catResult);
  //设置JSONP回调函数
  mappingJacksonValue.setJsonpFunction(callback);
  return mappingJacksonValue;
 }

客户端调用代码:

$(function(){
  $.ajax(
   { url: "http://localhost:8081/rest/itemcat/list", 
    dataType: "jsonp",
    jsonp: "callback",
    success: function(data){
    console.info(data)
   }}); 
 });

结果:

JSONP跨域请求

看返回结果可以发现返回的数据不是一段单纯的json数据,而是一段js函数。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
Javascript的闭包
Dec 31 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
js编写三级联动简单案例
Dec 21 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 #Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 #Javascript
如何正确理解javascript的模块化
Mar 02 #Javascript
jquery实现左右滑动式轮播图
Mar 02 #Javascript
如何写好你的JavaScript【推荐】
Mar 02 #Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 #Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 #Javascript
You might like
PHP+DBM的同学录程序(5)
2006/10/09 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
php表单提交实例讲解
2015/11/12 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
Python错误处理操作示例
2018/07/18 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
python内存管理机制原理详解
2019/08/12 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
python中shell执行知识点
2020/05/06 Python
python 基于opencv实现图像增强
2020/12/23 Python
python如何构建mock接口服务
2021/01/28 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
自我介绍演讲稿
2014/01/15 职场文书
开会通知短信大全
2015/04/20 职场文书
PyMongo 查询数据的实现
2021/06/28 Python
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电