首页 > 上网技巧 > 电脑小技巧 > 用Jsonp调用百度搜索数据的方法

用Jsonp调用百度搜索数据的方法

时间:2018-06-24 08:51 作者:QQ地带 我要评论

Ajax结合Json只能在同一个域名下实现前端和后台的数据交互,但是如果我的网站想调用其他网站的数据怎么办呢?使用jsonp能解决这个问题。
 
1、什么是jsonp呢?首先得知道什么是json?
 
Json是一种轻量级的数据交换格式。
 
Jsonp是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是Jsonp简单的实现形式)。
 
2、Jsonp有什么用?
 
由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。
 
3、如何使用jsonp?
 
下边这一DEMO实际上是Jsonp的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器(百度)跨域请求数据,然后服务端返回相应的数据并动态执行回调函数。(文章底部提供效果预览,你可以像使用百度一样使用这个功能去搜索!)
 
HTML部分:
 
<div id="logo">
    <a href="http://www.zymseo.com" target="_blank">
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度一下" width="270" height="129">
    </a>
</div>
<div id="box">
    <input type="text" id="txt"><input type="submit" id="btn" value="百度一下">
    <ul id="list"></ul>
</div>
 
CSS部分:
 
*{
margin:0px;
padding:0px
}
body{
font-size:14px;
color:#000;
font-family:"Microsoft Yahei"
}
li{
list-style:none
}
#box{
width:500px;
height:36px;
margin:0px auto
}
#txt{
width:350px;
height:32px;
outline:none
}
#btn{
width:100px;
height:36px;
background:#3385ff;
color:#fff;
border:1px solid #3385ff;
font-size:14px;
text-align:center;
outline:none
}
#list{
width:453px;
border:1px solid #ccc;
display:none
}
#list li{
line-height:36px
}
#list li a{
font-size:14px;
color:#000;
text-decoration:none;
display:block
}
#list li a:hover{
background:#ccc
}
#logo{
width:270px;
height:129px;
margin:50px auto 10px auto
}
 
Javascript部分:
 
var oTxt = document.getElementById("txt");
var oList = document.getElementById("list");
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
//键盘按键松开时发生:
oTxt.onkeyup = function(){
oList.style.display = "block";
var oValue = oTxt.value;
var oScript = document.createElement("script");
oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+oValue+"&cb=fly";
document.body.appendChild(oScript);
document.body.removeChild(oScript);
}
//oBox失去焦点时发生:
oBox.onblur = function(){
oList.style.display = "none";
}
//通过for循环遍历获得的数据
function fly(myJson){
var data = myJson.s;
var str = "";
for(var i=0; i<data.length; i++){
str += "<li><a href='https://www.baidu.com/s?wd="+data[i]+"' target='_blank'>"+data[i]+"</a></li>";
}
oList.innerHTML = str;
}
//点击开始搜索按钮
oBtn.onclick = function(){
var oValue = oTxt.value;
window.open("https://www.baidu.com/s?wd="+oValue);
}
//鼠标滑过开始搜索按钮时发生:
oBtn.onmouseover = function(){
this.style.cursor = "pointer";
}
 

 


标签: JSONP
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告