文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JSONP跨域请求怎么实现

2024-04-02 19:55

关注

这篇文章主要介绍JSONP跨域请求怎么实现,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

什么是跨域:

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函数。

以上是“JSONP跨域请求怎么实现”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