指引网

当前位置: 主页 > 网页制作 > JavaScript >

js原生态ajax XMLHttpRequest仿百度智能搜索功能

来源:网络 作者:佚名 点击: 时间:2017-07-02 09:19
[摘要]  也许我现在这个时候还使用原生态的ajax来做一个简单仿百度智能搜索功能有些同学会说直接使用jquery autocomplate不就完了吗,这个多复杂直接使用插件不就简单了吗?但我就喜欢这样

html代码

 代码如下 复制代码

<style >
#apDiv1{ display:none; background:#FFF; border:1px solid #CCC; width:223px; padding:5px;}
</style>

<input type="text" maxlength="128" name="title" id="title" placeholder="输入经纪ID号" onkeyup="getreNews(this.value);" autocomplete="off" />

<ul id="apDiv1" style="position: absolute;left:0px;top:24px"></ul>  

js ajax代码如下

 代码如下 复制代码

function createXMLHttpRequest(){//创建XMLHttpRequest对象
if(window.ActiveXObject){//IE
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch(e){
return;
}
}else if(window.XMLHttpRequest){//Mozilla,firefox
try {
return new XMLHttpRequest();
} catch(e){
return;
}
}
}

function getreNews(Value){//主调函数
var xmlHttp=createXMLHttpRequest();
var url = "ajaxSend.php?title="+Value+"&mt="+Math.random(300000);
if (Value==""){
return false ;
}

if (xmlHttp){
callback = getReadyStateHandler(xmlHttp);
xmlHttp.onreadystatechange = callback;
xmlHttp.open("GET", url,true);
xmlHttp.send(null);
}
}

function getReadyStateHandler(xmlHttp){//服务器返回后处理函数
return function (){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
if (xmlHttp.responseText){
document.getElementById("apDiv1").style.display='block';
document.getElementById("apDiv1").innerHTML=xmlHttp.responseText;
}else{
document.getElementById("apDiv1").innerHTML="<li>对不起,未找到相对应楼盘!</li>";
}
}
}
}
}  

上面这代码是在百度搜索到了自己简单的进行修改了一下,因为自己以前用过所以觉得使用快也就没使用jquery ajax插件了。

 

------分隔线----------------------------