//
原創作品
本站原創:www.111cn.cn
作者:面條愛兔子 QQ:271728967
注明:轉載請說明原出去 http://www.111cn.cn
//
現在長沙下著大雪啊,晚上回家也沒什麼事作,白天在公司寫一個BBS完成了一部份,突然昨天聽一個網友說如果能實現google效果就好了,今天無聊之下就想了想,覺得這個用ajax做應該不是什麼難道了,就試著寫了,說句實話我學ajax時間很短,也只懂皮毛了,各位看了後別丟石頭了,把錢包丟過來吧,過年沒錢用,;)呵呵.好了廢話就不多說了下面進行正題.
首先我總體的簡介一下,我只用了兩個文件了,因為是測試所以就不分那麼清楚了,把js文件和html寫在一個文件test.html裡面了,還有一個就是php文件post.php了,這個文件用來處理ajax發送過來的數進行處理,再由ajax把數據返回給test.html裡面的div, 原理不這麼簡單了,下面我們來看代碼.
第一步創建數據表:test
CREATE TABLE `test` (
`id` int(4) NOT NULL auto_increment,
`title` varchar(50) default NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=gb2312 AUTO_INCREMENT=5 ;
好了數據庫創建成功了我們就來建立test.html文件,這個文件很簡單,就是一個表單和一個div和CSS
<style>
<!--
body{font-size:12px;}
#show{border:1px solid #9abcde; line-height:23px; width:200px; margin:0px;}
#show li{list-style:none;}
#sug{margin:0px auto;}
-->
</style>
上面為CSS了就是用來控制效果的,
<table width="400" border="0" align="center" cellpadding="0" cellspacing="0">
<form name="form1" method="post" action=""><tr>
<td>
<input name="key" type="text" id="key" onFocus="other();" onKeyDown="sugguest();" onBlur="losefouse();" size="27" autocomplete=off >
<input type="submit" name="Submit" value="111cn搜索">
</td>
</tr></form>
<tr>
<td><div id="sug" onClick="javascript:func();"></div></td>
</tr>
</table>
這上面為內容了,關於函數我們下面來具體的說明.
第二步:就是js和xmlhttp的處理和調用了.
創建xmlhttp,這個函數我上次講ajax+php模仿window文件管理器時講過了,在用戶注冊也講過了,這裡不不說了,具體地址請到:
var xmlHttp = false;
function ajaxcreate(){
try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != \\\'undefined\\\') {
xmlHttp = new XMLHttpRequest();
}
if(!xmlHttp){alert(\\\'Create Xmlhttp Fail \\\');return false;}
}
下面這個函數sugguest()作用是取得key的值並發送給post文件進行處理,再調用returnstate()函數
function sugguest(){
ajaxcreate();
var xmvalue=document.getElementById("key").value;
var url="post.php?key="+encodeURI(xmvalue)+"rnd="+Math.random();
if (xmvalue== null || xmvalue.length>20 || xmvalue == "") return false;
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(xmvalue);
xmlHttp.onreadystatechange=returnstate;
}
下面returnstate()函數是判斷xmlhttp的狀態是否等4,4表示發送成功,其實還一個200表示接收完畢
function returnstate(){
if(xmlHttp.readyState != 4 ){
document.getElementById("sug").innerHTML="plase wait....";
}
if(xmlHttp.readyState == 4 ){
document.getElementById("sug").innerHTML=xmlHttp.responseText;
}
}
後面這些函數就是一些基本的處理我就不講了,
function fillin(str){
document.getElementById(\\\'key\\\').value=str;
obj =document.getElementById(\\\'sug\\\');
obj.innerHTML=\\\'\\\';
obj.style.display=\\\'none\\\';
}
function other(){
document.getElementById(\\\'sug\\\').style.display=\\\'block\\\';
}
function losefouse(){
setInterval("func()",4000);
var time=setInterval("func()",1000);
clearTimeout(time);
}
function func(){
ob=document.getElementById(\\\'sug\\\');
ob.style.display = \\\'none\\\';
}
最後面就是post.php文件了,接著下一篇了.
php+ajax實現google搜索功能二[原創]
效果浏覽地址:http://www.111cn.cn/test/test.html
