php+ajaxでGoogle検索機能を実装1 [オリジナル]_PHPチュートリアル-PHPチュートリアル-php.cn

原创作品

本站原创: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

上面为CSS了就是用来控制效果的,

上記の内容です。以下、機能を詳しく説明します。

2 番目のステップ: js と xmlhttp の処理と呼び出し

この関数については、前回ウィンドウファイルマネージャーを模倣する ajax+php について説明しましたが、ここでは説明しません:

var xmlHttp = false;

関数 ajaxcreate(){
{xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
を試してください。 } キャッチ (e) {
{xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
を試してください。 } キャッチ (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && XMLHttpRequest のタイプ != \'未定義\') {
xmlHttp = 新しい XMLHttpRequest();
}
if(!xmlHttp){alert(\'Xmlhttp の作成に失敗しました \');return false;}
}

以下の関数suggest()は、キーの値を取得し、それを処理のためにポストファイルに送信し、その後returnstate()関数を呼び出します

関数suggest(){

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 は受信が完了したことを意味します。
関数 returnstate(){

if(xmlHttp.readyState != 4 ){

document.getElementById("sug").innerHTML="お待ちください....";

}

if(xmlHttp.readyState == 4){
document.getElementById("sug").innerHTML=xmlHttp.responseText;
}
}

以下の関数は基本的な処理の一部であるため、ここでは説明しません。

関数fillin(str){

document.getElementById(\'key\').value=str;

obj =document.getElementById(\'sug\');

obj.innerHTML=\'\';

obj.style.display=\'none\';
}
関数other(){
document.getElementById(\'sug\').style.display=\'block\';
}

関数 lossfouse(){
setInterval("func()",4000);
var time=setInterval("func()",1000); clearTimeout(時間);

}

関数 func(){
ob=document.getElementById(\'sug\');

Ob.style.display = \'none\'; }

最後は post.php ファイルで、その後に次の記事が続きます。

php+ajaxでGoogle検索機能を実装2【オリジナル】

効果閲覧アドレス: http://www.111cn.cn/test/test.html

http://www.bkjia.com/PHPjc/631914.html

www.bkjia.com

true