php ajax 百度搜索,AJax - 模拟百度搜索

本文为原创作品。欢迎转载，转载请注明出处：林东洲的博客 | Lindz Blog。

在阅读此文前，建议先阅读 Ajax - 跨域请求熟悉一下 AJax 请求，本文会跳过一些细节代码的实现说明。

实现效果：

百度搜索

如上图所示，在输入搜索字的时候，百度向后台发起 AJax 请求，并将后台提示信息反馈在页面上。

实现起来并不困难，话不多说，就来亲自实践一下。

html 部分：

首先创建 index.html，添加如下结构：

之后在创建 basic.css，添加一些样式并引入到html中：

body{

text-align: center;

}

#logo{

width: 300px;

}

#search{

padding: 9px 7px;

width: 521px;

height: 20px;

maxlength: 100;

margin: 0;

border: 1px solid #b8b8b8;

font: 16px arial;

}

#btn{

cursor: pointer;

width: 102px;

height: 38px;

font-weight: normal;

color: #FFF;

background: #38f;

line-height: 38px;

font-size: 16px;

font-family: Arial;

padding: 0;

border: 0;

margin: 0;

}

这时候基本页面就有了，效果如下：

百度首页

在编写 AJax 请求时候，先在数据库创建一些伪造数据。

创建搜索数据：

创建一个create.sql文件，编写如下代码：

create database baidu_search;

use baidu_search;

create table myData(

id int auto_increment primary key,

data varchar(20) not null

);

insert into myData values (1,'ALin');

insert into myData values (2,'Amy');

insert into myData values (3,'Brittany');

insert into myData values (4,'Bully');

insert into myData values (5,'Eve');

insert into myData values (6,'Evita');

insert into myData values (7,'Eva');

insert into myData values (8,'Amanda');

insert into myData values (9,'Ellen');

insert into myData values (10,'Elizabeth');

insert into myData values (11,'Anna');

insert into myData values (12,'Abel');

insert into myData values (13,'Addison');

insert into myData values (14,'Alan');

insert into myData values (15,'Alfred');

insert into myData values (16,'Alger');

insert into myData values (17,'Allen');

接着我使用 php 来访问数据库并执行 sql 语句，创建一个 createdb.php, 编写如下代码:

$servername = 'your servername';

$username = 'your username';

$password = 'your password';

$con = new mysqli($servername,$username,$password);

if(!$con){

echo "Can't find the database.";

exit();

}

$sql = file_get_contents('create.sql');

$con->multi_query($sql);

这时候数据就已经创建成功了，接着可以从终端查看添加的数据:

数据库数据

数据创建好后就可以开始编写 Javascript 代码了。

Ajax 请求部分：

创建一个 search.js 文件，然后引入到 body 底部表单之后。

在 js 代码中，首先创建封装好的 Ajax 对象函数，代码如下：

function getAjaxObject(){

var request;

if (window.XMLHttpRequest){

request = new XMLHttpRequest();

}else{

request = new ActiveXObject('Microsoft.XMLHTTP');

}

return request;

}

之后在编写回调函数，代码如下：

function callback(){

if (request.readyState === 4){

if (request.status === 200){

var result = document.createElement('div');

result.id = 'result';

document.body.appendChild(result);

document.getElementById('result').innerHTML += request.responseText;

}

}

}

这里动态创建一个 div，并且将后台返回的数据添加到 div 中，再将此 div 添加到 body 中。

之后就可以创建一个 showHint 函数用来发送 AJax 请求，代码如下：

var request = null;

function showHint(val){

if (document.getElementById('result')){

var result = document.getElementById('result');

result.parentNode.removeChild(result);

}

if (val.length == 0){

return false;

}

request = getAjaxObject();

if (request === null){

alert("Your browser doesn't support AJax");

return false;

}

request.onreadystatechange = callback;

var url = 'getHint.php?q=' + val;

request.open('GET',url,true);

request.send();

}

之后将 οnkeyup="showHint(this.value)" 添加到属性为 text 的 input 标签中，即：

这样每当数据一个字符的时候，将调用一次 showHint 函数用来发起 AJax 请求，达到每次输入每次查询的效果。

后台部分：

创建一个getHint.php文件，编写如下代码：

$servername = 'your servername';

$username = 'your username';

$password = 'your password';

$db = 'baidu_search';

$con = new mysqli($servername,$username,$password);

if(!$con){

echo "Can't find the database.";

exit();

}

$con->select_db($db);

$sql = "Select * from myData;";

$result = $con->query($sql);

while($row = $result->fetch_array()){

if(strtolower($q) == strtolower(substr($row['data'],0,strlen($q)))){

echo "

";

echo "".$row['data']."
";

echo "

";

}

}

自此前后端已经可以正常的发起搜索功能。

美化搜索框：

在 basic.css 中添加一些样式：

#result{

text-align: left;

width: 535px;

position: relative;

margin-left: 310px;

border: 1px solid #b8b8b8;

box-shadow: 1px 1px 1px 1px #eeeeee;

}

#result > p{

margin: 0;

padding: 0;

}

#result p > a{

text-decoration: none;

color: #000;

line-height: 25px;

font-size: 25px;

}

#result p:hover{

cursor: pointer;

background: #eee;

}

最终效果：

效果1

效果2