ajax简单级联菜单设计

var xmlreq = false; //创建一个XMLHttpRequest对象
  
function newXMLHttpRequest() {
   if (window.XMLHttpRequest) {
      xmlreq = new XMLHttpRequest(); // 在非Microsoft浏览器中创建XMLHttpRequest对象
   } else if (window.ActiveXObject) {
  try { //通过MS ActiveX创建XMLHttpRequest
   xmlreq = new ActiveXObject("Msxml2.XMLHTTP"); // 尝试按新版InternetExplorer方法创建
  } catch (e1) {
   try { // 创建请求的ActiveX对象失败
    xmlreq = new ActiveXObject("Microsoft.XMLHTTP"); // 尝试按老版InternetExplorer方法创建
   } catch (e2) {
     // 不能通过ActiveX创建XMLHttpRequest
   }
  }
   }
}
  

//发送请求函数-->业务流程
function sendXml(url, param){
 if(url.length == 0){
  return;
 }else{
  if( param == null || param == "undefined" ){
   param = "";
  }

  newXMLHttpRequest();
  try{
   xmlreq.onreadystatechange=proce; //指定响应的函数 proce()
   xmlreq.open("GET", url, true);  //以GET方式传输数据，打开url，以异步方式
   xmlreq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xmlreq.send(param); //发送请求
  }catch(exception){
   alert("您要访问的资源不存在!");
  }
 }
}

//回调函数
function proce(){
 if(xmlreq.readyState == 4){  //对象状态
  if(xmlreq.status == 200 || xmlreq.status == 0){ //信息已成功返回，开始处理信息;
   alert(xmlreq.responseText);
   parseXml(xmlreq.responseXML);
  }else{
   window.alert("所请求的页面有异常");
   alert(xmlreq.statusText);
  }
 }
}
  
//解析xml文档
function parseXml(xmlDom){
 var rootNode = xmlDom.documentElement;
 if(rootNode == null){
  return false;
 }else{
  for(var node = rootNode.firstChild; node != null;  node=node.nextSibling){
   var objName = node.nodeName;
   var type = node.getAttribute("type");
   if(type == "select"){
    clearSelectOption(objName);
    var opts = node.getElementsByTagName("option");
    for(var i=0; i<opts.length; i++){
     var optName = opts[i].firstChild.data;
     var optValue = opts[i].getAttribute("value");
     addSelectOption(objName, optValue, optName);
    }
   }
  }
 }
   
}

//往下拉列表框中写数据
function addSelectOption(objName, optValue, optName){
 var elmtObj = document.getElementById(objName);
 elmtObj.options[elmtObj.length] = new Option(optName, optValue);
}

//清空下拉列表框
function clearSelectOption(objName){
 var elmtObj = document.getElementById(objName);

 while(elmtObj.options.length > 0){
  elmtObj.remove(0);
 }
 
 //elmtObj.options.length = 0;
}

function sendText(url, param){
 if(url.length == 0){
  return;
 }else{
  if( param == null || param == "undefined" ){
   param = "";
  }

  newXMLHttpRequest();
  try{
   xmlreq.onreadystatechange=getText; //指定响应的函数 getText()
   xmlreq.open("GET", url, true);  //以GET方式传输数据，打开url，以异步方式
   xmlreq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xmlreq.send(param); //发送请求
  }catch(exception){
   alert("您要访问的资源不存在!");
  }
 }
}

function getText(){
 if(xmlreq.readyState == 4){  //对象状态
  if(xmlreq.status == 200 || xmlreq.status == 0){ //信息已成功返回，开始处理信息;
   alert(xmlreq.responseText);
  }else{
   window.alert("所请求的页面有异常");
   alert(xmlreq.statusText);
  }
 }
}

操作类

package org.duzn.util;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

public class SOAData {

 private StringBuffer sb = new StringBuffer();
 private String objName = "";
 
 public String getXmlDoc(){
  return sb.toString();
 }
 
 public void beginSelectOptions(String objName){
  this.objName = objName;
  sb.append("<?xml version=\"1.0\" encoding=\"GB2312\"?>");
  sb.append("<root>");
  sb.append("<" + objName + " type=\"select\">");
 }
 
 public void beginSelectOptions(String objName, int index){
  this.objName = objName;
  sb.append("<?xml version=\"1.0\" encoding=\"GB2312\"?>");
  sb.append("<root>" + "\n");
  sb.append("<" + objName + " type=\"select\" index=\"" + index + "\">");
 }
 
 public void addSelectOption(String objContent, String objValue){
  sb.append("<option value=\"" + objValue + "\">");
  sb.append(objContent + "</option>");
 }
 
 public void endSelectOptions(){
  sb.append("</" + this.objName + ">");
  sb.append("</root>");
 }
 
