Ajax 動態清單（动态表单 繁体中文文档）
例如您設計的網頁如下：
DynamicListeEx-1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=BIG5"><title>動態載入清單</title><script type="text/javascript" src=DynamicListEx-1.js></script></head><body> 種類… <select id="type" onchange="refreshBooklList();"> <option value="notTech">非關語言</option> <option value="language">語言技術</option> <option value="framework">開源框架</option> </select> <br/><br/> 書籍… <br/> <select id="books" size="6" style="width:300px;"> </select></body></html>
當使用者選擇完書籍種類之後，另一個選單就會自動填上符合該重類的書籍，來看看JavaScript如何撰寫：
DynamicListEx-1.js
var xmlHttp;window.onload = refreshBooklList;function createXMLHttpRequest() { if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }}function refreshBooklList() { var type = document.getElementById("type").value; var url = "RefreshBookServlet?type=" + type; createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", url); xmlHttp.send(null);}function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { clearBookList(); updateBookList(); } }}// 清除上一次的顯示結果function clearBookList() { var books = document.getElementById("books"); while(books.childNodes.length > 0) { books.removeChild(books.childNodes[0]); }}// 以回應更新資料function updateBookList() { var results = xmlHttp.responseXML.getElementsByTagName("book"); var books = document.getElementById("books"); var option = null; for(var i = 0; i < results.length; i++) { option = document.createElement("option"); option.appendChild(document.createTextNode(results[i].firstChild.nodeValue)); books.appendChild(option); }}
從伺服端要傳回以下的XML，表示根據種類的查詢結果：
<books>
<book>Java 學習筆記</book>
<book>C++ 學習筆記</book>
<book>JSP/Servlet 學習筆記</book>
<book>Ajax 學習筆記</book>
</books>
您可以使用以下這個簡單的Servlet模擬資料查詢並傳回XML回應的過程：
RefreshBookServlet.java
package onlyfun.caterpillar;import java.util.*;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class RefreshBookServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet { private static Map inMemoryDB = new HashMap(); public void init() throws ServletException { inMemoryDB.put("notTech", new String[] {"學習筆記", "電腦圖學", "常見程式演算", "設計模式"}); inMemoryDB.put("language", new String[] {"Java 學習筆記", "JSP/Servlet 學習筆記", "C++ 學習筆記", "Ajax 學習筆記"}); inMemoryDB.put("framework", new String[] {"Struts 學習筆記", "Spring 學習筆記", "Hibernate 學習筆記", "JUnit 學習筆記"}); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String type = request.getParameter("type"); StringBuffer xml = new StringBuffer("<books>"); String[] books = (String[]) inMemoryDB.get(type); for(int i = 0; i < books.length; i++) { xml.append("<book>"); xml.append(books[i]); xml.append("</book>"); } xml.append("</books>"); response.setCharacterEncoding("UTF8"); response.setContentType("text/xml"); response.getWriter().write(xml.toString()); response.getWriter().close(); } }
from:asp学习网/title:Ajax 動態清單（动态表单 繁体中文文档）/ time:2007-4-30 17:07:01
本文主题Ajax 表单
