WEB前端开发笔记之ajax的跨域访问（搜索引擎篇）
来源：互联网 发布：淘宝潮男秋装 编辑：程序博客网 时间：2024/05/19 03:27
<!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.display="none"; } //因为我现在给服务器发送请求，跨域的请求 //现在采用的跨域方案是jsonp jsonp 只支持get方式的跨域， //并不支持post //如果我要给跨域的服务器传递非常多数据，get对请求的数据大小有限制，传不过去 //我们就要处理post方式的跨域 //使用一个叫做cors的方案 跨域资源共享，其实这个是需要在服务器端进行一个配置 //其实就服务器端给客户端一个响应头，就搞定 }; </script></body></html>
0 0
