<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>bing search</title>
<style>
body{background: #333;}
#bg_div{
position: relative;
background-image: url("river.jpg");
width:1228px;height:690px;
margin:0 auto ;
}
#search_box{
position: absolute;
top:150px;
left: 200px;
}
#logo{
background-image: url("logo.png");
height:53px;width: 107px;
float: left;
margin: -4px 18px 0 0;
}
#search_form{
background-color: #fff;
float: left;
padding: 5px;
}
#search_input{
height:29px;
line-height: 29px;
width: 350px;
border: 0;
outline: none;
float: left;
}
#search_submit{
background-image: url(search-button.png);
width:29px;
height:29px;
border: 0;
}
#suggest{
display: none;
width:388px;
background-color:#fff;
position:absolute;
border-width:1px;
border-style:solid;
border-color: #999;
padding: 0;
margin: 0;
}
#suggest_result{
list-style: none;
padding: 0;
margin: 0;
}
#suggest_result li{
padding:3px;line-height:25px;font-size: 14px;color: #777;
cursor: pointer;
}
#suggest_result li:hover{
background-color:#e5e5e5;
}
</style>
</head>
<body>
<div id="bg_div">
<div id="search_box">
<div id="logo"></div>
<form id="search_form" action="https://cn.bing.com/search" target="_blank">
<input type="text" id="search_input" name="q">
<input type="submit" id="search_submit" value="">
</form>
</div>
</div>
<div id="suggest">
<ul id="suggest_result">
</ul>
</div>
<script>
var getDOM=function(id){
return document.getElementById(id);
}
var addEvent=function(id,event,fn){
var el=getDOM(id)||document;
if(el.addEventListener){
el.addEventListener(event,fn,false);
}else if(el.addEventListener){
el.attachEvent('on'+event, fn);
}
}
var ajaxGet=function(url,callback){
var _xhr=null;
if(window.XMLHttpRequest){
_xhr=new window.XMLHttpRequest();
}else if(window.ActiveXObject){
_xhr=new ActiveXObject("Msxml2.XMLHTTP");
}
_xhr.onreadystatechange=function(){
if(_xhr.readyState==4&&_xhr.status==200){
callback(JSON.parse(_xhr.responseTest));
}
}
_xhr.open('get',url,false);
_xhr.send(null);
}
var delegateEvent=function(target,event,fn){
addEvent(document,event,function(e){
if(e.target.nodeName==target.toUpperCase()){
fn.call(e.target);
}
});
}
addEvent('search_input','keyup',function(){
var searchText=getDOM('search_input').value;
ajaxGet('http://api.bing.com/qsonhs.aspx?q='+searchText,function(d){
var d=d.AS.Results[0].Suggests;
var html="";
for (var i = 0; i < d.length; i++) {
html += '<li>' + d[i].Txt + '</li>';
}
var _dom= getDOM('suggest');
getDOM('suggest_result').innerHTML=html;
_dom.style.top=getElementTop(getDOM('search_form'))+38+'px';
_dom.style.left=getElementLeft(getDOM('search_form'))+'px';
_dom.style.position='absolute';
_dom.style.display='block';
});});
delegateEvent('li','click',function(){
var keyword=this.innerHTML;
location.href='http://api.bing.com/qsonhs.aspx?q='+keyword;
});
</script>
</body>
</html>
3 回答
已采纳
慕男婶
TA贡献98条经验 获得超73个赞
在除了IE8，9以外的浏览器下，可以使用options跨域，即浏览器发现要请求的资源跟当前域不在同一个域，
会发送一个options请求询问服务器：我跟你不是一个域的，你是否让我请求这个资源？然后服务器在response headers 里设置3个
消息头来回答浏览器的询问。
这三个响应头分别是：
Access-Control-Allow-Headers:Content-Type
Access-Control-Allow-Methods:POST, GET, OPTIONS // 支持POST GET OPTIONS请求（也可以指定一个请求或多个请求方式）
Access-Control-Allow-Origin:* // 告诉浏览器，所有的外域都可以跨域向我请求资源（不使用通配符，
// 也可以显式地设置成一个域或多个域）
所以，不存在浏览器兼容性的做法是使用jsonp，但是使用jsonp也需要服务器端支持。
添加回答
举报
0/150
提交
取消