浅析JSONP
什么是JSONP?
JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。--来源百度
从它的定义中不难看出jsonp是一种以json格式作为填充的一种实现跨域的方法!
<span">那么这里说的填充指的又是什么?我们来看一段例子:
function callback(a){
alert(a.name);
}
<script src="http://.....com/..php?JSONP='21'"></script>
上面是一个最简单的一个带参数的函数,假设我们现在需要跨越获取一些数据,如获取当前用户的名字name,参数a就是我们需要从后台获取的数据,但是在上面我们并没有调用他!而是通过script标签向服务器发送请求,下面我们在来看看php文件怎么写:
if(!empty($_GET['JSONP'])){
$id = $_GET['JSONP'];
$query = mysql_query("select * from user where id=$id");
$res = mysql_fetch_array($query);
echo "callback({‘name’:$res['name'])";
}
上面就是php文件的内容了,首先获取请求的url参数,在这里我传的是用户id,然后根据id去数据库查询对应的数据,然后输出js文件定义的方法名,并把用户的名字当成参数放进去!
这里我们对于参数的补充,就是我们上面所说的填充,顾名思义,就是把我们要取的数据填充到参数里!
看了上面的例子就不难理解了,jsonp其实就是在前台定义一个函数,然后通过script标签发送请求(由于script标签发送的请求是可以不守跨域规则限制),然后后台处理并输出之前定义的函数名,并把数据以json的格式填充到参数中,这样在请求返回时就会调用我们之前定义的函数,并获得想要的数据!
这就实现了一个简单的jsonp!说的直白点就是在前台定义函数,然后后台输出函数名和参数完成函数的调用和数据的获得!当然,它最主要的作用在于解决js跨域的问题!
由于本人水平有限,只能简单的说一些实例,来和大家共同成长!感谢各位浏览!
本文由 平凡公子原创并首次发表欢迎转载(转载请注明作者和原文地址)!
浅析JSONP的更多相关文章
- 说说JSON和JSONP,浅析JSONP解决AJAX跨域问题
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...
- JSON和JSONP,浅析JSONP解决AJAX跨域问题
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...
- JSONP浅析
DEMO : JSONP示例 为什么使用JSONP JSONP和JSON是不一样的.JSON(JavaScript Object Notation)是一种基于文本的数据交换方式,或者叫做数据描述格式. ...
- json与jsonp区别浅析(json才是目的,jsonp只是手段)
一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...
- json与jsonp区别浅析(json才是目的,jsonp只是手段) (转)
一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...
- 浅析跨域的方法之一 JSONP
概念: 什么叫跨域? 同源策略:它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略. 所谓同源是指,域名,协议,端口相同. 同源的脚本才会被执行 ...
- 【转】json与jsonp区别浅析(json才是目的,jsonp只是手段)
一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...
- 浅析JSONP-解决Ajax跨域访问问题
浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...
- Vue 浅析与实践
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:曾柏羲 导语 入职接到的第一个需求是实现一个关于K歌实体售卖的ERP系统,管理系统过去做过不少,这次打算换个姿势,基于时下正热但早已不新 ...
随机推荐
- Python爬虫-豆瓣电影 Top 250
爬取的网页地址为:https://movie.douban.com/top250 打开网页后,可观察到:TOP250的电影被分成了10个页面来展示,每个页面有25个电影. 那么要爬取所有电影的信息,就 ...
- 企业"信息化建设"价值
企业信息化现状分析 随 着企业信息化建设的快速发展,信息技术与信息系统对企业组织形态.治理结构.管理体制.运作流程和商业模式的影响日益深化,企业组织对信息技术和信息 系统的依赖性在日益加强,IT正成为 ...
- Python 多线程相关知识学习
多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...
- workerman定时器使用 php定时任务
add int \Workerman\Lib\Timer::add(float $time_interval, callable $callback [,$args = array(), bool $ ...
- HTML5标签embed详解
摘要: <embed> 标签是 HTML 5 中的新标签,用来定义嵌入的内容,比如插件.类似于HTML 4.01 中的object和applet标签.我们要在网页中正常显示flash内容, ...
- springboot+elasticsearch配置实现
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 详解js中的apply与call的用法
前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.call 和 apply二者的作用完全一样,只是接受 ...
- OO模式-Singleton
讨论一: 既然仅仅有一个类?为什么非要用一个模式来定义?难道就不能用程序猿之间的约定又或者使用伟大的设计模式来完毕? 1)先来说说全局变量的优点,当定义一个全局变量时,不论什么一个函数或者一行代码都能 ...
- NetBpm XML解读(5)
原文: nPdl的翻译 在看NetBPM的nPdl文档时做了个翻译,一来是让自己能更好的理解nPdl,二来是希望能得到关心NetBPM的同志的指导. 由于对工作流不熟悉,所以有不少术语翻译没有把 ...
- NetBpm 测试篇(3)
http://www.netbpm.org/movie/holiday/holiday.html