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. 虚拟化 - Hyper-V

    不能和VMware.VirtualBox同时使用 网络 交换机其实就是指网卡,只不过是虚拟的 内部交换机 外部交换机

  2. 【OCP-12c】2019年CUUG OCP 071考试题库（74题）

    74.View the exhibit and examine the structure of ORDERS and CUSTOMERS tables. ORDERS Name     Null?  ...

  3. “全栈2019”Java第一百零六章：匿名内部类与抽象类接口注意事项

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  4. 【文文殿下】【HAOI2008】硬币购物

    题目描述 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4.某人去商店买东西,去了tot次.每次带di枚ci硬币,买si的价值的东西.请问每次有多少种付款方法. 数据规模 di,s<=1 ...

  5. MySQL 跟中文相关

    convert ()

  6. Microsoft Windows XP Professional X64 Edition Corporate Keys

    FVMK4-6DD4B-26MB4-74JB2-R4XWM DHR8W-69GX3-YWPM9-P98K2-B2V4Y DDR6D-XMQ6V-78Y2B-B6TP4-YXMRY J4K6H-DTTF ...

  7. iOS关于代码风格问题

    cocoapods管理第三方库,详见cocoapods安装及使用 OC代码风格需要规范,所有第三方依赖需要用cocoapods管理.代码风格需要: 1. pod 'CodeFormatter', :g ...

  8. vue+ivew-admin开发项目，内存占用过大解决办法

    项目用的ivew+admin ivewUI,直接从github上拉下来用的,配置也没改,我们页面比较多,大该30个页面的样子,一启用,我们的电脑就卡了,然后,看一下,内存占用 1.5G+了,我们电脑4 ...

  9. 2016级算法期末上机-F.中等·AlvinZH's Fight with DDLs II

    1118 AlvinZH's Fight with DDLs II 思路 中等题,贪心. 理解题意,每次攻击中,可以使某个敌人生命值-1,自己生命值减去∑存活敌人总攻击力. 贪心思想,血量少攻击高的要 ...

  10. GeneXus学习笔记——创建一个知识库 哈哈哈哈！

    终于想到写什么东西了(绝对不是因为懒 好吧 信我)  那么进入正题 我们写项目的时候 遇到一些问题啥的 总会听到大佬说:“这有什么难的 说到底不就是简单的增删改查么"  然后我们就会露出 Σ ...