JSONP原理小记
大家都知道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原理小记的更多相关文章
- Ajax跨域：Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
- JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- jsonp原理，封装，应用（vue项目）
jsonp原理 JSON是一种轻量级的数据传输格式. JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 ...
- 面试汇总——知道什么是同源策略吗？那怎么解决跨域问题？知道 JSONP 原理吗？
本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...
- iOS分类底层实现原理小记
摘要:iOS分类底层是怎么实现的?本文将分如下四个模块进行探究分类的结构体编译时的分类分类的加载总结本文使用的runtime源码版本是objc4-680文中类与分类代码如下//类@interfaceP ...
- 简单透彻理解JSONP原理及使用
首先提一下JSON这个概念,JSON是一种轻量级的数据传输格式,被广泛应用于当前Web应用中.JSON格式数据的编码和解析基本在所有主流语言中都被实现,所以现在大部分前后端分离的架构都以JSON格式进 ...
- JSONP原理及jQuery中的使用
JSONP原理 JSON和JSONP JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息. JSONP(JSON ...
- 跨域JSONP原理及调用详细演示样例
上篇博客介绍了同源策略和跨域訪问概念,当中提到跨域经常使用的基本方式:JSONP和CORS. 那这篇博客就介绍JSONP方式. JSONP原理 在同源策略下,在某个server下的页面 ...
- Javascript的jsonp原理
Javascript的jsonp原理 首先JSON是一种基于文本的数据交换方式,或者叫做数据描述格式 当一个网页在请求JavaScript文件时则不受是否跨域的影响,凡是拥有”src”这个属性的标 ...
随机推荐
- JavaScript---DOM对象（DHTML）
1.什么是DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本 ...
- ethereum(以太坊)(八)--Address
pragma solidity ^0.4.0; contract Test{ address _owner; uint160 _c; constructor() public{ _owner = 0x ...
- 谷歌浏览器如何调试JS
平常在开发过程中,经常会接触到前端页面.那么对于js的调试那可是家常便饭,谷歌浏览器是常用来调试JS代码的工具,本文主要介绍如何利用谷歌浏览器来调试JS代码,协助我们进行开发工作,加快开发效率. 1. ...
- tcl之过程/函数-proc
- Laravel系列 Web
一.Homestead准备 上一篇文章已经对它的配置进行了说明,下面对Homestead.yaml进行说明 --- ip: "192.168.10.10" memory: 2048 ...
- python中的文件操作小结2
''' #-----------文件修改---------- f=open("test_1",'r',encoding="utf-8") f2=open(&qu ...
- #Python编程从入门到实践#第三章笔记
列表简介 1.什么是列表 列表:由一系列按也顶顺序排列的元素组成.元素之间可以没有任何关系. 列表:用方括号[]表示,并用逗号分隔其中元素.名称一般为复数 2.访问元素 (1)列表是有序集合 ...
- Oozie 实战之 Hive
1.编辑job.propertiers nameNode=hdfs://cen-ubuntu.cenzhongman.com:8020 jobTracker=localhost:8032 queueN ...
- Android开发——弹性滑动的两种实现方式
0. 前言 欢迎转载,转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52538723 我们在Android开发--View滑动的三 ...
- MySQL Group Replication数据安全性保障
本文来自数据库内核专栏 在之前的文章中,介绍了MGR对数据可靠性.可用性和一致性的实现方案.简单来说,MGR通过基于paxos协议的多副本来实现数据的可靠性,通过多副本上的majority机制来实现可 ...