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数据调用的更多相关文章

  1. JSONP跨域数据调用

    引自:http://kb.cnblogs.com/page/139725/ Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如& ...

  2. 使用jQuery-AJAX–读取获得跨域JSONP数据的示例

    在项目开发中,如果在同一个域名下就不存在跨域情况,使用$.getJSON()即可实现.但是需要跨域请求其他域名下面的Json数据就需要JSONP的方式去请求,跨域写法和getJSON有差异.如下:   ...

  3. sencha touch结合webservice读取jsonp数据详解

    sencha touch读取jsonp数据主要依靠Ext.data.JsonP组件,在mvc的store文件中定义代码如下: Ext.define('eparkapp.store.ParksNearb ...

  4. 股票数据调用示例代码php

    <!--?php // +---------------------------------------------------------------------- // | JuhePHP ...

  5. ECMall的MySQL数据调用的简单方法

    很多ecmall开发者会问,怎么使用Ecmall的mysql类库进行数据调用.从原理上来讲Ecmall的数据调用是以数据模块+模块类库的方式进行mysql数据调用的,所有数据模块都存储在include ...

  6. VueJs开发笔记—IDE选择和WebStorm性能优化、框架特性和数据调用、路由选项以及使用

    一.IDE的选择: VsCode和WebStorm都是不错的选择,两者运行调试都非常的方便都可以使用快捷键运行和停止,就打开项目的速度和对电脑配置的要求来说,vscode要比webstorm要出色很多 ...

  7. VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用

    一.IDE的选择: VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下. WebStorm缺点:性能方面VsCode远好于WebStorm: WebStorm ...

  8. thinkphp3返回json或jsonp数据

    1.返回json数据 public function demo1() { $data = 'ok'; $this->ajaxReturn($data); } public function de ...

  9. pageadmin CMS网站制作教程:模板中的站点数据调用

    pageadmin CMS网站建设教程:模板中的站点数据调用 1.获取当前站点Id,返回int数字 Html.CurrentSiteId() 2.获取当前站点url地址,返回string字符串 Htm ...

随机推荐

  1. C# 中多态和重载的区别

    一.多态性意味着有多重形式. 在面向对象编程范式中,多态性往往表现为"一个接口,多个功能". using System; using System.Collections.Gene ...

  2. @Configurable

    spring的一个注解,用来自动注入bean的注解,不需要通过BeanFactory去获取    

  3. Java按位取反运算符“~”的工作原理

    说明:本文参考了文章<Java按位取反运算符“~”>,链接:https://blog.csdn.net/smilecall/article/details/4245447 补充:位运算符( ...

  4. 【vim】搜索与替换

    1. 搜索 命令 功能 备注 * 向下搜索光标所在处的词 n下一个,N上一个 # 向上搜索光标所在处的词 同上 [+<Ctrl>+i 跳转到光标所在处的变量的声明 使用tag [+< ...

  5. [原创]PHP使用Redis实现Session共享

    目录 前言 设计方案 1. 通过php自身session配置实现 2. 设置用户自定义会话存储函数 前言 小型web服务, session数据基本是保存在本地(更多是本地磁盘文件), 但是当部署多台服 ...

  6. Spring+SpringMVC+Mybatis整合redis

    SSM整合redis redis是一种非关系型数据库,与mongoDB不同的是redis是内存数据库,所以访问速度很快.常用作缓存和发布-订阅式的消息队列. 这里用的是ssm框架+maven构建的项目 ...

  7. Linux终端没有GUI，使用matplotlib绘图

    一.解决警告信息 ... _tkinter.TclError: no display name and no $DISPLAY environment variable 两种解决方法: 1.pytho ...

  8. [转] Scala Async 库 (Scala future, await, async)

    [From] https://colobu.com/2016/02/15/Scala-Async/ 在我以前的文章中,我介绍了Scala Future and Promise.Future代表一个异步 ...

  9. Q312 戳气球

    有 n 个气球,编号为0 到 n-1,每个气球上都标有一个数字,这些数字存在数组 nums 中. 现在要求你戳破所有的气球.每当你戳破一个气球 i 时,你可以获得 nums[left] * nums[ ...

  10. preg_match 与 preg_match_all

    案例一: <?php $str = 'abcdef123456'; preg_match('/[a-z1-9]+/', $str, $res); var_dump($res); preg_mat ...