php+ajax实现google搜索功能一[原创]
//
原创作品
本站原创: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了就是用来控制效果的,
这上面为内容了,关于函数我们下面来具体的说明.
第二步:就是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

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Currently, four new Pixel smartphones are anticipated to land this autumn. To recap, the series is rumoured to feature thePixel 9 and Pixel 9 Pro at launch. However, the Pixel 9 Pro will be a rival to the iPhone 16 Pro rather than a Pixel 8 Pro (curr

Google AI has started to provide developers with access to extended context windows and cost-saving features, starting with the Gemini 1.5 Pro large language model (LLM). Previously available through a waitlist, the full 2 million token context windo

Google's AI assistant, Gemini, is set to become even more capable, if the APK teardown of the latest update (v15.29.34.29 beta) is to be considered. The tech behemoth's new AI assistant could reportedly get several new extensions. These extensions wi

Google recently responded to the performance concerns about the Tensor G4 of the Pixel 9 line. The company said that the SoC wasn't designed to beat benchmarks. Instead, the team focused on making it perform well in the areas where Google wants the c

Google has introduced DisplayPort Alternate Mode with the Pixel 8 series, and it's present on the newly launched Pixel 9 lineup. While it's mainly there to let you mirror the smartphone display with a connected screen, you can also use it for desktop

The Pixel 9 series is almost here, having been scheduled for an August 13 release. Based on recent rumours, the Pixel 9, Pixel 9 Pro and Pixel 9 Pro XL will mirror the Pixel 8 and Pixel 8 Pro (curr. $749 on Amazon) by starting with 128 GB of storage.

A few months have passed since Android Authority demonstrated a new Android desktop mode that Google had hidden away within Android 14 QPR3 Beta 2.1. Arriving hot on the heels of Google adding DisplayPort Alt Mode support for the Pixel 8 and Pixel 8

Google's AI Test Kitchen, which includes a suite of AI design tools for users to play with, has now opened up to users in well over 100 countries worldwide. This move marks the first time that many around the world will be able to use Imagen 3, Googl
