二、JSNONP
JSONP的原理是什么呢?我们来看看大神贺师俊的解释:
很简单,就是利用<script>标签没有跨域限制的“漏洞”(历史遗迹啊)来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。 第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。
找一篇大神写的详细易懂的文章
以下是菜鸟教程的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<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>
<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
后端代码
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
JSONP总结:
JSONP是为了传数据而存在的技术。网页之间的通信原本有AJAX就够了,而AJAX因为浏览器“同源策略”面对跨域情况就束手无策了。JSONP就这样被发明了,利用<script>的src属性不受“同源策略”的控制,“作弊”般地巧妙地逃过了浏览器的这一限制。
JSONP方法本质是创建<script>标签,其src指向我们的数据地址。地址后面附带一个回调函数(名字一般是callback或者是别的什么,就看后台给我们的是什么了,函数名是我们起的)。然后,声明这个回调函数。这样,只要一引入上面的<script>标签,就相当于执行了那个回调函数。
虽然jQuery把JSONP内置在了AJAX里,但是我们一定要清楚,AJAX和JSONP是完全不一样的,一定不要混淆!