Ajax基础教程（4）- 实现基本Ajax技术 4.3 动态加载列表框
http://tech.ddvip.com 2007年11月21日 社区交流
本文详细介绍Ajax基础教程（4）- 实现基本Ajax技术 4.3 动态加载列表框
页面的更新由品牌和车型年份选择框的onchange事件驱动。只要这两个选择框中任何一个的所选值有变化，浏览器就会向服务器发出异步请求。发送请求时会携带一个查询串，其中包含所选品牌和车型年份的值。
RefreshModelList servlet从浏览器接收到请求，并确定对应指定品牌和车型年份的车型列表。这个servlet首先解析查询串，确定所请求的品牌和车型年份。一旦确定了品牌和车型年份，servlet会迭代处理一个对象集合，其中每个对象分别表示一种车型年份、品牌和车型的组合。如果特定对象的车型年份和品牌属性与所请求的车型年份和品牌匹配，则把这个对象的车型属性增加到响应XML串中。找到对应指定品牌和车型年份的所有车型之后，将响应XML写回到浏览器。
请注意，在实际实现中，服务器端组件不太可能依赖硬编码的值填写选择框，而是会搜索一个高速数据库，查找所请求车型年份和品牌的相应车型。
代码清单4-6显示了RefreshModelListServlet.java。
代码清单4-6 RefreshModelListServlet.java
package ajaxbook.chap4;
import java.io.*;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import javax.servlet.*;
import javax.servlet.http.*;
public class RefreshModelListServlet extends HttpServlet {
private static List availableModels = new ArrayList();
protected void processRequest(HttpServletRequest request
, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
int modelYear = Integer.parseInt(request.getParameter("modelYear"));
String make = request.getParameter("make");
StringBuffer results = new StringBuffer("<models>");
MakeModelYear availableModel = null;
for(Iterator it = availableModels.iterator(); it.hasNext();) {
availableModel = (MakeModelYear)it.next();
if(availableModel.modelYear == modelYear) {
if(availableModel.make.equals(make)) {
results.append("<model>");
results.append(availableModel.model);
results.append("</model>");
}
}
}
results.append("</models>");
response.setContentType("text/xml");
response.getWriter().write(results.toString());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
public void init() throws ServletException {
availableModels.add(new MakeModelYear(2006, "Dodge", "Charger"));
availableModels.add(new MakeModelYear(2006, "Dodge", "Magnum"));
availableModels.add(new MakeModelYear(2006, "Dodge", "Ram"));
availableModels.add(new MakeModelYear(2006, "Dodge", "Viper"));
availableModels.add(new MakeModelYear(1995, "Dodge", "Avenger"));
availableModels.add(new MakeModelYear(1995, "Dodge", "Intrepid"));
availableModels.add(new MakeModelYear(1995, "Dodge", "Neon"));
availableModels.add(new MakeModelYear(1995, "Dodge", "Spirit"));
availableModels.add(new MakeModelYear(1985, "Dodge", "Aries"));
availableModels.add(new MakeModelYear(1985, "Dodge", "Daytona"));
availableModels.add(new MakeModelYear(1985, "Dodge", "Diplomat"));
availableModels.add(new MakeModelYear(1985, "Dodge", "Omni"));
availableModels.add(new MakeModelYear(1970, "Dodge", "Challenger"));
availableModels.add(new MakeModelYear(1970, "Dodge", "Charger"));
availableModels.add(new MakeModelYear(1970, "Dodge", "Coronet"));
availableModels.add(new MakeModelYear(1970, "Dodge", "Dart"));
availableModels.add(new MakeModelYear(2006, "Chevrolet", "Colorado"));
availableModels.add(new MakeModelYear(2006, "Chevrolet", "Corvette"));
availableModels.add(new MakeModelYear(2006, "Chevrolet", "Equinox"));
availableModels.add(new MakeModelYear(2006, "Chevrolet", "Monte Carlo"));
availableModels.add(new MakeModelYear(1995, "Chevrolet", "Beretta"));
availableModels.add(new MakeModelYear(1995, "Chevrolet", "Camaro"));
availableModels.add(new MakeModelYear(1995, "Chevrolet", "Cavalier"));
availableModels.add(new MakeModelYear(1995, "Chevrolet", "Lumina"));
availableModels.add(new MakeModelYear(1985, "Chevrolet", "Cavalier"));
availableModels.add(new MakeModelYear(1985, "Chevrolet", "Chevette"));
availableModels.add(new MakeModelYear(1985, "Chevrolet", "Celebrity"));
availableModels.add(new MakeModelYear(1985, "Chevrolet", "Citation II"));
availableModels.add(new MakeModelYear(1970, "Chevrolet", "Bel Air"));
availableModels.add(new MakeModelYear(1970, "Chevrolet", "Caprice"));
availableModels.add(new MakeModelYear(1970, "Chevrolet", "Chevelle"));
availableModels.add(new MakeModelYear(1970, "Chevrolet", "Monte Carlo"));
availableModels.add(new MakeModelYear(2006, "Pontiac", "G6"));
availableModels.add(new MakeModelYear(2006, "Pontiac", "Grand Prix"));
availableModels.add(new MakeModelYear(2006, "Pontiac", "Solstice"));
availableModels.add(new MakeModelYear(2006, "Pontiac", "Vibe"));
availableModels.add(new MakeModelYear(1995, "Pontiac", "Bonneville"));
availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Am"));
availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Prix"));
availableModels.add(new MakeModelYear(1995, "Pontiac", "Firebird"));
availableModels.add(new MakeModelYear(1985, "Pontiac", "6000"));
availableModels.add(new MakeModelYear(1985, "Pontiac", "Fiero"));
availableModels.add(new MakeModelYear(1985, "Pontiac", "Grand Prix"));
availableModels.add(new MakeModelYear(1985, "Pontiac", "Parisienne"));
availableModels.add(new MakeModelYear(1970, "Pontiac", "Catalina"));
availableModels.add(new MakeModelYear(1970, "Pontiac", "GTO"));
availableModels.add(new MakeModelYear(1970, "Pontiac", "LeMans"));
availableModels.add(new MakeModelYear(1970, "Pontiac", "Tempest"));
}
private static class MakeModelYear {
private int modelYear;
private String make;
private String model;
public MakeModelYear(int modelYear, String make, String model) {
this.modelYear = modelYear;
this.make = make;
this.model = model;
}
}
}如图4-6所示，在任何一个选择框中选择不同的值，就会更新车型列表。
图4-6 在任何一个选择框中选择不同的值都会更新车型列表
来源：CSDN 责编：豆豆技术应用
正在加载评论...