JSONP 的工作原理

作者: bo_bo_bo_la | 来源:发表于2017-11-14 22:07 被阅读13次

JSONP 的工作原理

1. JSONP由来

根据浏览器同源策略,所谓同源就是协议、主机、端口号都相同时成为同源。a 域的js不能直接访问 b域名的信息,但是script 标签的src属性可以跨域引用文件,jsonp是请求之后后台包装好一段json,并且把数据放在一个callback函数,返回一个js文件,动态引入这个文件,下载完成js之后,会去调用这个callback,通过这样访问数据。

2. JSONP有什么用

由于同源从略的限制,XMLHttpRequest只允许请求前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后再服务端输出JSON数据并执行回调函数,从而解决跨域数据请求

3. 如何使用JSONP

  • HTML代码


    HTML代码
  • PHP代码


    PHP代码

4. JSONP原理

首先在客户端注册一个callback,然后把callback的名字传给服务器。此时,服务器先生成json数据,然后以javascript语法的方式,生成function,function名字就是传递上来I带参数jsonp。最后将json数据直接以入参的方式,放置function中,这样就生成js语法的文档,返回给客户端。客户端浏览器,解析script变迁,并执行返回javascript文档,此时数据作为参数,传入了客户端预先定义好的callback函数里。
简单的说,就是利用script标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。

5. 备注

json 是一种数据格式
jsonp 是一种数据调用的方式,
联系 带callback的json就是jsonp

欢迎来到大瑞的微博

相关文章

  • jsonp工作原理

    1.问题背景 由于浏览器的同源策略(同一协议,域名,端口,当其中一个不满足的时候,就会发生跨域)的限制,非同源请求...

  • JSONP 的工作原理

    JSONP 的工作原理 1. JSONP由来 根据浏览器同源策略,所谓同源就是协议、主机、端口号都相同时成为同源。...

  • JSON和JSONP

    什么JSON JSON的优点 JSON的格式 什么是JSONP JSONP的工作原理 1. 2. 4 总结

  • jsonp原理

    模拟jsonp原理 servlet 测试 http://localhost/jq/jsonp.jsp JSONP ...

  • jsonp的原理

    jsonp的原理

  • 跨域的几种解决方案

    方法一:JSONP 原理 JSONP(JSON with padding),padding有填补的意思,所以JSO...

  • ajax跨域请求

    ajax跨域请求(jsonp) 利用JSONP解决AJAX跨域问题的原理与jQuery解决方案JSONP jQue...

  • 前端常见面试题(十七)@郝晨光

    解释jsonp的原理 jsonp的原理就是利用script标签不受同源策略限制的特性,通过与后端协作,动态的创建s...

  • 解释 jsonp 的原理,以及为什么不是真正的 ajax?

    JSONP原理: jsonp,即json+padding,动态创建script标签,利用script标签的src属...

  • 遇到的面试题

    null instanceOf Object false jsonp跨域原理,优缺点,安全性因素 jsonp的实现...

网友评论

    本文标题: JSONP 的工作原理

    本文链接:https://www.haomeiwen.com/subject/lolqvxtx.html