您的位置：首页 > Web前端

WEB前端开发笔记之ajax的跨域访问（搜索引擎篇）

2017-05-08 23:27 627 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQ/jquery-3.2.0.min.js"></script>
<style>
.main{
width: 700px;
margin: 200px auto;
}
.keywords{
width: 500px;;
font-size: 28px;
}
input[type=button]{
font-size: 20px;
}
.message {
border: 1px solid #ccc;
width: 500px;
margin-left: -100px;
border-top: none;

}
.message ul{
margin: 0;
padding: 0;
list-style: none;
}
.message ul li{
margin: 5px;
}
</style>

</head>
<body>
<div align="center" class="main">
<input type="text" class="keywords">
<input type="button" value="搜索一下">
<div class="message" align="left" style="display:none;" >
<ul>
<!--<li>中国好声音</li>
<li>中国好嫂子</li>
<li>中国好声音</li>
<li>中国好声音</li>
<li>中国好声音</li>
<li>中国好声音</li>
<li>中国好声音</li>
<li>中国好声音</li>
<li>中国好声音</li>
<li>中国好声音</li>-->
</ul>
</div>
</div>
<script >
//如果页面加载直接给li元素绑定事件，你是获取不到li元素的
//我们看恶意使用jq引入的事件委托

$(".message ul").on("mouseover","li",function () {
this.style.background="red";
});
$(".message ul").on("mouseout","li",function () {
this.style.background="white";
});

function getInfo(obj) {
console.log(obj);
var r = obj.s;
document.querySelector(".message>ul").innerHTML="";//清除上次ul下的li
for(var i = 0;i<r.length;i++){
var li = document.createElement("li");
li.innerHTML = r[i];
document.querySelector(".message>ul").appendChild(li);
}
}
document.querySelector(".keywords").onkeyup=function () {

var keywords = this.value;

//我要对这个关键字进行一个判断
if(keywords.length>0){
//我根据这个关键字去获取数据，获取到数据之后
//加载到列表
//显示这个区域message
document.querySelector(".message").style.display="block";

//把关键字给360的这个搜索接口，让它来给我结果

//使用script 标签去发送请求

var script = document.createElement("script");
script.src = "http://suggestion.baidu.com/su?cb=getInfo&wd="+this.value+"&sc=hao123&_=1427618279165";
document.body.appendChild(script);

}else{

//隐藏message
document.querySelector(".message").style.displ
4000
ay="none";
}
//因为我现在给服务器发送请求，跨域的请求
//现在采用的跨域方案是jsonp jsonp 只支持get方式的跨域，
//并不支持post
//如果我要给跨域的服务器传递非常多数据，get对请求的数据大小有限制，传不过去

//我们就要处理post方式的跨域

//使用一个叫做cors的方案 跨域资源共享，其实这个是需要在服务器端进行一个配置
//其实就服务器端给客户端一个响应头，就搞定
};

</script>
</body>
</html>


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航