js原生態ajax XMLHttpRequest仿百度智能搜尋功能

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外掛程式了。