jsonp實現仿百度搜索（跨域訪問）
阿新 • • 發佈：2018-11-12
jsonp實現仿百度搜索
一、jsonp跨域訪問原理
利用script標籤的src屬性的漏洞實現跨域訪問，去訪問不同的伺服器
二、仿百度搜索頁面實現
<!DOCTYPE html> <html> <head> <title>jsonp</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0px; padding:0px; } li{ list-style: none; } #wrap{ width: 600px; height: 40px; margin:100px auto; } #text{ width: 500px; height: 34px; margin: 0 auto; line-height: 34px; } #list{ width: 500px; border: 1px solid #ccc; } #list>li{ width: 500px; height: 30px; line-height: 30px; } #list>li>a{ text-decoration: none; } </style> </head> <body> <div id="wrap"> <input type="text" id="text" placeholder="請輸入搜尋關鍵字"> <ul id="list"></ul> </div> <script type="text/javascript"> //wd 查詢關鍵字 //cd 返回函式 回撥函式 let oInput=document.getElementById("text"), oList=document.getElementById("list"); oInput.oninput=function(){ var _val=this.value;//獲取當前input框裡的內容 if(_val){ let oS=document.createElement("script"); //創造script標籤 oS.src=`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${_val}&cb=getDate`; document.body.appendChild(oS); oS.onload=function(){ //在script標籤載入完後刪除標籤 document.body.removeChild(oS); } } }; function getDate(data){ //data是後臺傳送過來的函式呼叫裡的引數 console.log(data); let arr=data.s, //獲取聯想詞 str='', len=arr.length; for(let i=0;i<len;i++){ str+=`<li><a href="">${arr[i]}</a></li>` } oList.innerHTML=str; } </script> </body> </html>