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 ...

随机推荐

Selenium窗口切换-----Selenium快速入门（六）
有时候,我们打开多个窗口,进行多窗口操作,那么窗口间该如何切换呢? 切换的方法有两个,一个是通过窗口标题来验证,另一个是通过窗口特定的内容来验证,这两个方法都要求得到的标题或内容是唯一的. 用到的相关 ...
WPF圆角按钮
<ControlTemplate x:Key="CornerButton" TargetType="{x:Type Button}"> <Bo ...
线上日志集中化可视化管理：ELK
本文来自网易云社区作者:王贝为什么推荐ELK: 当线上服务器出了问题,我们要做的最重要的事情是什么?当需要实时监控跟踪服务器的健康情况,我们又要拿什么去分析?大家一定会说,去看日志,去分析日志.是 ...
Robolectric 单元测试中使用 Ressource
单元测试类中: @RunWith(RobolectricGradleTestRunner.class) @Config(constants=BuildConfig.class, sdk = 21) 获 ...
在Ubuntu16.04里面安装Gogland！
一,安装把linux版本的Gogland拷贝到Ubuntu16.04里面,随后在想要存放它的地方解压缩,这样就完成了安装! 二,让Gogland可以快速启动 linux版本的Gogland的启动是用 ...
let、const和var的区别
1.let是块级作用域,函数内部使用let定义后,对函数外部无影响. <!DOCTYPE html> <html lang="en"> <head&g ...
leecode刷题（22）-- 反转数组
leecode刷题(22)-- 反转数组反转数组反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3-> ...
Java多线程原理及Thread类的使用
一.进程与线程的区别 1.进程是应用程序在内存总分配的空间.(正在运行中的程序) 2.线程是进程中负责程序执行的执行单元.执行路径. 3.一个进程中至少有一个线程在负责进程的运行. 4.一个进程中有多 ...
Elastic Search 5.x Nest Multiple Queries C#
I'm using C# with those nuget packeges; <package id="Elasticsearch.Net" version="5 ...
[Objective-C语言教程]继承（25）
面向对象编程中最重要的概念之一是继承.继承允许根据一个类定义另一个类,这样可以更容易地创建和维护一个应用程序. 这也提供了重用代码功能和快速实现时间的机会. 在创建类时,程序员可以指定新类应该继承现有 ...

JSONP数据调用