初步了解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的页面将会被拒 ...
随机推荐
- volicity 模板类,java操作配置文件
import java.io.StringWriter; import java.util.HashSet; import java.util.Iterator; import java.util.M ...
- HDU5863 cjj's string game(DP + 矩阵快速幂)
题目 Source http://acm.split.hdu.edu.cn/showproblem.php?pid=5863 Description cjj has k kinds of charac ...
- TODO软件工程--如何预算项目的工期
我的项目后台接口已经开发好,是前人留下的接口,现在只需要和前端联调,本以为后台的开发周期短,可以提早上线,可以因为旧接口不兼容新的要求 不得不重新写,造成了工期的延误. 如何计算一个工期被提上日程.
- Shell 编程基础之 Select 练习
一.语法 select 变量 in con1 con2 con3 # 自动列出 con1,con2,con3 的选择菜单 do #执行内容 break # select本身就是一个循环,break是当 ...
- DependencyProperties or INotifyPropertyChanged ?
When you want to make an object binding-aware you have two choices : implements INotifyPropertyChang ...
- uva 107 - The Cat in the Hat
The Cat in the Hat Background (An homage to Theodore Seuss Geisel) The Cat in the Hat is a nasty c ...
- Kalman滤波器原理和实现
Kalman滤波器原理和实现 kalman filter Kalman滤波器的直观理解[1] 假设我们要测量一个房间下一刻钟的温度.据经验判断,房间内的温度不可能短时大幅度变化,也就是说可以依经验认为 ...
- 【BZOJ】1109: [POI2007]堆积木Klo
题意 \(n(1 \le n \le 100000)\)个数放在一排,可以一走一些数(后面的数向前移),要求最大化\(a_i=i\)的数目. 分析 分析容易得到一个dp方程. 题解 \(d(i)\)表 ...
- 【HDU】4336 Card Collector
http://acm.hdu.edu.cn/showproblem.php?pid=4336 题意:n张卡片,每一次取一个盒子,盒子里装有卡片i的概率是p[i],求得到所有卡片所需要开的盒子的期望数( ...
- PHP 7 测试用例(转)
性能改善:PHP 7高达两倍快的PHP 5.6 显著减少内存使用 抽象语法树 一致的64位支持 改进的异常层次结构 许多转化为异常致命错误 安全随机数发生器 删除旧的和不支持的SAPIs和扩展 空合并 ...