JSONP 的工作原理

2024-05-13 14:10:38

7/80—
layout: JSONP 的工作原理
title: JSONP 的工作原理
date: 2017-11-15 21:06:47

tags:

JSONP 的工作原理

1. JSONP由来

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

2. JSONP有什么用

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

3. 如何使用JSONP

HTML代码
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 的工作原理相关推荐

jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
IT：前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...
了解ajax工作原理及手写ajax
1.ajax工作原理工作原理: 创建XMLHttpRequest对象,发送异步请求,提供网页加载后在后台与服务器进行通信的方法,可在不刷新页面的情况下获得新数据 2.手写ajax原生代码手写原生a ...
ajax简介跟优点讲解,简要总结ajax工作原理及优缺点
虽然在实际的项目中使用多种ajax请求,但就其工作原理,优缺点尚未深入总结, 参考:http://www.cnblogs.com/SanMaoSpace/archive/2013/06/15/3137 ...
2021年大数据ELK（十八）：Beats 简单介绍和FileBeat工作原理
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 Beats 简单介绍和FileBeat工作原理一.Beats 二.FileB ...
深入理解Nginx工作原理
1 反向代理 1.1 概念反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给intern ...
高频开关电源原理_程控开关电源的工作原理
本文介绍了开关电源的工作原理以及它的特点. 程控开关电源要要比线性电源复杂得多. 下图是典型的开关电源工作原理图. 首先对 220 V/50Hz 的 AC 输入,通过桥式整流器进行整流储能电容对整流 ...
Servlet生命周期与工作原理
Servlet生命周期分为三个阶段: 1,初始化阶段调用init()方法 2,响应客户请求阶段调用service()方法 3,终止阶段调用destroy()方法 Servlet初始化阶段: 在 ...
java的工作原理你知道吗_每天用Mybatis，但是Mybatis的工作原理你真的知道吗？
近来想写一个mybatis的分页插件,但是在写插件之前肯定要了解一下mybatis具体的工作原理吧,于是边参考别人的博客,边看源码就开干了. 核心部件:SqlSession Executor Stat ...
linux网络管理原理,Linux__网络管理（物理层数据链路层网络层工作原理）
千锋云计算逆战班11点后打卡今天学习后,进行复习下,物理层数据链路层网络层的工作原理物理层关心的两件事情:1.信号 2.介质先说信号:信号分为模拟信号和数字信号模拟信号: 模拟信号,不 ...

最新文章

热门文章