大家都知道JSONP(JSON with padding参数式JSON)是跨域传输数据的方法，jq等很多类库都封装了JSONP的方法，但是他的原理是怎样的呢？下面举个我认为最浅显的栗子，大家看过了都会明白原理！

JSONP的原理，概括点说，就是动态插入<script>元素，当然<script>元素引用的js文件是服务器传过来的，他与<img>元素一样可以不受限制地从其他域加载资源。

栗子：

<!DOCTYPE html>
<html>

<head>

    <title></title>

    <script type="text/javascript">

    // 定义回调函数

    var alertMessage = function(data){

        alert(' 姓名: ' + data.name + '，性别: ' + data.sex + '，职位：'+ data.position);

    };　　

    // 提供jsonp服务的url地址（即动态<script>元素的src值）

    var url = "http://test.com/jsonp?number=9527&callback=alertMessage";

    // 创建script标签，设置其属性

    var script = document.createElement('script');

    script.src = url;

    // 把script标签加入head，此时调用开始

    document.getElementsByTagName('head')[0].appendChild(script);

    </script>

</head>

<body>

</body>

</html>

服务器传过来的js文件栗子：

alertMessage({

    'name':'James',

    'sex':'male',

    'position':'manager'

})

加载到服务器传过来的js文件后，解析，执行函数alertMessage！

弹出提示框：姓名：James，性别：male，职位：manager

看到这里，大家应该清楚了，JSONP的使用流程：

1、定义一个调用跨域数据的函数 function fn(date){...}；

2、获取数据时，动态插入<script>标签，其src属性为请求地址；

3、服务器返回js文件，其代码执行函数fn，并提供参数，即fn(response)，此处，response就是跨域调用的数据！

JSONP原理小记的更多相关文章

  1. Ajax跨域：Jsonp原理解析

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

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

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

  3. jsonp原理，封装，应用（vue项目）

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

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

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

  5. iOS分类底层实现原理小记

    摘要:iOS分类底层是怎么实现的?本文将分如下四个模块进行探究分类的结构体编译时的分类分类的加载总结本文使用的runtime源码版本是objc4-680文中类与分类代码如下//类@interfaceP ...

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

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

  7. JSONP原理及jQuery中的使用

    JSONP原理   JSON和JSONP   JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息.   JSONP(JSON ...

  8. 跨域JSONP原理及调用详细演示样例

      上篇博客介绍了同源策略和跨域訪问概念,当中提到跨域经常使用的基本方式:JSONP和CORS.   那这篇博客就介绍JSONP方式.   JSONP原理   在同源策略下,在某个server下的页面 ...

  9. Javascript的jsonp原理

    Javascript的jsonp原理   首先JSON是一种基于文本的数据交换方式,或者叫做数据描述格式 当一个网页在请求JavaScript文件时则不受是否跨域的影响,凡是拥有”src”这个属性的标 ...

随机推荐

  1. c语言可变参数函数

    c语言支持可变参数函数.这里的可变指,函数的参数个数可变. 其原理是,一般情况下,函数参数传递时,其压栈顺序是从右向左,栈在虚拟内存中的增长方向是从上往下.所以,对于一个函数调用 func(int a ...

  2. java线程安全总结 - 2 （转载）

    原文地址:http://www.jameswxx.com/java/%E7%BA%BF%E7%A8%8B%E5%AE%89%E5%85%A8%E6%80%BB%E7%BB%93%EF%BC%88%E4 ...

  3. Python 装饰器执行顺序迷思

    Table of Contents 1. 探究多个装饰器执行顺序 1.1. 疑问 1.2. 函数和函数调用的区别 1.3. 装饰器函数在被装饰函数定义好后立即执行 1.4. 疑问的解释 2. 参考资料 ...

  4. 关于update 表名 set 字段1 = 值1 and 字段2 = 值2的执行结果说明

    技术交流群: 233513714 如果执行了以下的语句,则brand等于‘OPPO’条件所对应的数据不会做改变,但是sequence_brand列除brand = 'OPPO'之外的所有数据都会变为0 ...

  5. 线性表(List)

    1.什么是线性表(List)? 零个或多个数据元素的有限序列. (1)元素之间是有序的. (2)线性表强调是有限的. 2.线性表有哪些操作? (1)线性表的创建和初始化,InitList (2)判空, ...

  6. (A)eclipse搭建springboot项目入门

    网上许多资料都是用idea的,但是我个人用eclipse习惯了,所以就在eclipse里面自己尝试着写了一个hello. 然而项目建好后却迟迟不能访问!!!网上搜了许多资料都不靠谱! 虽然最后能看到h ...

  7. Docker应用设计四大关键

    TechTarget中国原创] Docker已经垄断了容器技术.设计应用时注意考虑便携性能够帮助企业利用容器技术能提供的所有优势. 随着Docker应用和容器越来越流行,很多公司都开始将容器技术作为其 ...

  8. angular 模块化之directive

    通过使用directive使页面模块化.需要哪部分直接调用即可.原本这些操作需要后端配合,现在前端即可.将原本的html代码拆为不同的模块,然后通过directive衔接加载到主页面中.首先页面通过d ...

  9. druid sqlparser使用例子

    package com.alibaba.druid.bvt.sql.mysql; import java.util.List; import org.junit.Assert; import com. ...

  10. PYTHON -MYSQLDB安装遇到的问题和解决办法

    目前下载的mysqldb在window下没有exe安装包了,只有源码. 使用python setup.py install 命令安装, 报错如下: 异常信息如下: F:\devtools\MySQL- ...