Ajax实现无刷新级联菜单(使用mootools)

使用了mootools Ajax的方法,不过其他的还是没有改成它封装好的方法,第一次用 mootools将就一下吧 >.<!!

<script type="text/javascript" src="../jscript/mootools-release-1.11.js"></script>
<script type="text/javascript">
//Ajax-------------------------------------
	var myAjax;
	function sendRequest(url){
		myAjax = new Ajax(url,{method: 'post',onComplete:updateList});
		//设置Header,便于后台区分请求的类型
		//当捕捉到Ajax请求后需要设置response.setContentType("text/xml")
		//否者会出现抓取后台请求的XML文件为空的现象
		myAjax.setHeader('RequestType','ajax');
		myAjax.request();
	}
	
	function refreshList() {
        var section = document.getElementById("触发的下拉菜单ID").value;         
        if(section == "" ) {
          clearList();
          return;
        }
        var url = "调用的后台链接" + section;           
           sendRequest(url);
     }

     function updateList(txt,xml) {
        clearList();
        //alert(xml.xml);
        var product = document.getElementById("要动态出现结果的菜单ID"); 
        var results = xml.getElementsByTagName("xml取的TagName");
        var option = null;
        for(var i = 0; i < results.length; i++) {
          option = document.createElement("option");
          option.value=personId[i].firstChild.nodeValue;
          option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
          product.appendChild(option);
        }
     }

     function clearList() {
        var product = document.getElementById("要动态出现结果的菜单ID");
        while(product.childNodes.length > 0) {
          product.removeChild(product.childNodes[0]);
        }
     }
</script>

 

你可能感兴趣的:(JavaScript,Ajax,xml,mootools)