利用jsonp原理跨域模拟百度搜索

先写个简易的demo了解下jsonp的原理

接下来看看百度是如何实现搜索的

将链接打开获得以下内容：

这里和前面的原理是一样的，能获取json对象

sp0.baidu.com是百度的二级域名

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su是百度搜索的接口

这里我们只需要传递关键词，修改下cb换成自己的getvalue方法：

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=csdn&cb=getvalue

//实现智能提示
    $("input.wd").on("input",function(){
        //清空https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=为开头的script
        $("script[src^='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=']").detach();
        //跨域百度搜索
        $("<script src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+$(".wd").val()+"&cb=getvalue'>").appendTo("head");
    });

 

结果就出来了，开心(*^▽^*)

接下来就是将结果附在搜索栏下方

function getvalue(json){
        //先清空前面的搜索结果
        $(".search-result").html("");
        //再将当前的搜索结果附上去
        json.s.forEach(function(s){
            $(".search-result").append($("<li>"+s+"</li>"));
        });
    }

哈哈哈！完成！！☟☟☟

使用jsonp就更简单了

$(".wd").on("input",function () {
        var text = $(this).val();
        //借助script标签漏洞，实现跨域请求
        $.ajax({
            url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+text+"&cb=getvalue",
            dataType:"jsonp",
            type:"post",
            jsonp:"cb",
            success:function (data) {
                console.log(data);
            },
            error:function (err) {
            }
        });
    });