ajax learn

 

< HTML >
< HEAD >
<% ... @ page   
language="java"   errorPage="/ErrorPage.jsp"
contentType="text/html; charset=GBK"
pageEncoding="GBK" %>


< LINK  href ="<%=request.getContextPath()%>/include/default.css"  rel ="stylesheet"  type ="text/css" >
< TITLE > 营销记录统计 </ TITLE >
< SCRIPT  language ="JavaScript" > ...

    function send_request() ...{//初始化、指定处理函数、发送请求的函数
        
        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浏览器
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (!http_request) ...{ // 异常，创建对象实例失败
            window.alert("不能创建XMLHttpRequest对象实例.");
            return false;
        }
        
        http_request.onreadystatechange = function()...{processRequest_return()};
        
        
        // 确定发送请求的方式和URL以及是否同步执行下段代码
        http_request.open("GET", "http://10.120.32.152:8080/examples/aa.xml", false);
        http_request.send(null);
    }
     function processRequest_return() ...{
        //alert("=="+http_request.status);
        if (http_request.readyState == 4) ...{ // 判断对象状态
            if (http_request.status == 200) ...{ // 信息已经成功返回，开始处理信息

                    // var objXml = http_request.responseXML;
                    // var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
                    //xmlDoc.async=false; 
                    //xmlDoc.load(objXml); 
                    
                    //var xmlRoot = xmlDoc.documentElement;
                    var students = http_request.responseXML.getElementsByTagName("student"); 
    
                     var cpbm="";
                     var cpmc="";
                     var temp="<select name="chanpin2" style=" width: 125px" οnchange='javascript:document.form1.cpbm.value=this.value;'>";
                     temp+="<option value=''>请选择产品</option>";
                     for (var i = 0 ; i <students.length;i++)...{
                var stud = students[i]; //得一个stutdent结点
                var name = stud.getElementsByTagName("sname")[0].firstChild.data; //取结点里的数据
                var gre = stud.getElementsByTagName("gre")[0].firstChild.data; 
                var tse = stud.getElementsByTagName("tse")[0].firstChild.data; 
                         //cpbm=cpxl[i].childNodes[0].text;
                         cpmc=name + "=" + tse;
                         temp+="<option value="+gre+">"+cpmc+"</option>";
                     }
                    temp+="</select>";
                    document.getElementById("td2").innerHTML=temp;

         
            } else ...{ //页面不正常
                alert(http_request.status);
                alert("您所请求的页面有异常。");
            }
        }
    }
</ SCRIPT >
</ HEAD >
< BODY  leftMargin =0  topMargin =0  MARGINWIDTH =0  MARGINHEIGHT =0 >

< FORM  name =form1  method =post  action ="" >


< br >
< TABLE  WIDTH ="60%"  border ="0"  cellpadding ="0"  cellspacing ="1"   >
       < TR  BGCOLOR ="#FFFFFF"  height =20 >
         < TD  ALIGN ="right"  width =25% > 产品大类 </ TD >
         < td  width =25% >                                      
            
             < select  name ="chanpin1"  style =" width: 125px"  onchange ="send_request();" >
                         < OPTION  value ="" > 请选择产品 </ OPTION >
                         < OPTION  value ="00" > ————— </ OPTION >
                         < OPTION  value ="4" > 新产品 </ OPTION >
                         < OPTION  value ="5" > 重点推荐 </ OPTION >
                         < OPTION  value ="6" > 推荐产品 </ OPTION >
                 </ select >
                 < input  type ="hidden"  name ="cpbm"  value ="" >
             </ TD >
             < TD  ALIGN ="right"  width =20% > 产品小类 </ TD >
             < td  id ="td2"  width =30% >                                      
             < select  name ="chanpin2"  style =" width: 125px" >
                         < OPTION  value ="" > 请选择产品 </ OPTION >
                 </ select >
             </ TD >
      
       </ TR >
</ TABLE >
</ Form >

</ BODY >
</ HTML >

 

aa.xml：

 

<? xml version="1.0" ?>  

< classmates >  
   < student >  
      < sid > 1 </ sid >  
      < sname > name1 </ sname >  
      < gre > 1700 </ gre >  
      < tse > 121 </ tse >  
   </ student >  
   < student >  
      < sid > 2 </ sid >  
      < sname > name2 </ sname >  
      < gre > 1800 </ gre >  
      < tse > 122 </ tse >  
   </ student >  
   < student >  
      < sid > 3 </ sid >  
      < sname > name3 </ sname >  
      < gre > 1900 </ gre >  
      < tse > 123 </ tse >  
   </ student >  
</ classmates >  

 

当数据源是数据库的时候，http://10.120.32.152:8080/examples/aa.xml 可以改成是jsp或者servlet，通过out.println或者PrintWrite.out 回写。