 public void soaWrite(HttpServletResponse response, PrintWriter pw){
  //设置输出的信息的格式及字符集
  response.setContentType("text/xml; charset=GB2312");
  response.setHeader("Cache-Control","no-cache");
  pw.println(getXmlDoc());
  pw.flush();
  pw.close();
 }
 
 public static void main(String[] args){
  SOAData soaData = new SOAData();
  soaData.beginSelectOptions("dept");
  soaData.addSelectOption("gdys", "1");
  soaData.addSelectOption("dzgc", "2");
  soaData.addSelectOption("jjgl", "3");
  soaData.endSelectOptions();
  System.out.println(soaData.getXmlDoc());
 }
}

评论

4 楼 xhcat1025 2007-04-09  

firefox 下有错：

elmtObj has no properties
clearSelectOption("dept")xmlhttp.js (line 87)
parseXml(Document )xmlhttp.js (line 64)
proce()xmlhttp.js (line 46)
[Break on this error] while(elmtObj.options.length > 0){

3 楼 duzn 2007-03-31  

等回头把demo整理一下在传。
大家看看有什么问题没有。

2 楼 duzn 2007-03-30  

var xmlreq = false;	//创建一个XMLHttpRequest对象
		
function newXMLHttpRequest() {
	  if (window.XMLHttpRequest) {
	    	xmlreq = new XMLHttpRequest();	// 在非Microsoft浏览器中创建XMLHttpRequest对象
	  } else if (window.ActiveXObject) {
		try {	//通过MS ActiveX创建XMLHttpRequest
			xmlreq = new ActiveXObject("Msxml2.XMLHTTP");	// 尝试按新版InternetExplorer方法创建
		} catch (e1) {
			try {	// 创建请求的ActiveX对象失败
				xmlreq = new ActiveXObject("Microsoft.XMLHTTP");	// 尝试按老版InternetExplorer方法创建
			} catch (e2) {
				 // 不能通过ActiveX创建XMLHttpRequest
			}
		}
	  }
}
		

//发送请求函数-->业务流程
function sendXml(url, param){
	if(url.length == 0){
		return;
	}else{
		if( param == null || param == "undefined" ){
			param = "";
		}

		newXMLHttpRequest();
		try{
			xmlreq.onreadystatechange=proce;	//指定响应的函数 proce()
			xmlreq.open("GET", url, true);		//以GET方式传输数据，打开url，以异步方式
			xmlreq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			xmlreq.send(param);	//发送请求
		}catch(exception){
			alert("您要访问的资源不存在!");
		}
	}
}

//回调函数
function proce(){
	if(xmlreq.readyState == 4){		//对象状态
		if(xmlreq.status == 200 || xmlreq.status == 0){	//信息已成功返回，开始处理信息;
			alert(xmlreq.responseText);
			parseXml(xmlreq.responseXML);
		}else{
			window.alert("所请求的页面有异常");
			alert(xmlreq.statusText);
		}
	}
}
		
//解析xml文档
function parseXml(xmlDom){
	var rootNode = xmlDom.documentElement;
	if(rootNode == null){
		return false;
	}else{
		for(var node = rootNode.firstChild; node != null;  node=node.nextSibling){
			var objName = node.nodeName;
			var type = node.getAttribute("type");
			if(type == "select"){
				clearSelectOption(objName);
				var opts = node.getElementsByTagName("option");
				for(var i=0; i<opts.length; i++){
					var optName = opts[i].firstChild.data;
					var optValue = opts[i].getAttribute("value");
					addSelectOption(objName, optValue, optName);
				}
			}
		}
	}
			
}

//往下拉列表框中写数据
function addSelectOption(objName, optValue, optName){
	var elmtObj = document.getElementById(objName);
	elmtObj.options[elmtObj.length] = new Option(optName, optValue);
}

//清空下拉列表框
function clearSelectOption(objName){
	var elmtObj = document.getElementById(objName);

	while(elmtObj.options.length > 0){
		elmtObj.remove(0);
	}
	
	//elmtObj.options.length = 0;
}

function sendText(url, param){
	if(url.length == 0){
		return;
	}else{
		if( param == null || param == "undefined" ){
			param = "";
		}

		newXMLHttpRequest();
		try{
			xmlreq.onreadystatechange=getText;	//指定响应的函数 getText()
			xmlreq.open("GET", url, true);		//以GET方式传输数据，打开url，以异步方式
			xmlreq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			xmlreq.send(param);	//发送请求
		}catch(exception){
			alert("您要访问的资源不存在!");
		}
	}
}

function getText(){
	if(xmlreq.readyState == 4){		//对象状态
		if(xmlreq.status == 200 || xmlreq.status == 0){	//信息已成功返回，开始处理信息;
			alert(xmlreq.responseText);
		}else{
			window.alert("所请求的页面有异常");
			alert(xmlreq.statusText);
		}
	}
}

1 楼 cozone_柯中 2007-03-30  

支持一下。

最好放到 code里面，

或上传个demo上来