一、简介
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
原理:
由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的< script> 元素是一个例外。利用 < script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。
用
JSONP 抓到的资料并不是 JSON,而是任意的JavaScript
,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
实现步骤:
- 首先是利用script标签的src属性来实现跨域。
- 通过将前端方法作为参数传递到服务器端,然后由服务器端注入参数之后再返回
- 实现服务器端向客户端通信。
- 由于使用script标签的src属性,因此只支持get方法
二、实例讲解
如客户想访问 :
http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction
假设客户期望返回JSON数据:[“customername1”,”customername2”]。
真正返回到客户端的数据显示为:
callbackFunction([“customername1”,”customername2”])。
1、JavaScript使用 JSONP
客户端页面完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
// 后端返回直接执行的方法,相当于执行这个方法,由于后端把返回的数据放在方法的参数里,所以这里能拿到result和methodName两个参数
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>
<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>
服务端jsonp.php文件 完整代码:
<?php
//header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//后端返回一个直接执行的方法给前端,由于前端是用script标签发起的请求,所以返回了这个方法后相当于立马执行,并且把要返回的数据放在方法的参数里。
echo $jsoncallback . "(" . $json_data . ")";
?>
执行结果:
2、jQuery 使用 JSONP
客户端页面完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="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.php文件 完整代码:
和上面js的一样
三、Ajax 和Jsonp的区别
1、Ajax工作原理
相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。
对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务器读取新数据时由Ajax引擎代为向服务器提交请求。AJAX最大优点就是不刷新整个页面的前提下与服务器通信维护数据。
2、Jsonp工作原理
动态创建一个script标签,利用script标签src属性访问没有限制,实现跨域。
web客户端通过与调用脚本一样的方式来调用跨域服务器上动态生成的js格式文件(后缀.json),服务器动态生成json文件 把客户端需要的数据装入进去。
允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住json数据 这样客户端就可以随意定制自己的函数来自动处理返回数据。
3、Ajax 和 Jsonp的区别
(1)ajax和jsonp的调用方式很像,目的一样,都是请求url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装;
(2)实质不同:
ajax的核心是通过xmlHttpRequest获取非本页内容
jsonp的核心是动态添加script标签调用服务器提供的js脚本(后缀.json)
(3)区别联系:
不在于是否跨域
ajax通过服务端代理一样跨域;
jsonp也不并不排斥同域的数据的获取
(4)jsonp是一种方式或者说非强制性的协议;
ajax也不一定非要用json格式来传递数据
(5)jsonp只支持get请求,ajax支持get和post请求