Ajax 三级联动,处理xml格式数据

前端之家收集整理的这篇文章主要介绍了Ajax 三级联动,处理xml格式数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
前台
<script type="text/javascript">
	var xmlHttp;
	function createXMLHttpRequest(){
		if(window.XMLHttpRequest){
			xmlHttp = new XMLHttpRequest();
		}else if(window.ActiveXObject){
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	function refreshModelList(){
		var modelYear = document.getElementById("modelYear").value;
		var make = document.getElementById("make").value;
		if(modelYear == "" || make == ""){
			clearModelList();
			return;
		}
			//创建XMLHttpRequest对象
		createXMLHttpRequest();
		var url = "<%=request.getContextPath()%>/servlet/RefreshModelListServlet?"+createQueryString(modelYear,make);
		xmlHttp.onreadystatechange = handleStateChange;
		xmlHttp.open("get",url,true);
		xmlHttp.send();
	}
	function handleStateChange(){
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200){
				updateModelList();
			}
		}
	}
	function updateModelList(){
			//首先清除ModelList列表框
		clearModelList();
		var models = document.getElementById("models");
		var results = xmlHttp.responseXML.getElementsByTagName("model");
		var option = null;
		for(var i = 0; i < results.length; i++){
			option = document.createElement("option");
			option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
			models.appendChild(option);
		}
	}
	function createQueryString(modelYear,make){
		return "modelYear="+modelYear+"&make="+make+"&ts="+(new Date().getTime());
	}
	function clearModelList(){
		var models = document.getElementById("models");
		while(models.length > 0){
			models.removeChild(models.childNodes[0]);
		}
	}
	
	
</script>
  </head>
  <body>
    <h1>Select Model Year and Make</h1>
    <span style="font-weight: bold;">Model Year:</span>
    <select id="modelYear" onchange="refreshModelList()">
    	<option value="">Select One</option>
    	<option value="2006">2006</option>
    	<option value="1995">1995</option>
    	<option value="1985">1985</option>
    	<option value="1970">1970</option>
    </select>
    <br /> <br />
    <span style="font-weight: bold;">Make:</span>
    <select id="make" onchange="refreshModelList()">
    	<option value="">Select One</option>
    	<option value="Chevrolet">Chevrolet</option>
    	<option value="Dodge">Dodge</option>
    	<option value="Pontiac">Pontiac</option>
    </select>
    <br /> <br />
    <span style="font-weight: bold;">Models:</span>
     <br />
    <select id="models" size="6" style="width: 300ps">
    	<option value="">Models are Expty.</option>
    </select>
  </body>

后台

public class RefreshModelListServlet extends HttpServlet {

	private static List<MakeModelYear> availableModels = new ArrayList<MakeModelYear>();

	public void init() throws ServletException {
		availableModels.add(new MakeModelYear(2006,"Dodge","Charger"));
		availableModels.add(new MakeModelYear(2006,"Magnum"));
		availableModels.add(new MakeModelYear(2006,"Ram"));
		availableModels.add(new MakeModelYear(2006,"Viper"));
		availableModels.add(new MakeModelYear(1995,"Avenger"));
		availableModels.add(new MakeModelYear(1995,"Intrepid"));
		availableModels.add(new MakeModelYear(1995,"Neon"));
		availableModels.add(new MakeModelYear(1995,"Spirit"));
		availableModels.add(new MakeModelYear(1985,"Aries"));
		availableModels.add(new MakeModelYear(1985,"Dayona"));
		availableModels.add(new MakeModelYear(1985,"Diplomat"));
		availableModels.add(new MakeModelYear(1985,"Omni"));
		availableModels.add(new MakeModelYear(1970,"Challenger"));
		availableModels.add(new MakeModelYear(1970,"Charger"));
		availableModels.add(new MakeModelYear(1970,"Coronet"));
		availableModels.add(new MakeModelYear(1970,"Dart"));
		
		availableModels.add(new MakeModelYear(2006,"Chevrolet","Colorado"));
		availableModels.add(new MakeModelYear(2006,"Corvette"));
		availableModels.add(new MakeModelYear(2006,"Equinox"));
		availableModels.add(new MakeModelYear(2006,"Monte Carlo"));
		availableModels.add(new MakeModelYear(1995,"Beretta"));
		availableModels.add(new MakeModelYear(1995,"Camaro"));
		availableModels.add(new MakeModelYear(1995,"Cavalier"));
		availableModels.add(new MakeModelYear(1995,"Lumina"));
		availableModels.add(new MakeModelYear(1985,"Cavalier"));
		availableModels.add(new MakeModelYear(1985,"Chevette"));
		availableModels.add(new MakeModelYear(1985,"Citation II"));
		availableModels.add(new MakeModelYear(1985,"Bel Air"));
		availableModels.add(new MakeModelYear(1970,"Caprice"));
		availableModels.add(new MakeModelYear(1970,"Chevelle"));
		availableModels.add(new MakeModelYear(1970,"Monte Carlo"));
		availableModels.add(new MakeModelYear(1970,"Celebrity"));
		
		availableModels.add(new MakeModelYear(2006,"Pontiac","G6"));
		availableModels.add(new MakeModelYear(2006,"Grand Prix"));
		availableModels.add(new MakeModelYear(2006,"Solstice"));
		availableModels.add(new MakeModelYear(2006,"Vibe"));
		availableModels.add(new MakeModelYear(1995,"Bonneville"));
		availableModels.add(new MakeModelYear(1995,"Grand Am"));
		availableModels.add(new MakeModelYear(1995,"Grand Prix"));
		availableModels.add(new MakeModelYear(1995,"Firebird"));
		availableModels.add(new MakeModelYear(1985,"6000"));
		availableModels.add(new MakeModelYear(1985,"Fiero"));
		availableModels.add(new MakeModelYear(1985,"Grand Prix"));
		availableModels.add(new MakeModelYear(1985,"Parisienne"));
		availableModels.add(new MakeModelYear(1970,"Catalina"));
		availableModels.add(new MakeModelYear(1970,"GTO"));
		availableModels.add(new MakeModelYear(1970,"LeManas"));
		availableModels.add(new MakeModelYear(1970,"Temppest"));
	}

	public void doGet(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException {

		response.setContentType("text/xml;charset=UTF-8");
		PrintWriter out = response.getWriter();
		int modelYear = Integer.parseInt(request.getParameter("modelYear"));
		String make = request.getParameter("make");

		StringBuffer results = new StringBuffer("<models>");
		MakeModelYear availableModel = null;
		Iterator<MakeModelYear> it = availableModels.iterator();
		while(it.hasNext()){
			availableModel = it.next();
			if(availableModel.getModelYear() == modelYear && availableModel.getMake().equals(make)){
				results.append("<model>");
				results.append(availableModel.getModel());
				results.append("</model>");
			}
		}
		results.append("</models>");
		out.println(results.toString());
		out.close();
	}

	public void doPost(HttpServletRequest request,IOException {

		this.doGet(request,response);
	}

}

原文链接:https://www.f2er.com/ajax/164504.html

猜你在找的Ajax相关文章