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