`
duzn
  • 浏览: 24273 次
社区版块
存档分类
最新评论

ajax简单级联菜单设计

    博客分类：
  • ajax
AjaxMicrosoftXMLFirefox浏览器 
阅读更多

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上来

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ajax 实现级联菜单

    在实现Ajax级联菜单时，首先需要使用JavaScript处理用户的交互事件，如点击或选择某个选项。通常，我们会为相关元素添加事件监听器，当用户触发特定行为时，执行相应的函数。 3. **XMLHttpRequest对象**： ...

    用AJAX实现的级联菜单

    在网页设计中，级联菜单（Cascading Menu）是一种常见的交互元素，它允许用户通过层级结构来选择或浏览选项。...通过学习和分析这些代码，我们可以加深对AJAX级联菜单实现的理解，并将其应用到自己的项目中。

    Ajax-级联菜单

    在实现Ajax级联菜单时，通常涉及以下几个关键知识点： 1. **JavaScript/jQuery**：JavaScript是实现Ajax功能的主要语言，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。使用jQuery...

    级联菜单 动态级联菜单

    动态级联菜单的实现可以通过多种方式，例如使用javascript、JQuery、Ajax等技术。其中，使用javascript和服务器端脚本结合的方式是最为常见的。 在上面的代码中，我们可以看到使用了VBScript作为服务器端脚本语言，...

    AJAX实例的级联菜单

    在AJAX级联菜单中，用户通常会选择一个主类别，然后基于这个选择，相关的子类别会即时地在下一个下拉框中加载，无需页面刷新。这种交互方式提供了流畅的用户体验，提高了网页的响应速度和效率。 在给定的文件中，...

    ajax实现级联菜单的类子

    7. **响应式设计**：确保级联菜单在不同设备和屏幕尺寸上都能正常工作，考虑触摸事件和移动设备的适配。 8. **性能优化**：如果数据量较大，可以考虑分页加载或者懒加载，只在用户需要时才加载子菜单，降低初始页面...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...

    Ajax实现级联菜单

    非常详细的一个级联菜单,很适合刚学ajax的朋友! 大家不懂的发送邮件给我,白天都在线! /** * js文件说明：实现 分公司--&gt;支公司--&gt;代理机构 三级下拉级联菜单 * 作者：朱亮&lt;/p&gt; * 版本： 1.0&lt;/p&gt; * 修改历史&lt;/p&gt; ...

    运用ajax+jsp+servlet实现三级级联菜单

    在这个案例中，我们探讨如何运用AJAX、JSP和Servlet技术来实现一个三级级联菜单。 **AJAX (Asynchronous JavaScript and XML)** 是一种在不刷新整个网页的情况下，与服务器交换数据并更新部分网页的技术。它通过...

    异步级联菜单脚本示例

    在IT领域，异步级联菜单是一种常见的交互设计，它常用于网站或应用程序的导航，尤其是在数据层次结构复杂的情况下。这种菜单系统允许用户逐步选择，每一级的选择会影响到下一级的选项，形成一种“级联”效果。在这个...

    Ajax (jQuery) 全国城市三级级联菜单插件

    jQuery在这个过程中起到了桥梁的角色，它封装了复杂的Ajax调用，如`$.ajax()`或`$.get()`、`$.post()`等方法，使得创建级联菜单变得更加简单。例如，我们可以使用`$.getJSON()`来获取JSON格式的城市数据，然后使用...

    Ajax级联菜单,通过dwr框架实现省份城市级联效果

    在这个特定的场景中，我们利用Ajax技术和Direct Web Remoting（DWR）框架来创建一个动态的省份城市级联菜单。这个功能能够提升用户体验，因为它减少了用户手动刷新页面的需求，提供了流畅的交互。 首先，我们需要...

    js加html编写的级联菜单

    级联菜单（Cascading Menu）是Web开发中常见的交互元素，主要用于呈现具有层次结构的数据。在本案例中，我们讨论的是使用JavaScript和HTML技术实现的级联菜单，且该菜单能够与数据库进行交互，动态地从数据库中读取...

    java实现Ajax级联菜单

    在IT行业中，级联菜单（Cascading Menu）是一种常见的用户界面元素，它允许用户通过多级选择来筛选或导航到特定的信息。在本案例中，我们关注的是如何使用Java和Ajax技术来实现一个二级联动的菜单。Ajax，即...

Magicbox
Global site tag (gtag.js) - Google Analytics