Ajax裸奔+XML传递数据-优快云博客

页面代码

<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" onchange='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://IP/examples/aa.xml 可以改成是jsp或者servlet，通过out.println或者PrintWrite.out 回写。