JSONP 的工作原理

简介: 很简单,就是利用标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个元素,地址指向第三方的API网址,形如:并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。

很简单,就是利用<script>标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形如:

<script src="http://www.example.net/api?param1=1&param2=2"></script>

并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。

第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如: callback({"name":"hax","gender":"Male"}) 这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。 补充:“历史遗迹”的意思就是,如果在今天重新设计的话,也许就不会允许这样简单的跨域了嘿,比如可能像XHR一样按照CORS规范要求服务器发送特定的http头。

相关文章
|
前端开发
前端学习案例1-jsonp实现跨域方式
前端学习案例1-jsonp实现跨域方式
44 0
前端学习案例1-jsonp实现跨域方式
|
前端开发
前端学习案例5-jsonp实现跨域方式5
前端学习案例5-jsonp实现跨域方式5
50 0
前端学习案例5-jsonp实现跨域方式5
|
前端开发
前端学习案例4-jsonp实现跨域方式4
前端学习案例4-jsonp实现跨域方式4
53 0
前端学习案例4-jsonp实现跨域方式4
|
前端开发
前端学习案例3-jsonp实现跨域方式3
前端学习案例3-jsonp实现跨域方式3
53 0
前端学习案例3-jsonp实现跨域方式3
|
前端开发
前端学习案例2-jsonp实现跨域方式2
前端学习案例2-jsonp实现跨域方式2
45 0
前端学习案例2-jsonp实现跨域方式2
|
JSON 前端开发 JavaScript
跨域问题的解决方案 jsonp cros原理
当浏览器端运行了一段ajax代码(无论是使用XMLHttpRequest还是fetch api),浏览器会首先判断它属于哪一种请求模式
跨域问题的解决方案 jsonp cros原理
|
前端开发 JavaScript API
JSONP原理及简单实现
JSONP原理及简单实现
156 0
JSONP原理及简单实现
|
JSON 前端开发 JavaScript
jsonp的原理·jsonp是不是ajax中实现跨域访问的技术
jsonp的原理·jsonp是不是ajax中实现跨域访问的技术
152 0
|
Web App开发 JavaScript 前端开发
AJAX工作原理及其优缺点
!(* ̄︶ ̄)!AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。
2777 0
|
XML JSON 前端开发
浅析ajax原理与用法
浅析ajax原理与用法 1 ajax原理 Ajax(Asynchronous JavaScript and XML (异步的JavaScript和XML)),是一种快速创建动态网页的技术,目的 是显示动态局部刷新.

相关课程

更多