看了一個(gè)開(kāi)源的標(biāo)簽庫(kù)AjaxTag(http://ajaxtags.sourceforge.net/index.html)，提供幾個(gè)比較簡(jiǎn)單的應(yīng)用。我測(cè)試下了DropDownSelect應(yīng)用：
1、首先當(dāng)然是看安裝文檔（http://ajaxtags.sourceforge.net/install.html），應(yīng)該沒(méi)什么負(fù)責(zé)的，我要說(shuō)的是第3步，也是比較重要的一步，創(chuàng)建服務(wù)端的控制程序。這部分也就是AjaxTag的原理，AjaxTag是通過(guò)服務(wù)器端的servelt生成XML文件，當(dāng)然也可以是其他的服務(wù)器端技術(shù)只要是能生成格式良好的XML文件就可以了，文件格式如下圖：
2、我們的例子就是通過(guò)選擇制造商可以動(dòng)態(tài)的產(chǎn)生該制造商的車型。下面是需要的一些類文件：
Car類:包含兩個(gè)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被調(diào)用*/
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里面其實(shí)沒(méi)什么不一樣的，就是最后那段的<ajax:select/>,baseUrl就是服務(wù)器端處理的Handler,source是關(guān)聯(lián)的源，model是被關(guān)聯(lián)的；parameter是傳個(gè)servlet的參數(shù)，可以有多個(gè)用逗號(hào)隔開(kāi)；postFunction,emptyFunctuion就是上面的兩個(gè)JavaScript.詳細(xì)的可以看
http://ajaxtags.sourceforge.net/usage.html。
經(jīng)過(guò)簡(jiǎn)單的修改，我們也可以把這個(gè)應(yīng)用到Struts中。那就后續(xù)吧^_^...