第一种 index.jsp读取data.xml <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>Ajax的三种传值方式[1]读取xml文本</title> </head> <body> <select id="opt" > </select> <input id="btn" type="button" onclick="myClick()" value="加载数据" /> </body> <mce:script type="text/javascript"><!-- //获取XMLHTTPRequest对象 function myClick(){ var myRequest = getXMLHTTPRequest(); if(myRequest){ myRequest.onreadystatechange =function(){ //状态为4时表示响应消息成功返回 if(myRequest.readyState==4){ alert(myRequest.responseXML.xml); //获取XML DOM对象 var xml=myRequest.responseXML.documentElement; alert(xml.childNodes[0].childNodes[0].text); alert(xml.childNodes[0].childNodes[1].text); var select=document.getElementById("opt"); var htm=""; htm="<select id='opt'><option>"+xml.childNodes[0].childNodes[0].text+"</option>"; htm+="<option>"+xml.childNodes[0].childNodes[1].text+"</option></select>" select.outerHTML=htm; } } //同步发送HTTP请求消息 myRequest.open("GET","data.xml",false); //向服务器端发送空的请求内容 myRequest.send(null); } } function getXMLHTTPRequest(){ return new ActiveXObject("Microsoft.XMLHTTP"); } // --></mce:script> </html> data.xml <?xml version="1.0" encoding="UTF-8"?> <data> <value1>bike</value1> <value2>car</value2> </data> 第二种 index2.jsp读取data2.html <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>Ajax的三种传值方式[2]读取Html文本</title> </head> <body> <select id="opt" /><input id="btn" type="button" value="加载" onclick="myClick()"><br> </body> <mce:script type="text/javascript"><!-- function getXMLHTTPRequest(){ //创建XMLHTTPRequest对象 return new ActiveXObject("Microsoft.XMLHTTP"); } function myClick(){ var myRequest=getXMLHTTPRequest(); if(myRequest){ //设置回调函数 myRequest.onreadystatechange=function(){ //状态为4表示响应消息成功返回 if(myRequest.readyState==4){ //收到响应后的处理 var html=myRequest.responseTEXT; alert(html); var select=document.getElementById("opt"); select.outerHTML="<select id='opt'>"+html+"</select>"; } } //异步发送HTTP请求 myRequest.open("POST","data2.html",true); //向服务端发送空数据 myRequest.send(null); } } // --></mce:script> </html> data2.html <option>clothing</option> <option>shoes</option> 第三种 index3.jsp读取data3.js <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>Ajax的三种传值方式[3]读取js文本</title> </head> <body> <select id='opt' /><input type="button" id="btn" value="加载" onclick="myClick()"/> </body> <mce:script type="text/javascript"><!-- function myClick(){ var myRequest = new ActiveXObject("Microsoft.XMLHTTP"); if(myRequest){ myRequest.onreadystatechange=function(){ if(myRequest.readyState==4){ var javascript=myRequest.responseText; alert(javascript); var select=document.getElementById("opt"); eval(javascript); var html="<select id='opt'><option>"+aList[0]+"</option>"; html+="<option>"+aList[1]+"</option></select>"; select.outerHTML=html; } } myRequest.open("POST","data3.js",false); myRequest.send(null); } } // --></mce:script> </html> data3.js var aList=new Array; aList[0]='basketball'; aList[1]='football';