初步了解JSONP
一、JSON 与 JSONP
JSON是一种基于文本的数据交换方式(数据描述格式),JSONP是一种非官方跨域数据交互协议。
ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。
二、为什么要用JSONP
Ajax直接请求普通文件是跨域无权限访问的,但是Web页面上调用js文件时则不受是否跨域影响,于是服务端可以将数据装进JS文件传输回来。jQuery支持JSONP。
方式:用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
三、DEMO
JQUERY
$.ajax({
type: "get",
async: false,//true为异步请求(默认)。false为同步请求,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
url: "",
data:{},//发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
dataType: "jsonp",//预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断.使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
jsonpCallback:"",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据,(如果没设置,服务器可以用$_GET['callback']取到jquery默认生成的随机函数名)
success: function(data){//请求成功后的回调函数。
console.log(data);
},
error: function(msg){//请求失败时调用此函数。
console.log(msg);
}
});
PHP
function jsonp($json)
{
$callback = isset($_GET['callback']) ? $_GET['callback'] : $_POST['callback'];
if (!preg_match('|^[0-9a-zA-Z_]+$|',$callback))exit('callback invalid'); if (is_array($json))
{
$json = json_encode($json);
} echo $callback.'('.$json.');';
exit;
}
jsonp(array('ret'=>0));
初步了解JSONP的更多相关文章
- 初步了解关于js跨域问题-jsonp
js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...
- 用jsonp实现搜索框功能
用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...
- 范仁义web前端介绍课程---3、课程大纲(初步)
范仁义web前端介绍课程---3.课程大纲(初步) 一.总结 一句话总结: 知识点脉络(知识架构):刚开始对这个稍微了解一下就可以了,在逐步的学习过程中,心里大概有这样一套知识点的脉络 二.范仁义前端 ...
- 移动端之Android开发的几种方式的初步体验
目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...
- 实例操作JSONP原理
絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...
- angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流
大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子
- 疯狂的JSONP
何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...
- CSharpGL(29)初步封装Texture和Framebuffer
+BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(29)初步封装Texture和Framebuffer +BIT祝威+悄悄在此留下版了个权的信息说: Texture和Framebuffe ...
- 通过扩展让ASP.NET Web API支持JSONP
同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...
随机推荐
- WPF之依赖属性
Introduction When you begin to develop appliations with WPF, you will soon stumble across Dependency ...
- data.table包
data.table 1.生成一个data.table对象 生成一个data.table对象,记为DT. library(data.table) :],V3=round(rnorm(),),V4=:) ...
- poj2109
刚开始看着道题时,感觉不用高精度好像就没法做,想了半天然后果断去看依然博客(这样确实不好),发现又用到了double(这个可以放“+” “-” 300多位的家伙!!!) #include <io ...
- 斑点检测(LoG,DoG) [上]
斑点检测(LoG,DoG) [上] 维基百科,LoG,DoG,DoH 在计算机视觉中,斑点检测是指在数字图像中找出和周围区域特性不同的区域,这些特性包括光照或颜色等.一般图像中斑点区域的像素特性相似甚 ...
- POJ2104 & 主席还是可持久化还是 函数式
题意: 区间第K大. SOL: 非常有意思的树,尽管我搞不清楚名字. 原理参见clj的可持久化数据结构研究. wa了整整一天,然后重打,然后1a... code: /*================ ...
- 关于使用rem单位,calc()进行自适应布局
关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单位在 ...
- 据说最近IMO中国队失利的一题
(图基于Microsoft PaintBrush技术构建) 平面几何是可以难得出蛆的.这道题难在多圆.高度非对称和具有一定复杂性.如图,对ABC,H是垂心,O是垂足,M是中点.QK在ABC外接圆上,均 ...
- The Result of an Interesting and Useful Program on Floating Numbers
The program: class Program { static void Main() { const double infinity = double.PositiveInfinity; c ...
- 为OpenResty增加ngx_pagespeed模块进行优化
1.下载ngx_pagespeed模块 wget https://github.com/pagespeed/ngx_pagespeed/archive/v1.8.31.4-beta.zip unzip ...
- 爬虫_Crawler4j的使用
Crawler4j的使用 (以下内容全部为转载,供自己查阅用) 下载地址: http://code.google.com/p/crawler4j/ Crawler4j的使用 网上对于crawler4j ...