jsonp 实现原理

Jsonp原理： 
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

使用JSON的优点在于：

• 比XML轻了很多，没有那么多冗余的东西。
• JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。
• 在JavaScript中处理JSON很简单。
• 其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势：

• JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。
• 如果你使用eval()来解析的话，会容易出现安全问题。

尽管如此，JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

主要提示：

JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。

第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。

<?php  

//服务端返回JSON数据
$arr=array('a'=>,'b'=>,'c'=>,'d'=>,'e'=>);
$result=json_encode($arr);
//echo $_GET['callback'].'("Hello,World!")';
//echo $_GET['callback']."($result)";
//动态执行回调函数
$callback=$_GET['callback'];
echo $callback."($result)";  

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
    function jsonpCallback(result) {
        alert(result.a);
        alert(result.b);
        alert(result.c);
        for(var i in result) {
            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
        }
    }
</script>
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>  

 案例示范：

        window.onload = function() {
            var oBtn = document.getElementById('btn');
            var relative = document.getElementById('relative');
            oBtn.onkeyup = function() {
                //如果有输入内容的时候，就生成一个script标签获取数据
                if (this.value != '') {
                    var oScript = document.createElement('script');
                    oScript.src = 'http://suggestion.baidu.com/su?wd=' + this.value + '&cb=jsonCallback';
                    document.body.appendChild(oScript);
                } else {
                    relative.style.display = 'none';
                }
            }
        };

        function jsonCallback(result) {
            var relative = document.getElementById('relative');
            var html = '';
            //由上文知道，我们所需要的字段都在s里面存放着
            if (result.s.length) {
                relative.style.display = 'block';
                //这里可以限制一下所需要联想词的个数，太多了也没必要
                for (var i = ; i < result.s.length - ; i++) {
                    html += '<li><a target="_blank">' + result.s[i] + '</a></li>';
                }
                //渲染到页面里
                relative.innerHTML = html;
            } else {
                relative.style.display = 'none';
            }
        }