一、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的更多相关文章

  1. 初步了解关于js跨域问题-jsonp

    js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...

  2. 用jsonp实现搜索框功能

    用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...

  3. 范仁义web前端介绍课程---3、课程大纲(初步)

    范仁义web前端介绍课程---3.课程大纲(初步) 一.总结 一句话总结: 知识点脉络(知识架构):刚开始对这个稍微了解一下就可以了,在逐步的学习过程中,心里大概有这样一套知识点的脉络 二.范仁义前端 ...

  4. 移动端之Android开发的几种方式的初步体验

    目前越来越多的移动端混合开发方式,下面列举的大多数我都略微的尝试过,就初步的认识写个简单的心得: 开发方式 开发环境 是否需要AndroidSDK 支持跨平台 开发语言&技能 MUI Win+ ...

  5. 实例操作JSONP原理

    絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...

  6. angular2系列教程(九)Jsonp、URLSearchParams、中断选择数据流

    大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子

  7. 疯狂的JSONP

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

  8. CSharpGL(29)初步封装Texture和Framebuffer

    +BIT祝威+悄悄在此留下版了个权的信息说: CSharpGL(29)初步封装Texture和Framebuffer +BIT祝威+悄悄在此留下版了个权的信息说: Texture和Framebuffe ...

  9. 通过扩展让ASP.NET Web API支持JSONP

    同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...

随机推荐

  1. Python基础2- Hello,world

    第一个程序Hello,world! 交互式编程:在终端窗口中输入:python回车后直接进入python交互模式,然后在提示符>>>后面输入:print 'Hello,world!' ...

  2. webApi实践:开始WebApi 2

      1.学习步骤总结 学习网址:http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-you ...

  3. ora-00031:session marked for kill处理oracle中杀不掉的锁

    http://www.cnblogs.com/songdavid/articles/2223869.html 一些ORACLE中的进程被杀掉后,状态被置为"killed",但是锁定 ...

  4. Linux下使用vim的tips

    1.如果用户不能确定vi所处的状态,可以按Esc键两次返回初始状态. 2.Fedora 17下安装与配置ssh:http://blog.csdn.net/ashuai81/article/detail ...

  5. 最长上升子序列[LIS]

    算法原理很简单,不再赘述,这里贴一个函数模板,传入的参数为序列首尾元素的指针. template<typename T> int LIS_nlogn(T * s, T * e) { ; T ...

  6. ccc animation

    cc.Class({ extends: cc.Component, properties: { sheepAnim: { default: null, type: cc.Animation } }, ...

  7. 《隆重介绍 思源黑体:一款Pan-CJK 开源字体》

    关于思源黑体 思源黑体是谷歌与 Adobe 联合开发,支持简体中文.繁体中文.日文.韩文以及英文:支持 ExtraLight.Light.Normal.Regular.Medium.Bold 和 He ...

  8. Codeforces Round #250 (Div. 2) C、The Child and Toy

    注意此题,每一个部分都有一个能量值v[i],他移除第i部分所需的能量是v[f[1]]+v[f[2]]+...+v[f[k]],其中f[1],f[2],...,f[k]是与i直接相连(且还未被移除)的部 ...

  9. [LintCode] Letter Combinations of a Phone Number 电话号码的字母组合

    Given a digit string, return all possible letter combinations that the number could represent. A map ...

  10. Hadoop.2.x_伪分布环境搭建

    一. 基本环境搭建 1. 设置主机名.静态IP/DNS.主机映射.windows主机映射(方便ssh访问与IP修改)等 设置主机名: vi /etc/sysconfig/network # 重启系统生 ...