原生AJAX 实现级联select

由于是在客户上的框架上做开发,因为是比较老的框架,ajax框架也是没有的,只有自己手写了.现在写起来还有点问题的.
主要还是封装获取XMLHttpRequest对象,应用的时候直接调用就可以了.

//实现ajax
var http_request = false;
function send_request(url,poststr,processRequest) {//初始化、指定处理函数、发送请求的函数
	  http_request = false;
	  //开始初始化XMLHttpRequest对象
	  if(window.XMLHttpRequest) { //Mozilla 浏览器
	   http_request = new XMLHttpRequest();
	   if (http_request.overrideMimeType) {//设置MiME类别
	    http_request.overrideMimeType('text/xml');
	   }
	  }
	  else if (window.ActiveXObject) { // IE浏览器
	   try {
	    http_request = new ActiveXObject("Msxml2.XMLHTTP");
	   } catch (e) {
	    try {
	     http_request = new ActiveXObject("Microsoft.XMLHTTP");
	    } catch (e) {}
	   }
	  }
	  if (!http_request) { // 异常，创建对象实例失败
	   window.alert("不能创建XMLHttpRequest对象实例.");
	   return false;
	  }
	  http_request.onreadystatechange = processRequest;
	  // 确定发送请求的方式和URL以及是否同步执行下段代码
	  http_request.open("POST", url, false);
	  http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	  http_request.send(poststr);
}

下面是父select和子select的代码

<select name="channelId" onchange="getSections(this,'sectionId');">
	<option value="" >无</option>
	<c:if test="${channels!=null}" >
	<c:forEach items='${channels}' var='cc'>
	<option value="<bean:write name="cc" property="channelId" />" ><c:out value='${cc.channelName}' escapeXml="false"/>
</option>
	</c:forEach>
	</c:if>
</select>
<select name="sectionId" id="sectionId">
     <option value="" >无</option>
</select>

父select 改变时执行的JS:

  
//获取频道下的栏目
function getSections(o,s){
 	var sectionId=document.getElementById(s);
	 if(o.value!=''){
		send_request('<%=request.getContextPath()%>/itv/voteAction.do?act=getSectionsBychannelId','channelId='+o.value,setSections);
	 }else{
	 	sectionId.options.length = 0;
	 	var varItem = new Option('无', '');  
	 	sectionId.options.add(varItem);     
	 }
 } 

后台代码:

public ActionForward getSectionsBychannelId(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) throws IOException {
		log.debug("channelId获取sections");
		VoteForm voteForm = (VoteForm) form;
		response.setContentType("text/html;charset=UTF-8");    
        String channelId = request.getParameter("channelId"); //获取参数中的值
        sectionManager = (SectionManagerImpl) SpringWebUtils.getApplicationContext(request).getBean("sectionManager");
        List sections=sectionManager.getSectionsBychannelId(Long.valueOf(channelId));
        //组装栏目选项 
        StringBuffer results = new StringBuffer("<sections>");    
        for (int i = 0; i < sections.size(); i++) {
			Section s=(Section)sections.get(i);
			results.append("<section");  
			results.append(" id=\""+s.getSectionId()+"\"");
			results.append(" sectionName=\""+s.getSectionName()+"\"");
			results.append(" />");  
		}
        results.append("</sections>");
        response.setContentType("text/xml;");    
        PrintWriter pw = response.getWriter();      
        pw.print(results.toString());    
        pw.flush();    
        pw.close();    
		return null;
	}

将栏目列表防止到子select里面:

function setSections(data){
 	var sectionId=document.getElementById('sectionId');
 	sectionId.options.length = 0;
	 if (http_request.readyState == 4) { // 判断对象状态
	    if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
	       var sections=http_request.responseXML.getElementsByTagName('section');
	       if(sections.length!=0){
		       for(var j=0;j<sections.length;j++){
		       	  var option=new Option(sections[j].getAttribute('sectionName'),sections[j].getAttribute('id'));
		       	  sectionId.options.add(option);
		     	}
	     	}
	     	else{
	     		var varItem = new Option('无', '');  
	 			sectionId.options.add(varItem);
	     	}
	    } else { //页面不正常
	       alert("您所请求的页面有异常。");
	    }
	 }
}