Posted on 2006-02-23 14:52
BlueO2 閱讀(346)
評論(0) 編輯 收藏 所屬分類:
AJAX
為AJAX貼貼臉系列文章。第一篇為
AJAX貼貼臉之入門篇。本示例部分操作利用了prototype類庫，
相關知識請查閱示例為我們以前經常遇到過的動態列表問題，當選擇一個下拉框的時候，另外一個的數據將動態產生。
這是個極其簡單的應用。不過我們講由簡入繁，最后的示例會展現Google Suggest類型的自動提示。而且我們會不停的對整個示例重構，標題的1-1也表明有1-2等。
1-1是完全自己處理AJAX的各種問題，1-2預計引入其他類庫來操作XML，1-3預計用buffalo完成此示例。之后每個示例如果有必要都會有此類對比。由于代碼很簡單并且有注釋，所以文章以代碼即可展現應用。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Dynamic List </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="./script/prototype.js"></script>
<script>
var xmlHttp; //XHR Object
function refreshBookList() {
var bookCate = $F('bookCate');
//clear Books select box
if(bookCate == ""){
clearBookList();
return;
}
//we use XML file directly for demonstrating.
//In real application,you should generate *.xml file by server side
var url;
if(bookCate == "SAP"){
url = "./SAP.xml";
}else {
url = "./SIEBEL.xml"
}
var pars = "";
//Create a new XHR object
xmlHttp = new Ajax.Request(url,{method: 'get',onComplete: handleListChange});
}
//remove list values of select box
function clearBookList() {
var books = $('bookList');
while(books.childNodes.length >0){
books.removeChild(books.childNodes[0]);
}
}
//callback function
function handleListChange(originalRequest){
clearBookList();
var books = $('bookList');
var results = originalRequest.responseXML;
var option = null;
var booksXML = results.getElementsByTagName("books")[0];
for(var i = 0; i < booksXML.childNodes.length;i++){
//get book tag
var listItem = booksXML.childNodes[i];
option = document.createElement('option');
option.appendChild(document.createTextNode(listItem.firstChild.nodeValue));
books.appendChild(option);
}
}
</script>
</head>
<body>
<form action="#">
Book Categroies:
<select name="bookCate" id="bookCate" onchange="refreshBookList();">
<option>Select One</option>
<option value="SAP">SAP Books</option>
<option value="SIEBLE">SIEBEL Books</option>
</select>
<br/><br/>
<select name="bookList" id="bookList" size="6" style="width:300px"></select>
<br/>
</form>
</body>
</html>
SAP.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<books>
<book>
ABAP
</book>
<book>
BW
</book>
<book>
FI module
</book>
</books>
SIEBEL.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<books>
<book>
SIEBEL
</book>
<book>
CRM
</book>
</books>