浏览器因为安全问题而有一个同源策略,不允许跨域请求数据。但是 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 原理简述的更多相关文章

  1. Ajax跨域:Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

  2. JQuery实现Ajax跨域访问--Jsonp原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  3. TCP/IP协议工作原理简述

    TCP/IP协议工作原理简述 // */ // ]]>   TCP/IP协议工作原理简述 Table of Contents 1 概要 2 应用层 3 传输层 4 网络层 5 链路层 1 概要 ...

  4. ButterKnife的原理简述

    ButterKnife的原理简述 注解处理器Java5 中叫APT(Annotation Processing Tool),在Java6开始,规范化为 Pluggable Annotation Pro ...

  5. Excel阅读模式/聚光灯开发技术序列作品之三 高级自定义任务窗格开发原理简述—— 隐鹤

    Excel阅读模式/聚光灯开发技术序列作品之三 高级自定义任务窗格开发原理简述——    隐鹤 1. 引言 Excel任务窗格是一个可以用来存放各种常用命令的侧边窗口(准确的说是一个可以停靠在类名为x ...

  6. Excel阅读模式/聚光灯开发技术之二 超级逐步录入提示功能开发原理简述—— 隐鹤 / HelloWorld

    Excel阅读模式/聚光灯开发技术之二 超级逐步录入提示功能开发原理简述———— 隐鹤  /  HelloWorld 1. 引言 自本人第一篇博文“Excel阅读模式/单元格行列指示/聚光灯开发技术要 ...

  7. jsonp原理,封装,应用(vue项目)

    jsonp原理 JSON是一种轻量级的数据传输格式. JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 ...

  8. 面试汇总——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?

    本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...

  9. 简单透彻理解JSONP原理及使用

    首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中.JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进 ...

随机推荐

  1. Codechef:Path Triples On Tree

    Path Triples On Tree 题意是求树上都不相交或者都相交的路径三元组数量. 发现blog里没什么树形dp题,也没有cc题,所以来丢一道cc上的树形dp题. 比较暴力,比较恶心 #inc ...

  2. BZOJ 1597: [Usaco2008 Mar]土地购买【斜率优化+凸包维护】

    1597: [Usaco2008 Mar]土地购买 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4989  Solved: 1847[Submit] ...

  3. Codeforces Round #280 (Div. 2)_C. Vanya and Exams

    C. Vanya and Exams time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  4. 【老司机经验】CC2530&STM8S105二合一嵌入式学习板设计思路与经验分享

    CC2530&STM8S105二合一嵌入式学习板设计思路与经验分享 1.缘起    这些年来一直在其他公司的实验箱和别人的开发板上进行教学与开发工作,总是觉得功能设计不那么合意.心里突然冒出个 ...

  5. [国嵌笔记][028][Bootloader设计蓝图]

    Bootloader的作用就是启动Linux内核 U-Boot简介 1.U-Boot是用于多种嵌入式CPU(ARM.x86.MIPS等)的bootloader程序,U-Boot不仅支持嵌入式Linux ...

  6. Dev中GridControl的GridView 基本样式设置

    基本样式图: 代码如下: /// <summary> /// gridView样式 /// </summary> /// <param name="gdv&qu ...

  7. UVA 673 Parentheses Balance (栈)

    题意描述: 给出一段只包含()和[]的字符串,判断是否合法,合法输出YES,不合法输出NO 规则: 1.该串为空,则合法 2.若A合法,B合法,则AB合法 3.若A合法,则(A)和[A]均合法 解题思 ...

  8. .26-浅析webpack源码之事件流make(1)

    compilation事件流中,依然只是针对细节步骤做事件流注入,代码流程如图: // apply => this-compilation // apply => compilation ...

  9. pylint python2.7 安装记录

    环境:python 2.7.11 ; 源码安装:configparser 3.5.0; 如果出现以下error,请用源码更新configparser至3.5.0版本 具体error没有抓下来,主要是报 ...

  10. mysql中使用show table status 查看表信息

    本文导读:在使用mysql数据库时,经常需要对mysql进行维护,查询每个库.每个表的具体使用情况,Mysql数据库可以通过执行SHOW TABLE STATUS命令来获取每个数据表的信息. 一.使用 ...