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

阅读() @2018-07-15 14:13:31

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";
}
效果预览 源码下载
加入QQ群,在群文件中免费下载源码提取密码!
微信二维码