json 是一种数据格式

jsonp 是一种数据调用的方式。

什么是JSONP

为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；

2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加script标签来调用服务器提供的js脚本。

3、所以说，其实ajax与jsonp的区别不在于是否跨域，ajax通过服务端代理一样可以实现跨域，jsonp本身也不排斥同域的数据的获取。

4、还有就是，jsonp是一种方式或者说非强制性协议，如同ajax一样，它也不一定非要用json格式来传递数据，如果你愿意，字符串都行，只不过这样不利于用jsonp提供公开服务。

W3C上的例子：

JSONP 教程

本章节我们将向大家介绍 JSONP 的知识。

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

JSONP应用

1. 服务端JSONP格式数据

如客户想访问 : http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction。

假设客户期望返回JSON数据：["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件jsonp.php代码为：

jsonp.php 文件代码

<?php

header('Content-type: application/json');

//获取回调函数名

$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);

//json数据

$json_data ='["customername1","customername2"]';

//输出jsonp格式的数据

echo $jsoncallback ."(". $json_data .")";

?>

2.客户端实现 callbackFunction 函数

<script type="text/javascript">

function callbackFunction(result, methodName)

{

var html ='<ul>';

for(var i =0; i < result.length; i++)

{

html +='<li>'+ result[i]+'</li>';

}

html +='</ul>';

document.getElementById('divCustomers').innerHTML = html;

}

</script>

页面展示

<div id="divCustomers"></div>

客户端页面完整代码

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8">

<title>JSONP 实例</title>

</head>

<body>

<divid="divCustomers"></div>

<scripttype="text/javascript">

function callbackFunction(result, methodName)

{

var html ='<ul>';

for(var i =0; i < result.length; i++)

{

html +='<li>'+ result[i]+'</li>';

}

html +='</ul>';

document.getElementById('divCustomers').innerHTML = html;

}

</script>

<scripttype="text/javascript"src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>

</body>

</html>

jQuery 使用 JSONP

以上代码可以使用 jQuery 代码实例：

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8">

<title>JSONP 实例</title>

<scriptsrc="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>

</head>

<body>

<divid="divCustomers"></div>

<script>

$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?",function(data){

var html ='<ul>';

for(var i =0; i < data.length; i++)

{

html +='<li>'+ data[i]+'</li>';

}

html +='</ul>';

$('#divCustomers').html(html);

});

</script>

</body>

</html>

JSONP数据调用的更多相关文章

JSONP跨域数据调用
引自:http://kb.cnblogs.com/page/139725/ Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如& ...
使用jQuery-AJAX–读取获得跨域JSONP数据的示例
在项目开发中,如果在同一个域名下就不存在跨域情况,使用$.getJSON()即可实现.但是需要跨域请求其他域名下面的Json数据就需要JSONP的方式去请求,跨域写法和getJSON有差异.如下: ...
sencha touch结合webservice读取jsonp数据详解
sencha touch读取jsonp数据主要依靠Ext.data.JsonP组件,在mvc的store文件中定义代码如下: Ext.define('eparkapp.store.ParksNearb ...
股票数据调用示例代码php
<!--?php // +---------------------------------------------------------------------- // | JuhePHP ...
ECMall的MySQL数据调用的简单方法
很多ecmall开发者会问,怎么使用Ecmall的mysql类库进行数据调用.从原理上来讲Ecmall的数据调用是以数据模块+模块类库的方式进行mysql数据调用的,所有数据模块都存储在include ...
VueJs开发笔记—IDE选择和WebStorm性能优化、框架特性和数据调用、路由选项以及使用
一.IDE的选择: VsCode和WebStorm都是不错的选择,两者运行调试都非常的方便都可以使用快捷键运行和停止,就打开项目的速度和对电脑配置的要求来说,vscode要比webstorm要出色很多 ...
VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用
一.IDE的选择: VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下. WebStorm缺点:性能方面VsCode远好于WebStorm: WebStorm ...
thinkphp3返回json或jsonp数据
1.返回json数据 public function demo1() { $data = 'ok'; $this->ajaxReturn($data); } public function de ...
pageadmin CMS网站制作教程:模板中的站点数据调用
pageadmin CMS网站建设教程:模板中的站点数据调用 1.获取当前站点Id,返回int数字 Html.CurrentSiteId() 2.获取当前站点url地址,返回string字符串 Htm ...

随机推荐

c#设计模式之观察者模式(Observer Pattern)
场景出发一个月高风黑的晚上,突然传来了尖锐的猫叫,宁静被彻底打破,狗开始吠了,大人醒了,婴儿哭了,小偷跑了这个过程,如果用面向对象语言来描述,简单莫过于下: public class Cat { ...
ASP Session的功能的缺陷（进程外的Session）
目前ASP的开发人员都正在使用Session这一强大的功能,但是在他们使用的过程中却发现了ASP Session有以下缺陷: 进程依赖性:ASP Session状态存于IIS的进程中,也就是ineti ...
windows phone 8.0 app 移植到windows10 app笔记
8.0 public class Convisibility : IValueConverter { public object Convert(object value, Type targetTy ...
ClamAV学习【1】——ClamAV流程
不知道是对还是错,一开始就上手学习ClamAV,享受被虐的过程吧. 发现ClamAV的官网也很少资料,搜商还有待加强,大概翻阅了example的源代码,明白了其查毒的大概方式(BM和AC算法匹配特征码 ...
java学习笔记—实现一个类MyInputStream（28）
1 实现一个类MyInputStream读取文件,且不能抛出异常 public class TestDemo { public static void main(String[] args) thro ...
【OCP题库-12c】最新CUUG OCP 071考试题库（69题）
69.(31-1)choose the best answer: Evaluate the following query: SELECT INTERVAL '300' MONTH, INTERVAL ...
手把手教渗透测试人员打造.NET可执行文件
在进行渗透测试的过程中,我们有时候会希望使用可执行文件来完成某些任务.最近,我们在测试过程中拿下了一个网站,从而获得了一次发动水坑攻击的机会. 原文地址:https://www.peew.pw/blo ...
mxonline实战11，课程详情页2，课程章节页
对应github地址:第11天一. 课程详情页2 1. 课程详情页第2块中的课程介绍中,修改course-detail.html中代码,搜索课程详情,找到如下代码
10分钟教你用Python打造微信天气预报机器人
01 前言最近武汉的天气越来越恶劣了.动不动就下雨,所以,拥有一款好的天气预报工具,对于我们大学生来说,还真是挺重要的了.好了,自己动手,丰衣足食,我们来用Python打造一个天气预报的微信机器人吧 ...
学习前端页面css定位
css元素框定位一.相对定位: 相对定位是一个非常容易掌握的概念.如果对一个元素进行相对定位,它将出现在它所在的位置上.然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动.pos ...

JSONP数据调用