l 1.1使用JavaScript獲得瀏覽器內置的AJAX引擎（XMLHttpRequest對象）
l 1.2 通過AJAX引擎確定請求路徑和請求參數
l 1.3 通知AJAX引擎發送請求
l AJAX引擎會在不刷新瀏覽器地址欄的情況下，發送請求
l 2.1 服務器獲得請求參數
l 2.2 服務器處理請求參數（添加、查詢等操作）
l 2.3 服務器響應數據給瀏覽器
l AJAX引擎獲得服務器響應的數據，通過執行JavaScript的回調函數將數據傳遞給瀏覽器頁面。
l 3.1 通過設置給AJAX引擎的回調函數獲得服務器響應的數據
l 3.2 使用JavaScript在指定的位置，顯示響應數據，從而局部修改頁面的數據，達到局部刷新目的。
l $.post() 以post請求方式發送ajax
格式：jQuery.post(url, [data], [callback], [type])
參數1：url，請求路徑
參數2：data，請求參數
參數3：callback，回調函數
參數4：type，返回內容格式，xml, html, script, json, text, _default。
服務器響應編碼為：application/json;charset=UTF-8，回調函數data類型是json對象
服務器響應編碼為：text/html;charset=UTF-8，回調函數data類型是字符串。
l 常用對象：
n JSONObject， java對象（JavaBean、Map）與JSON數據 轉換工具類 對象和map集合
n JSONArray，java集合（List、Array） 與JSON數據 轉換工具類
鍵盤按下和抬起 實現的ajax查詢數據庫顯示下拉列表
條件查詢的 拼音和文字都匹配的代碼
* 條件查詢商品
* @param condition
* @param params
* @return
*/
public List<Product> findAll(String word) throws SQLException{
StringBuilder builder = new StringBuilder();
List<Object> paramsList = new ArrayList<Object>();
if(word != null){
// 拼湊關鍵字的屬性，hao拼湊成“%h%a%o%”
StringBuilder wordBuilder = new StringBuilder();
wordBuilder.append("%");
for(int i = 0 ; i < word.length() ; i ++ ){
wordBuilder.append(word.charAt(i)).append("%"); append 可以連着拼接
}
//1 漢字匹配
builder.append(" and pname like ?");
paramsList.add(wordBuilder.toString());
//2 拼音匹配
builder.append(" or pinyin like ?");
paramsList.add(wordBuilder.toString());
}
//轉換成需要的條件
String condition = builder.toString();
Object[] params = paramsList.toArray();
QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource());
String sql = "select * from product where 1=1 " + condition;
return queryRunner.query(sql, new BeanListHandler<Product>(Product.class), params);
}
前台頁面js代碼
//自動填充
$(function(){
$("#search").keyup(function(){
var url = "/day15_autocomplete/productFindByWordServlet";
var word = $(this).val(); 獲取用戶輸入的數據作為參數
if(word == "") {
//如果沒有輸入關鍵字，隱藏提供區域
$("#completeShow").slideUp(200);
return false;
}
var params = {"word":word};
$.post(url,params,function(data){
$("#completeShow").html("<ul id='itemul' class='list-group'></ul>");
for(var i = 0 ; i < data.length ; i ++){
var product = data[i];
//處理關鍵字顯示
var str = ""+product.pname + "("+ product.pinyin +")";
$("#itemul").append("<li class='list-group-item'><a href='#'>"+str+"</a></li>");
$("#completeShow").show();
}
});
}).focus(function(){
//獲得焦點時，如果有搜索項顯示
if($("#completeShow li").size() > 0){
$("#completeShow").show();
}
}).click(function(){
//如果點擊的是文本框，阻止點擊事件，及不觸發document的click事件
return false;
});
/**
* 點擊其他位置時，隱藏提示區域
*/
$(document).click(function(){
$("#completeShow").slideUp(200);
});
});