qiyadeng

 看了一個開源的標簽庫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中。那就后續吧^_^...