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 相关文章推荐
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
easyui validatebox验证
Apr 29 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
微信小程序图片自适应实现解析
Jan 21 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
第七节--类的静态成员
2006/11/16 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
python实现3D地图可视化
2020/03/25 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
python实现猜单词游戏
2020/05/22 Python
用python对oracle进行简单性能测试
2020/12/05 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
Python是如何进行类型转换的
2013/06/09 面试题
工业自动化毕业生自荐信范文
2014/01/04 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
公司运动会策划方案
2014/05/25 职场文书
委托书的格式
2014/08/01 职场文书
2014年女职工工作总结
2014/11/27 职场文书
护士个人总结范文
2015/02/13 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书