跨域系列之（二）

二、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是完全不一样的，一定不要混淆！

跨域系列之（二）

推荐阅读更多精彩内容