Jsonp 原理简述
浏览器因为安全问题而有一个同源策略,不允许跨域请求数据。但是 js 脚本资源和图片资源还是被允许跨域请求的。在 web 开发中,遇到要跨域请求 json 数据时,可以用 jsonp 的方式来绕过浏览器的同源策略。
现在,已经有很多工具将 jsonp 封装,如 jquery ,vue 等等。
那么封装起来的 ajxa 做了什么呢,个人认为主要有以下:
0、创建一个回调函数。有以下代码类似功能。
function callback (str){
return JSON.parse(str);
}
1、动态创建一个 script 标签,其中 src 中 query 部分告诉服务器自己要请求的数据以及回调函数的名字。
2、脚本返回后立即执行回调函数,该函数所携带的参数就是我们请求的数据。
// 后台返回的内容
callback({code:0});
3、删除创建的 script 标签。
4、删除创建的回调函数。
Jsonp 原理简述的更多相关文章
- Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
- JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- TCP/IP协议工作原理简述
TCP/IP协议工作原理简述 // */ // ]]> TCP/IP协议工作原理简述 Table of Contents 1 概要 2 应用层 3 传输层 4 网络层 5 链路层 1 概要 ...
- ButterKnife的原理简述
ButterKnife的原理简述 注解处理器Java5 中叫APT(Annotation Processing Tool),在Java6开始,规范化为 Pluggable Annotation Pro ...
- Excel阅读模式/聚光灯开发技术序列作品之三 高级自定义任务窗格开发原理简述—— 隐鹤
Excel阅读模式/聚光灯开发技术序列作品之三 高级自定义任务窗格开发原理简述—— 隐鹤 1. 引言 Excel任务窗格是一个可以用来存放各种常用命令的侧边窗口(准确的说是一个可以停靠在类名为x ...
- Excel阅读模式/聚光灯开发技术之二 超级逐步录入提示功能开发原理简述—— 隐鹤 / HelloWorld
Excel阅读模式/聚光灯开发技术之二 超级逐步录入提示功能开发原理简述———— 隐鹤 / HelloWorld 1. 引言 自本人第一篇博文“Excel阅读模式/单元格行列指示/聚光灯开发技术要 ...
- jsonp原理,封装,应用(vue项目)
jsonp原理 JSON是一种轻量级的数据传输格式. JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 ...
- 面试汇总——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?
本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...
- 简单透彻理解JSONP原理及使用
首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中.JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进 ...
随机推荐
- js面向对象学习笔记(五):tab切换
重点是this指向问题 <style> .hide{display: none;} #box div,#box1 div{display: none;} .hover{background ...
- js面向对象学习笔记(四):对象的混合写法
//对象的混合写法//1.构造函数function 构造函数() { this.属性}构造函数.原型.方法 = function () {};//调用var 对象1 = new 构造函数();对象1. ...
- 51 nod 1628 非波那契树
原题链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1628 花了一个早上+半个下午终于把这题切掉了…… (膜出题人) ...
- [bzoj3124] [Sdoi2013]直径
看了child学长的题解才知道怎么写TAT http://www.cnblogs.com/ctlchild/p/5160272.html 以前不知道直径都是过重心的..代码改着改着就和标程完全一样了Q ...
- BZOJ 3106: [cqoi2013]棋盘游戏(对抗搜索)
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3106 对抗搜索,f[x][y][a][b][c][d]表示当前谁走,走了几步,及位置. (因为 ...
- codeforce 375_2_b_c
codeforce 375_2 标签: 水题 好久没有打代码,竟然一场比赛两次卡在边界条件上....跪 b.题意很简单...纯模拟就可以了,开始忘记了当字符串结束的时候也要更新两个值,所以就错了 #i ...
- 微信小程序模板消息详解
先放代码 wxml: <form name='pushMsgFm' report-submit bindsubmit='orderSign'> <view> 单号: 0< ...
- 好的Qt学习资料
1.青春不老,奋斗不止!---CSDN博客地址http://blog.csdn.net/liang19890820:
- Python自建logging模块
本章将介绍Python内建模块:日志模块,更多内容请从参考:Python学习指南 简单使用 最开始,我们用最短的代码体验一下logging的基本功能. import logging logger = ...
- 遇到安装app不识别的情况
一般->blokfile->证书设定设置