回调函数域JSONP的原理介绍

最新推荐文章于 2025-07-19 09:09:35 发布

dyl_love98

最新推荐文章于 2025-07-19 09:09:35 发布

阅读量447

点赞数

CC 4.0 BY-SA版权

文章标签：回调函数域

本文链接：https://blog.youkuaiyun.com/javablogs/article/details/8917235

本文介绍了JSONP（JSON with padding）的基本概念及其如何解决跨域问题。通过具体案例展示了JSONP的工作原理，同时对比了JSONP与Ajax的区别，并列举了其他几种解决跨域的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先声明，我是一个菜鸟。一下文章中出现技巧误导情况盖不负责

1.JSOP存在的必要性 参考1 ,2

Ajax数据的获取须要遵循同源的策略，也就是须要使用相同的域名、端口、协议，所以要想获取不同域的数据就存在问题。因此基于此问题就衍生出了很多解决Ajax跨域的技巧，譬如：服务器代理、img、iframe等等技巧。 JSONP是JSON with padding的缩写。

2.JSONP的原理

在当地创建一个回调函数，然后在跨域段调用该回调函数，并将JSON数据作为参数传递给回调函数，实现回调。

3.案例解析

a.html须要跨域解决问题

<script>
    function aa(data){
         alert(data.message);
   }

   function loadScript(url){
       var script  =  document.createElement('script');
       script.setAttribute('type','text/javascript');
       script.src = url;
       document.body.appendChild(script);
  }

  window.onload = function(){
     
    var a = document.getELementById('aaa');
    a.onclick = function(){
        var url = "http://b.html?callback=aa";
        loadScript(url);
    }
  }
</script>

每日一道理
记不清有多少个夜晚，在我翻阅纸张的指间滑落；记不清有多少支蜡烛，在我的凝视中化为灰烬。逝者如斯，我时时刻刻会听见自己对生命承诺的余音，感到岁月的流转在渐渐稀释我的年少无知，我愿自己是一只上足了发条的时钟，在昼夜不停的流转中留下自己充实的每一刻。

在b页面,执行回调函数，并将json数据作为参数填充到回调函数中，实现回调函数

1.获取回调函数
2.然后执行回调函数
  var  data = {

     "message" :"sucess"
  }

  callback(data);

4.Ajax技巧与JSONP技巧的差别

1.两种技巧“看起来”很像，目标一样，都是请求一个URL，然后对从服务器端获取的数据停止处理；

2.Ajax技巧的核心是通过XMLHttpRequest对象来获取数据，而JSONP通过动态创建script，然后在服务器端执行回调函数实现数据的获取，采取的是两种完整不同的技巧；

3.区分不在于是不是跨域，jsonp也可以解决同域的数据获取。

5.解决跨域的其他方法

iframe、服务器代理、图片等等

文章结束给大家分享下程序员的一些笑话语录：苹果与谷歌之争就是封闭收费与自由免费思想之争。（别急着把google来膜拜哦？那可是一家公司，以赚钱为目标的公司！当年我Party就是这样把广大劳动人民吸引过来的。今天的结果你们都看到了。）