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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
vant中的toast轻提示实现代码
Nov 04 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
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常用的url处理函数总结
2014/11/19 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
utf8的编码算法 转载
2006/12/27 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
js中less常用的方法小结
2017/08/09 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
linux环境下Django的安装配置详解
2019/07/22 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
巴西宠物商店:Cobasi
2019/04/19 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
施工班组长岗位职责
2014/01/05 职场文书
员工辞退通知书
2015/04/17 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python