jsonp解决跨域请求 百度搜索案例

前言

JSONP是JSON with padding(填充式JSON或参数式JSON)的简写，是应用JSON的一种新方法，常用于服务器与客户端跨源通信。

JSONP的基本思想是，网页通过添加一个<script>标签，向服务器请求数据（对于所有src、href 属性都不考虑跨域），这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

jsonp 的写法：

sendData("a=3&b=5");
function sendData(data){
    var script=document.createElement("script");
    script.src="http://127.0.0.1:4003/?"+data+"&fn=callbacks";
    document.body.appendChild(script);
}
//服务端返回调用callbacks方法
function callbacks(data){
    console.log(data);
}

对应的node后台代码如下，res.write ( ) 里返回的内容是 javascript 脚本。

var http=require("http");
var querystring=require("querystring");
var server=http.createServer(function(req,res){
    req.on("data",function(){

    })
    req.on("end",function(){
        var data=querystring.parse(req.url.split("?")[1]);
        var sum=Number(data.a)+Number(data.b);
        res.writeHead(200,{
            "content-type":"text/html;charset=utf-8",
        })
        res.write(data.fn+"("+sum+")");
        res.end();
    })
})
server.listen(4003,"127.0.0.1",function(){
    console.log("服务已开启");
})

JSONP基础

1. jsonp 的通信过程，可以解决跨域，因为它可以绕过服务端端口和ip地址请求；
2. jsonp是和json没有任何关系，jsonp 是一种通信方式，json是数据格式；
3. jsonp，通过DOM创建script标签，因为可能通信不是一次，每一次通信都需要将上次的script删除；
4. 使用 jsonp 时不要使用模块脚本，script 标签中不能写 type=module，否则会报错；
5. jsonp 实际上是创建 script 标签，然后设置 src 获取 js 的地址完成对于服务器的请求；
6. jsonp 通过 src 地址中GET传参的方式，传入需要发送给服务器的数据以及必须带一个回调函数的名字，作为服务端传回，调用该回调函数使用；
7. jsonp 传过去的回调函数名称，客户端中必须有该函数，服务器再发回该函数时可以传入参数在客户端执行；

JSONP案例：百度搜索

结构代码：

<style>
body,html,div,input,ul,li{padding:0px;margin:0px;}
.container{width:635px;position:relative;top:200px;margin:0px auto;}
.cont{width:636px;height:34px;border:1px solid #b6b6b6;user-select:none;}
.input{width:500px;height:22px;font:16px/18px arial;line-height:22px;margin:6px 0px 0px 7px;border:0px;outline:0px;}
.icon{display:inline-block;width:18px;height:16px;background-image:url(./img/camera_new_5606e8f.png);}
.icon:hover{background-position:0px -20px;}
.btn{width:100px;height:34px;color:#fff;font-size:15px;letter-spacing:1px;background:#3385ff;border:none;outline:medium;}
.list{list-style:none;width:535px;border:1px solid #b6b6b6;border-top:none;position:absolute;top:36px;display:none;}
.list li{padding:5px 10px;}
.list li:hover{background-color:#eee;}
.list a{text-decoration:none;color:#000;}
</style>
<div class="container">
    <div class="cont">
        <input class="input" type="text">
        <span class="icon"></span>
        <button class="btn">百度一下</button>
    </div>
    <ul class="list"></ul>
</div>

js代码：

var input,ids,ul,btn,script;
init();
function init(){
	//获取元素
    input=document.querySelector("input");
    ul=document.querySelector("ul");
    btn=document.querySelector("button");
    //监听事件
    input.addEventListener("focus",focusHandler);
    input.addEventListener("input",inputHandler);
    btn.addEventListener("click",btnClickHandler);
    document.addEventListener("click",clickHandler);
}

function focusHandler(e){
	//当input为聚集状态时，改变边框颜色
    this.parentElement.style.borderColor="#2d78f4";
}
function inputHandler(e){
	//节流模式
    if(ids) return;
    ids=setTimeout(()=>{
        clearTimeout(ids);
        ids=0;
        //请求数据
        sendData(this.value);
    },500)
}
function sendData(key){
	//每一次通信前，需要将上次的script删除
    if(script){
        script.remove();
        script=null;
    }
    script=document.createElement("script");
    //接口路径写入src中，最后的参数是一个回调函数的名字
    script.src=`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${key}&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback`;
    document.body.appendChild(script);
}
function callback(data){
	//请求成功，执行该回调函数
    if(!data) return;
    ul.style.display="block";
    ul.innerHTML=data.s.reduce((value,item)=>{
        value+=`<li><a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=${item}&rsv_t=d43fF1XPAMaQzc5CAnGBSyeSlyE%2FIBrX2IMCigJqPsf0iHkuVId1KZ4SE3g&rsv_enter=1&rsv_dl=ts_0&rsv_sug3=13&rsv_sug1=5&rsv_sug7=100&rsv_sug2=1&prefixsug=nihao&rsp=0&inputT=2416647&rsv_sug4=2945215" target="_blank">${item}</a></li>`;
        return value;
    },"")
}
function btnClickHandler(e){
	//按钮点击事件
    location.href=`https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=${input.value}&rsv_t=d43fF1XPAMaQzc5CAnGBSyeSlyE%2FIBrX2IMCigJqPsf0iHkuVId1KZ4SE3g&rsv_enter=1&rsv_dl=ts_0&rsv_sug3=13&rsv_sug1=5&rsv_sug7=100&rsv_sug2=1&prefixsug=nihao&rsp=0&inputT=2416647&rsv_sug4=2945215`;
}
function clickHandler(e){
	//隐藏ul列表，更改边框颜色
    if(e.target!==document.body&&e.target!==document.documentElement) return;
    input.parentElement.style.borderColor="#b8b8b8";
    ul.style.display="none";
}