看了一個開源的標簽庫AjaxTag(http://ajaxtags.sourceforge.net/index.html)，提供幾個比較簡單的應用。我測試下了DropDownSelect應用：
1、首先當然是看安裝文檔（http://ajaxtags.sourceforge.net/install.html），應該沒什么負責的，我要說的是第3步，也是比較重要的一步，創建服務端的控制程序。這部分也就是AjaxTag的原理，AjaxTag是通過服務器端的servelt生成XML文件，當然也可以是其他的服務器端技術只要是能生成格式良好的XML文件就可以了，文件格式如下圖：
2、我們的例子就是通過選擇制造商可以動態的產生該制造商的車型。下面是需要的一些類文件：
Car類:包含兩個String類型屬性make,model分別指制造商和車型.
CarService類如下：
public class CarService {
static final List cars = new ArrayList();
static {
cars.add(new Car("Ford", "Escape"));
cars.add(new Car("Ford", "Expedition"));
cars.add(new Car("Ford", "Explorer"));
cars.add(new Car("Ford", "Focus"));
cars.add(new Car("Ford", "Mustang"));
cars.add(new Car("Ford", "Thunderbird"));
cars.add(new Car("Honda", "Accord"));
cars.add(new Car("Honda", "Civic"));
cars.add(new Car("Honda", "Element"));
cars.add(new Car("Honda", "Ridgeline"));
cars.add(new Car("Mazda", "Mazda 3"));
cars.add(new Car("Mazda", "Mazda 6"));
cars.add(new Car("Mazda", "RX-8"));
}
public CarService() {
super();
}
/*該方法在servlet被調用*/
public List getModelsByMake(String make) {
List l = new ArrayList();
for (Iterator iter = cars.iterator(); iter.hasNext();) {
Car car = (Car) iter.next();
if (car.getMake().equalsIgnoreCase(make)) {
l.add(car);
}
}
return l;
}
public List getAllCars() {
return cars;
}
}
DropdownServlet類：
String make = request.getParameter("make");
CarService service = new CarService();
//得到該make的所有model
List list = service.getModelsByMake(make);
//這就是Helper類，能生成像上面的xml文件
return new AjaxXmlBuilder().addItems(list, "model", "make").toString();
4、不要忘記了在web.xml中加上映射DropdownServlet
<servlet>
<servlet-name>dropdown</servlet-name>
<servlet-class>qiya.deng.ajaxtag.DropdownServlet</servlet-class>
<load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dropdown</servlet-name>
<url-pattern>/dropdown.view</url-pattern>
</servlet-mapping>
5.下面就是JSP部分(需要JSTL和EL)：
<c:set var="contextPath" scope="request">${pageContext.request.contextPath}</c:set>
<form id="carForm" name="carForm">
<fieldset>
<legend>Choose Your Car</legend>
<div>
<img id="makerEmblem"
src="<%=request.getContextPath()%>/img/placeholder.gif"
width="76" height="29" />
</div>
<label for="make">Make:</label>
<select id="make">
<option value="">Select make</option>
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Mazda">Mazda</option>
<option value="dummy">Dummy cars</option>
</select>
<label for="model">Model:</label>
<select id="model" disabled="disabled">
<option value="">Select model</option>
</select>
</fieldset>
</form>
<script type="text/javascript">
function showMakerEmblem() {
var index = document.forms["carForm"].make.selectedIndex;
var automaker = document.forms["carForm"].make.options[index].text;
var imgTag = document.getElementById("makerEmblem");
if (index > 0) {
imgTag.src = "<%=request.getContextPath()%>/img/" + automaker.toLowerCase() + "_logo.gif";
}
}
function handleEmpty() {
document.getElementById("model").options.length = 0;
document.getElementById("model").options[0] = new Option("None", "");
document.getElementById("model").disabled = true;
}
</script>
<ajax:select
baseUrl="${contextPath}/dropdown.view"
source="make"
target="model"
parameters="make={make}"
postFunction="showMakerEmblem"
emptyFunction="handleEmpty" />
注意到form里面其實沒什么不一樣的，就是最后那段的<ajax:select/>,baseUrl就是服務器端處理的Handler,source是關聯的源，model是被關聯的；parameter是傳個servlet的參數，可以有多個用逗號隔開；postFunction,emptyFunctuion就是上面的兩個JavaScript.詳細的可以看
http://ajaxtags.sourceforge.net/usage.html。
經過簡單的修改，我們也可以把這個應用到Struts中。那就后續吧^_^...