JSONP实例应用-百度搜索下拉提示和豆瓣书籍搜索

最新推荐文章于 2021-04-13 15:10:18 发布

della_uii

最新推荐文章于 2021-04-13 15:10:18 发布

阅读量675

点赞数

分类专栏： ajax 文章标签： jsonp

本文链接：https://blog.csdn.net/Della_UI/article/details/53582634

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Jsonp原理：
首先在客户端注册一个callback，然后把callback的名字传给服务器。此时，服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function，function 名字就是传递上来的callback的名字。最后将事先生成的 json 数据直接以参数的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。客户端浏览器解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里。

百度下拉提示：
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--兼容性视图,防止IE浏览器进入怪异文档模式-->
        <title></title>
        <style type="text/css">
            *{ margin: 0; padding: 0;}
            body{background-image: url(images/HuangShanS_ZH-CN13503227356_1920x1080.jpg); background-size: auto;}
            form{ background-color: #FFFFFF; margin: 200px 0 0 300px; width: 544px; height: 43px; border: 1px solid #e5e5e5;}
            #search_text{ width: 500px; height: 43px; text-indent: 10px; border: 0; overflow: hidden; outline: none; font-size: 16px;}
            #search_button{ border: 0; width: 45px; height: 45px; background-color: #0c8484; float: right; margin: -1px -1px 0 0; font-size: 16px; color: #fff; cursor: pointer;}
            #reach_suggest{ width: 544px; background: #fff; border: 1px solid #e5e5e5; border-top: none; margin-left: 300px; display: none;}
            #reach_suggest li a{ display: block; text-decoration: none; color: #666; padding: 8px;}
            #reach_suggest li a:hover{ background-color: #f5f5f5; text-decoration: underline;}
        </style>
        <script>
            function fn1(data) {
                var oUl = document.getElementById('reach_suggest');
                var html = '';
                if (data.s.length) {
                    oUl.style.display = 'block';
                    for (var i=0; i<data.s.length; i++) {
                        html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
                    }
                    oUl.innerHTML = html;
                } else {
                    oUl.style.display = 'none';
                }
            }

            window.onload = function() {
                var oQ = document.getElementById('search_text');
                var oUl = document.getElementById('reach_suggest');

                oQ.onkeyup = function() {

                    if ( this.value != '' ) {
                        var oScript = document.createElement('script');
                        oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=fn1';
                        document.body.appendChild(oScript);
                    } else {
                        oUl.style.display = 'none';
                    }

                    return false;

                }

                document.onclick=function(){
                    oUl.style.display = 'none';
                }

            }
        </script>
    </head>
    <body>
        <form>
            <input type="text" id="search_text" />
            <input type="submit" id="search_button" />
        </form>
        <ul id="reach_suggest"></ul>
    </body>
</html>

豆瓣书籍搜索：
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{ margin: 0; padding: 0;}
            body{ padding: 30px;}
            #msg{ margin: 20px 0;}
            dl{ border-bottom: 1px dotted #999; padding: 10px;}
            dt{ font-weight: bold; line-height: 30px;}
        </style>
        <script type="text/javascript">
            function fn2(data){
                var oMsg=document.getElementById("msg");
                var oList=document.getElementById("list");

                if (data) {
                    oMsg.innerHTML=data.title.$t + ' : ' + data['opensearch:totalResults'].$t;

                    var aEntry=data.entry;
                    var iLen=aEntry.length;
                    var html='';

                    for (var i=0; i<iLen; i++) {
                        html+='<dl><dt>' + aEntry[i].title.$t + '</dt><dd><img src="' + aEntry[i].link[2]['@href'] + '" /></dd></dl>';
                    }
                    oList.innerHTML=html;
                }

            }

            window.onload=function(){
                var oQ=document.getElementById("q");
                var oBtn=document.getElementById("btn");
                var oMsg=document.getElementById("msg");
                var oList=document.getElementById("list");

                oBtn.onclick=function(){
                    if (oQ.value!='') {
                        var oScript=document.createElement('script');
                        oScript.src='http://api.douban.com/book/subjects?q='+ oQ.value +'&alt=xd&callback=fn2';
                        document.body.appendChild(oScript);
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="q" /><input type="button" value="搜索" id="btn" />
        <p id="msg"></p>
        <hr />
        <div id="list"></div>
    </body>
</html>