zoukankan      html  css  js  c++  java
  • 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'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
    $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 = 0; i < result.s.length - 5; i++) {
                        html += '<li><a target="_blank">' + result.s[i] + '</a></li>';
                    }
                    //渲染到页面里
                    relative.innerHTML = html;
                } else {
                    relative.style.display = 'none';
                }
            }

  • 相关阅读:
    js数组方法大全
    自定义函数实现10进制转化为16进制
    函数的递归
    自定义函数实现atoi功能
    自定义函数实现英文字母大小写的转化
    exit函数和return语句
    函数的返回值
    函数的形参与实参
    函数的定义与声明
    字符串的高级应用-char a[100] = "1+2=;3-2=;2*5=;8/4=;" 得到char a[100] ="1+2=3;3-2=1;2*5=10;8/4=2;"
  • 原文地址:https://www.cnblogs.com/zsongs/p/7131159.html
Copyright © 2011-2022 走看看