使用AJAX技术动态生成XML表单实例-优快云博客

利用AJAX技术解析XML，动态的生成表格。

1、编写servlet。这里是将XML放在这里面。而不是读XML文件。比较麻烦。

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 DynamicInfoServlet 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("<properties>");
		out.println("<property>");
		out.println("<address>812 Gwyn Ave</address>");
		out.println("<price>$100,000</price>");
		out.println("<comments><Quiet,serene neighborhood /comments>");
		out.println("</property>");
		out.println("<property>");
		out.println("<address> 98302 County RD 113");
		out.println("<price>$110,000</price>");
		out.println("<comments>Close to schools,shopping,entertainment</comments>");
		out.println("</property>");
		out.println("</properties");
		out.flush();
		out.close();
	}

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

}

2、编写html代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX应用实例三</title>
<script type="text/javascript">
	var xhr;
	function createXMLHttpRequest()
	{
		if(window.ActiveXObject)
			{
				xhr = new ActiveXObject("Microsoft.XMLHttp");
			}
		else if(window.XMLHttpRequest)
			{
				xhr = new XMLHttpRequest();
			}
	}
	function doSearch()
	{	
		createXMLHttpRequest();
		xhr.onreadystatechange = handleResponse;
		xhr.open("GET","dynamicInfo",true);
		xhr.send(null);
	}
	function handleResponse()
	{
		if(xhr.readyState == 4)
			{
				if(xhr.status == 200)
					{	
						clearPreviousResults();
						parseResults();
					}
			}
	}
	function parseResults()
	{	
		
		var results = xhr.responseXML;
		var property = null;
		var address = "";
		var price = "";
		var comments = "";
		var properties = results.getElementsByTagName("property");
		for(var i = 0; i<properties.length;i++)
			{
				property = properties[i];
				address = property.getElementsByTagName("address")[0].firstChild.nodeValue;
				price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
				comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
				addTableRow(address,price,comments);
			}
		var header = document.createElement("h2");
		var headerText = document.createTextNode("Results:");
		header.appendChild(headerText);
		document.getElementById("header").appendChildNode(header);
		document.getElementById("resultTable").setAttribute("border","1");
	}
	
	function addTableRow(address,price,comments)
	{		
			var row = document.createElement("tr");
			var cell = createCellwithText(address);
			row.appendChild(cell);
			
			cell = createCellwithText(price);
			row.appendChild(cell);
			
			cell = createCellwithText(comments);
			row.appendChild(cell);
			
			document.getElementById("resultBody").appendChild(row);
	}
	
	function  createCellwithText(text)
	{
		var cell = document.createElement("td");
		var textNode = document.createTextNode(text);
		cell.appendChild(textNode);
		return cell;
	}
	
	function clearPreviousResults()
	{
		var header = document.getElementById("header");
		if(header.hasChildNodes())
			{
				header.removeChild(header.childNodes[0]);
			}
		resultBody = document.getElementById("resultBody");
		while(resultBody.childNodes.length>0)
			{
				resultBody.removeChild(resultBody.childNodes[0]);
			}
	}
</script>

</head>
<body>
	<form action = "#">
		<h1>Search Real Info</h1>
		<select name ='minValue'>
			<option value = "50000">$50,000</option>
			<option value = "100000">$100,000</option>
			<option value = "150000">$150,000</option>
		</select>
		to
		<select name = 'maxValue'>
			<option value = '100000'>$100,000</option>
			<option value = '150000'>$150,000</option>
			<option value = '200000'>$200,000</option>
		</select>
		<input type = "button" value = "Search" onclick = "doSearch();"/>
	</form>
	<span id = "header">
		
	</span>
	<table id = "resultTable" width = "75%" border = "0">
		<tbody id = "resultBody" >
		
		</tbody>
	</table>
</body>
</html>

注意在这里面插入表格，首先得从小的开始。将小的东西加入到大的东西上。调用函数，不要在一个函数内将所有代码写完，分部分写，方便查错。