推薦：我的第一個(gè)AJAX程序
Author:zfive5(zhaozidong)Email :[email protected] 禮拜五下午公司網(wǎng)站維護(hù)的同事問(wèn)我怎樣實(shí)現(xiàn)一個(gè)功能，一個(gè)提交頁(yè)上有兩個(gè)select，第二個(gè)select根據(jù)第一個(gè)select變，我的第一念頭就

近日學(xué)習(xí)了一下AJAX，照做了幾個(gè)例子，感覺比較新奇。

第一個(gè)就是自動(dòng)完成的功能即Autocomplete,具體的例子可以在這里看： http://www.b2c-battery.co.uk

在Search框內(nèi)輸入一個(gè)產(chǎn)品型號(hào)，就可以看見效果了。

這里用到了一個(gè)開源的代碼： AutoAssist ，有興趣的可以看一下。

以下為代碼片斷：

index.htm
＜script type="text/javascript" src="javascripts/prototype.js">＜/script>
＜script type="text/javascript" src="javascripts/autoassist.js">＜/script>
＜link rel="stylesheet" type="text/css" href="styles/autoassist.css"/>
＜div>
＜input type="text" name="keyword" id="keyword"/>
＜script type="text/javascript">
Event.observe(window, "load", function() {
var aa = new AutoAssist("keyword", function() {
return "forCSV.php?q=" this.txtBox.value;
});
});
＜/script>
＜/div>

不知道為什么不能用keywords做文本框的名字，我試了很久，后來(lái)還是用keyword,搞得還要修改原代碼。

forCSV.php
＜?php
$keyword = $_GET['q'];
$count = 0;
$handle = fopen("products.csv", "r");
while (($data = fgetcsv($handle, 1000)) !== FALSE) {
if (preg_match("/$keyword/i", $data[0])) {
if ($count > 10) { break; }
?>
＜div onSelect="this.txtBox.value='＜?php echo $data[0]; ?>';">
＜?php echo $data[0]; ?>
＜/div>
＜?php
}
}
fclose($handle);
if ($count == 0) {
?>
: (, nothing found.
＜?php
}
?>

原來(lái)的例子中的CSV文件是根據(jù)\t來(lái)分隔的，我們也可以用空格或其它的來(lái)分隔，這取決于你的數(shù)據(jù)結(jié)構(gòu)。

當(dāng)然你也可以不讀文件，改從數(shù)據(jù)庫(kù)里讀資料，就不再?gòu)U話了。

效果圖如下：

分享：Ajax 中的高級(jí)請(qǐng)求和響應(yīng)
對(duì)于很多 Web 開發(fā)人員來(lái)說(shuō)，只需要生成簡(jiǎn)單的請(qǐng)求并接收簡(jiǎn)單的響應(yīng)即可；但是對(duì)于希望掌握 Ajax 的開發(fā)人員來(lái)說(shuō)，必須要全面理解 HTTP 狀態(tài)代碼、就緒狀態(tài)和 XMLHttpRequest 對(duì)象。在本文中