本文為原創(chuàng)作品。歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明出處：林東洲的博客 | Lindz Blog。

在閱讀此文前，建議先閱讀 Ajax - 跨域請求熟悉一下 AJax 請求，本文會跳過一些細(xì)節(jié)代碼的實(shí)現(xiàn)說明。
實(shí)現(xiàn)效果：

百度搜索

如上圖所示，在輸入搜索字的時(shí)候，百度向后臺發(fā)起 AJax 請求，并將后臺提示信息反饋在頁面上。

實(shí)現(xiàn)起來并不困難，話不多說，就來親自實(shí)踐一下。

html 部分：

首先創(chuàng)建 index.html，添加如下結(jié)構(gòu)：

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

之后在創(chuàng)建 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;
}

這時(shí)候基本頁面就有了，效果如下：

百度首頁

在編寫 AJax 請求時(shí)候，先在數(shù)據(jù)庫創(chuàng)建一些偽造數(shù)據(jù)。

創(chuàng)建搜索數(shù)據(jù)：

創(chuàng)建一個(gè)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 來訪問數(shù)據(jù)庫并執(zhí)行 sql 語句，創(chuàng)建一個(gè) 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);

這時(shí)候數(shù)據(jù)就已經(jīng)創(chuàng)建成功了，接著可以從終端查看添加的數(shù)據(jù):

數(shù)據(jù)庫數(shù)據(jù)

數(shù)據(jù)創(chuàng)建好后就可以開始編寫 Javascript 代碼了。

Ajax 請求部分：

創(chuàng)建一個(gè) search.js 文件，然后引入到 body 底部表單之后。

在 js 代碼中，首先創(chuàng)建封裝好的 Ajax 對象函數(shù)，代碼如下：

function getAjaxObject(){
    var request;
    if (window.XMLHttpRequest){
        request = new XMLHttpRequest();
    }else{
        request = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return request;
}

之后在編寫回調(diào)函數(shù)，代碼如下：

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;
        }
    }
}

這里動(dòng)態(tài)創(chuàng)建一個(gè) div，并且將后臺返回的數(shù)據(jù)添加到 div 中，再將此 div 添加到 body 中。

之后就可以創(chuàng)建一個(gè) showHint 函數(shù)用來發(fā)送 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 標(biāo)簽中，即：

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

這樣每當(dāng)數(shù)據(jù)一個(gè)字符的時(shí)候，將調(diào)用一次 showHint 函數(shù)用來發(fā)起 AJax 請求，達(dá)到每次輸入每次查詢的效果。

后臺部分：

創(chuàng)建一個(gè)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>";
    }
}

自此前后端已經(jīng)可以正常的發(fā)起搜索功能。

美化搜索框：

在 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