XMLHttpRequest 开发者的梦想

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想 ，因为您能够：

• 在不重新加载页面的情况下更新网页

• 在页面已加载后从服务器请求数据

• 在页面已加载后从服务器接收数据

• 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

1、如何得到对象

function createXmlHttpRequest()
{
     if(window.ActiveXObject)
     {
         return new ActiveXObject("Microsoft.XMLHTTP");
     }
     else if (window.XMLHttpRequest) // For general cases.
     {
        return new XMLHttpRequest();
     }
}

 2、如何利用该对象

function getNextLevelCat(categoryLevel,selectId)
    {
        var url="${base}/nextLevelCateAjax.action?parentCategoryId="+categoryLevel;
        //alert(url);
        xmlHttpRequest=createXmlHttpRequest();    
        xmlHttpRequest.onreadystatechange=function(){displayCategory(selectId)};
        xmlHttpRequest.open("GET",url,true);
        xmlHttpRequest.send(null);
    }
    
    function displayCategory(selectId)
    {
    	if(xmlHttpRequest.readyState == 4) 
        {        
            if(xmlHttpRequest.status == 200) 
            {
                //alert(xmlHttpRequest.responseText);
				var array = eval(xmlHttpRequest.responseText);
       			addOption(array[0],selectId,'\u8bf7\u9009\u62e9');
       			//addOption(array[1],'third','\u5168\u90E8');
       
        		// 控制标签隐藏，显示
			    initPage();
            }    
        }
    }

 

function addOption(array,id,head)
{
	var first = document.getElementById(id);
	var othershowstyle = document.getElementById('level31') ;
	var normalshowstyle = document.getElementById('level3') ;
	first.options.length=0;
	if(array.length == 0){
		othershowstyle.style.display="none";
		normalshowstyle.style.display="block";
		if(head!='')
		   {
			var newOption = document.createElement("OPTION");                                                     
		    newOption.text=head;
		    newOption.value='';                                                                       
		    first.options.add(newOption);
		    }
	}else if(array.length>0){
		//alert('array[0].siteId'+array[0].siteId+'id' +id);
		//线上id为10
		if(array[0].siteId == '9' && id == 'third'){
			//alert('成功进入！');
			othershowstyle.style.display="block";
			normalshowstyle.style.display="none";
			var htmlstring='';
			 for(i=0;i<array.length;i++)                                                            
		   	    {
				 htmlstring=htmlstring+'<input type=\"checkbox\" name=\"checkbox\" value=\"'+array[i].id+'\"/>'+trim(array[i].categoryName);
		   	     htmlstring = htmlstring +'<input type=\"text\" id=\"checkbox'+array[i].id+'\" name=\"checkboxvalue\"/><br/>';
		   	    }
			 //alert(htmlstring);
			 othershowstyle.innerHTML=htmlstring;
		}else{
			othershowstyle.style.display="none";
			normalshowstyle.style.display="block";
			   if(head!='')
			   {
				var newOption = document.createElement("OPTION");                                                     
			    newOption.text=head;
			    newOption.value='';                                                                       
			    first.options.add(newOption);
			    }
		         for(i=0;i<array.length;i++)                                                            
		   	    {
		         var newOption = document.createElement("OPTION");                                                     
		         newOption.text=trim(array[i].categoryName);                                                                   
		         newOption.value=array[i].id;                                                                       
		         first.options.add(newOption);                                                                       
		   	     }
		}
	}
		   
}