一個最重要的文件,ajax.js:
function send_request(callback, urladdress, isReturnData){
var xmlhttp = getXMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4) {//readystate 爲4即數據傳輸結束
try{
if(xmlhttp.status == 200){
if(isReturnData && isReturnData==true){
callback(xmlhttp.responseText);
}
}else{
callback("抱歉,沒找到此頁面:"+ urladdress +"");
}
} catch(e){
callback("抱歉,發送請求失敗,請重試 " + e);
}
}
}
xmlhttp.open("GET", urladdress, true);
xmlhttp.send(null);
}
function getXMLHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {
try {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType("text/html;charset=UTF-8");//設定以UTF-8編碼識別數據
} catch (e) {}
} else if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHttp");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Msxml3.XMLHttp");
} catch (e) {}
}
}
}
return xmlhttp;
}
2.傳入url後,從後臺準備值:
//根據所選一級欄目動態改變所對應的二級欄目
function changSubitem(id)
{
var schoolItemid = get("school_" + id);//考區;很明確知道選擇了這一個;直接使用getById獲得
var url="share_hall!searchRoomsBySiteId.action?siteId="+schoolItemid.options[schoolItemid.selectedIndex].value;
var rooms = document.getElementsByName("rooms_"+id);
send_request(function(datas){
var str = eval(datas);//這個函數太牛B了,將這種格式的字符串解析成對象:"[["1","a"],["2","b"]]"
for(var m=0;m<rooms.length;m++){//一共有六個聯動單元
for ( var i = 0; i < datas.length; i++) {
//remove option;一定要逆着減,否則會出錯
for ( var x = rooms[m].options.length - 1; x >= 0;x--) {
rooms[m].options.remove(x);
}
//add option
for ( var x = 0; x < str.length; x++) {
if(x==0){
rooms[m].options.add(new Option("請選擇", "-1"));//爲了讓用戶必須去觸發onchange事件,所以加這個,一般不加,特殊處理
}
var id = str[x][0];
var name = str[x][1];
rooms[m].options.add(new Option(name, id));
}
}
}
},url,true);
}
3.後臺組合的值形如這種格式,手動湊出來就行:"[["1","a"],["2","b"]]",直接使用eval函數,轉化爲數組