一、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. [转]OpenVPN 安装与配置

    一.服务器端安装及配置 服务器环境:干净的CentOS6.3 64位系统 内网IP:10.143.80.116 外网IP:203.195.xxx.xxx OpenVPN版本:OpenVPN 2.3.2 ...

  2. gulp + webpack 构建多页面前端项目

    修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例 ...

  3. 20145308刘昊阳 《Java程序设计》第6周学习总结

    20145308刘昊阳 <Java程序设计>第6周学习总结 教材学习内容总结 第10章 输入/输出 10.1 InputStream与OutputStream 10.1.1 串流设计概念 ...

  4. HDU - 人见人爱A^B

    Description 求A^B的最后三位数表示的整数. 说明:A^B的含义是“A的B次方”  Input 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B< ...

  5. box-sizing的相关属性

    box-sizing有三个属性,分别是:content-box,border-box,inherit (1)content-box:在宽度和高度之外绘制元素的内边距和边框(默认属性) (2)borde ...

  6. linq中join的用法

    join方法 public static IEnumerable<TResult> Join<TOuter, TInner, TKey, TResult>( this IEnu ...

  7. Maven的第一个小程序

    这里是介绍关于maven的第一个小程序 关于maven的安装 : Install Maven in your computer 先看看目录结构: 这是本来的项目目录结构,由于maven有自己的目录结构 ...

  8. MongoDB的数据库基本操作(一)

    查看当前数据库 MongoDB shell version:1.8.1connecting to:test> dbtest 查看全部数据库列表 >show dbsChatRoom    0 ...

  9. js判断移动端系统

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  10. sublime 3 注册码 - 亲测可用

    v3114. v3103可用 —– BEGIN LICENSE —– Ryan Clark Single User License EA7E-812479 2158A7DE B690A7A3 8EC0 ...