AJAX技术（2）

最新推荐文章于 2022-09-07 23:18:36 发布

NonShan

最新推荐文章于 2022-09-07 23:18:36 发布

阅读量539

点赞数

分类专栏： java学习文章标签： ajax

本文链接：https://blog.csdn.net/NonShan/article/details/40563307

版权

java学习专栏收录该内容

17 篇文章 1 订阅

订阅专栏

利用AJAX技术来对页面做一个动态的展示。当用户点击不同的按钮时，出现不同的内容。

当点击view all listed status 时，出现所有的州。

当点击view all Listed Northern Status 时，出现南部的州。

stateInfo.html页面代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX应用实例二</title>
<script type="text/javascript">
	var xmlHttpRequest;
	var requestType;
	function createXMLHttpRequest(){
		if(window.ActiveXObject)
			{
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //ie浏览器
			}
		else
			{
				xmlHttpRequest = new XMLHttpRequest();//非ie浏览器
			}
	}
	function startRequest(requestString){
		requestType = requestString;
		createXMLHttpRequest();
		xmlHttpRequest.open("GET","stateInfo",true);
		xmlHttpRequest.send(null);
		xmlHttpRequest.onreadystatechange =  process;
	}
	function process(){
		if(xmlHttpRequest.readyState == 4){	
			if(xmlHttpRequest.status == 200){
				if(requestType == "all"){		
					listAllStates();
				}
				if(requestType == "north"){
					listNorthStates();
				}
			}
		}
	}
	function listAllStates(){
		var xmlDoc = xmlHttpRequest.responseXML;
		var states = xmlDoc.getElementsByTagName("state");
		var displayString = "All States:";
		for(var i = 0;i<states.length;i++){
			displayString +="<br>-"+states[i].childNodes[0].nodeValue;			
		}
		document.getElementById("displayStates").innerHTML =  displayString;
		
	}
	function listNorthStates(){
		var xmlDoc = xmlHttpRequest.responseXML;
		var northNode = xmlDoc.getElementsByTagName("north")[0];
		var states = northNode.getElementsByTagName("state");
		var displayString = "North States:";
		for(var i=0;i<states.length;i++){
			displayString +="<br>-"+states[i].childNodes[0].nodeValue;
		}
		document.getElementById("displayStates").innerHTML = displayString;
		
	}
</script>
</head>
<body>
<center>
	<form action= '#'  method = 'post' >
	<input type='button' value = 'View All Listed Status' onclick = "startRequest('all');"> <br>
	<input type='button' value = 'View All Listed Northern Status' onclick ="startRequest('north');"><br>
	<div id = 'displayStates'></div>
	</form>
</center>

</body>
</html>

servlet部分代码：

StaeInfoServlet.java

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class StateInfoServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setContentType("text/xml");
		PrintWriter out = response.getWriter();
		out.println("<?xml version = '1.0' encoding = 'UTF-8'?>");
		out.println("<states>");
		out.println("<north>");
		out.println("<state>Minnesota</state>");
		out.println("<state>Iowa</state>");
		out.println("<state>North Dakota</state>");
		out.println("</north>");
		out.println("<south>");
		out.println("<state>Texas</state>");
		out.println("<state>Oklahoma</state>");
		out.println("<state>Louisiana</state>");
		out.println("</south>");
		out.println("<east>");
		out.println("<state>New York</state>");
		out.println("<state>North Carolina</state>");
		out.println("<state>Massachusetts</state>");
		out.println("</east>");
		out.println("<west>");
		out.println("<state>California</state>");
		out.println("<state>Oregon</state>");
		out.println("<state>Nevada</state>");
		out.println("</west>");
		out.println("</states>");
		out.flush();
		out.close();
	}

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