JSONP跨域调用的原理
发布时间:2020-12-16 18:55:37 所属栏目:百科 来源:网络整理
导读:原文链接:https://www.zhihu.com/question/19966531 很简单,就是利用script标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个script元素,地址指向第三方的API网址,形如: script src="http://www.exam
原文链接:https://www.zhihu.com/question/19966531 很简单,就是利用<script>标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形如: <script src="http://www.example.net/api?param1=1¶m2=2"></script>并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。 第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如: callback({"name":"hax","gender":"Male"}) 这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。 补充:“历史遗迹”的意思就是,如果在今天重新设计的话,也许就不会允许这样简单的跨域了嘿,比如可能像XHR一样按照CORS规范要求服务器发送特定的http头。
$('#douban').blur(function() { var douban = $(this) var id = douban.val() if (id) { $.ajax({ url: 'https://api.douban.com/v2/movie/subject/' + id,cache: true,type: 'get',dataType: 'jsonp',crossDomain: true,jsonp: 'callback',success: function(data) { $('#inputTitle').val(data.title) $('#inputDoctor').val(data.directors[0].name) $('#inputCountry').val(data.countries[0]) $('#inputPoster').val(data.images.large) $('#inputYear').val(data.year) $('#inputSummary').val(data.summary) } }) } }) }) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
- c – 使用vowpal wabbit的典型技术堆栈?
- 在C#托盘中拖放NotifyIcon
- C#反思为什么GetFields列出我没有创建的字段?如
- vue-cli项目如何使用vue-resource获取本地的json
- [寒江孤叶丶的Cocos2d-x之旅_21]3.x RichText自动
- vuex中的 mapState,mapGetters,mapActions,mapMu
- 使用多个库模块聚合Javadoc for Android项目
- flex SDK 3.2升级到 3.5 1046错误 charts组件无
- ruby-on-rails – 在使用capistrano部署到amazon
- weblogic 11G 虚拟目录映射weblogic.xml配置
热点阅读