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. leetcode 有效的字母异位词

    给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的一个字母异位词. 示例 1: 输入: s = "anagram", t = "nagaram" ...

  2. NIO-直接内存

    写NIO程序经常使用ByteBuffer来读取或者写入数据,那么使用ByteBuffer.allocate(capability)还是使用ByteBuffer.allocteDirect(capabi ...

  3. 前端基础--css基本语法,选择器

    一.css概述 CSS(Cascading Style Sheet)层叠样式表,定义如何显示HTML元素,给HTML设置样式,让它更加美观.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式 ...

  4. ssh 使用密钥无法登入Linux系统

    今天测试密钥登入linux系统时 出现如下问题: root@compute01:~# ssh alicxxx@xxx.com -p -i alickicxxxxxxx.key @@@@@@@@@@@@ ...

  5. JavaScript多个音频audio标签，点击其中一个播放时，其他的停止播放

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 常用类（日期时间格式转换，date，枚举）

    1 常用类 1.1 日期时间类 计算机如何表示时间? 时间戳(timestamp):距离特定时间的时间间隔. 计算机时间戳是指距离历元(1970-01-01 00:00:00:000)的时间间隔(ms ...

  7. CASE语句用法学习

    A. 使用带有 CASE 简单表达式的 SELECT 语句 SELECT ProductNumber, Category = CASE ProductLine WHEN 'R' THEN 'Road' ...

  8. loadrunner代理录制

    loadrunner在使用过程中会受到浏览器版本的限制,有些web服务在低版本的浏览器上不能兼容,可通过代理录制的方式解决此问题. 注: (1)本文中的ip仅作示例,要按实际测试情况填写ip. (2) ...

  9. jzoj1792

    #include<bits/stdc++.h> using namespace std; long long a[100010],m,n; int main(){ scanf(" ...

  10. C语言中printf与i++，C++中的cout

    一,printf与i++ 1,C语言中的printf是自右向左输出,. 2,而i++与++i不同的 i++首先取得i的值,下一行时候i = i + 1: ++i,首先i = i + 1,再取得i的值. ...