AJax - 模拟百度搜索

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

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

百度搜索

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

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

html 部分：

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

<img src="bd_logo.png" id="logo">
<form>
    <input type="text" id="search" onkeyup="showHint(this.value)" />
    <input type="button" value="百度一下" id="btn"/>
</form>

之后在创建 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();
}

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

<input type="text" id="search" onkeyup="showHint(this.value)" />

这样每当数据一个字符的时候，将调用一次 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 "<p>";
        echo "<a href='#'>".$row['data']."</a><br>";
        echo "</p>";
    }
}

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

美化搜索框：

在 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