当前位置: 首页 > news >正文

JSONP原理

JSONP原理:

  1. 首先在客户端注册一个callback, 然后把callback的名字传给服务器。
  2. 此时,服务器先生成 json 数据。
  3. 然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的callback参数值 .
  4. 最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
  5. 客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.

jsonp 原理,代码示意:

本地定义的函数===

<script>
    function local_func(data) {
        // 函数内容
    }
</script>

返回的数据放在srcipt标签里===

<script src="http://api.douban.com/v2/movie/in_theaters?callback=local_func"></script>
等价于:
<script>
    ;local_func([返回的数据])
</script>

jsonp的2种实现方式:

1.jsonp 在原生js中的实现:
通过src="http://api.douban.com/v2/movie/in_theaters?callback=local_func"。
直接输入访问:http://api.douban.com/v2/movi... ,返回的数据是一个对象:{xxx}。
直接输入访问:http://api.douban.com/v2/movi... ,返回的数据是一个对象:{xxx}。
直接输入访问:http://api.douban.com/v2/movi... ,返回的数据是:;local_func({xxx})。
注意点:
callback指定的回调函数,是客户端注册的,必须是定义在window下的全局函数。
例子网址:https://github.com/cag2050/js...

2.jsonp 在jquery ajax中的实现:
例子网址:https://github.com/cag2050/js...

  • 代码所在github仓库:https://github.com/cag2050/js...

相关文章:

  • 灭绝僵尸
  • HTTP 05 安全
  • ajax跨域jsonp及jquery中的调用问题
  • idea中git远程版本回退
  • Linux中查看系统版本的方法
  • 心有多大,微博就有多大!
  • 21.26 mongodb介绍
  • WPF入门(一):简单的演示
  • winSockets编程(三)最简单的C/S形式
  • 在 DLL工程中加入新 CFormView时的 注意事项
  • 网络问题排查
  • 游戏中汉字显示的实现与技巧[ZZ]
  • 源码探探之StartActivity(一)
  • 《见与不见》
  • 旅行(LCA)
  • Apache的基本使用
  • Electron入门介绍
  • express如何解决request entity too large问题
  • HashMap ConcurrentHashMap
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • Javascript 原型链
  • Java基本数据类型之Number
  • leetcode46 Permutation 排列组合
  • REST架构的思考
  • supervisor 永不挂掉的进程 安装以及使用
  • 编写高质量JavaScript代码之并发
  • 大数据与云计算学习:数据分析(二)
  • 官方解决所有 npm 全局安装权限问题
  • 聚类分析——Kmeans
  • 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的?
  • 马上搞懂 GeoJSON
  • 那些年我们用过的显示性能指标
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • 提醒我喝水chrome插件开发指南
  • 温故知新之javascript面向对象
  • 小程序滚动组件,左边导航栏与右边内容联动效果实现
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  • 用quicker-worker.js轻松跑一个大数据遍历
  • 原生Ajax
  • ​LeetCode解法汇总1410. HTML 实体解析器
  • ​如何防止网络攻击?
  • (14)Hive调优——合并小文件
  • (react踩过的坑)Antd Select(设置了labelInValue)在FormItem中initialValue的问题
  • (翻译)Quartz官方教程——第一课:Quartz入门
  • (分享)一个图片添加水印的小demo的页面,可自定义样式
  • (过滤器)Filter和(监听器)listener
  • (七)MySQL是如何将LRU链表的使用性能优化到极致的?
  • (十)T检验-第一部分
  • (收藏)Git和Repo扫盲——如何取得Android源代码
  • (一)ClickHouse 中的 `MaterializedMySQL` 数据库引擎的使用方法、设置、特性和限制。
  • (终章)[图像识别]13.OpenCV案例 自定义训练集分类器物体检测
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .
  • .NET Core WebAPI中使用Log4net 日志级别分类并记录到数据库
  • .NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例