Ajax Examples

最新推荐文章于 2021-08-06 17:31:04 发布

songuooo

最新推荐文章于 2021-08-06 17:31:04 发布

阅读量1.1k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/songuooo/article/details/8273111

版权

Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

`1 Performing Validation`

(1) validation.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Using Ajax for validation</title>
</head>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
	if (window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if (window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

function validate() {
	createXMLHttpRequest();
	var date = document.getElementById("birthDate");
	var url = "ValidationServlet?birthDate=" + escape(date.value);
	xmlHttp.open("GET", url, true);
	xmlHttp.onreadystatechange = callback;
	xmlHttp.send(null);
}

function callback() {
	if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
			var mes = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
			var val = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
			setMessage(mes, val);
		}
	}
}

function setMessage(message, isValid) {
	var messageArea = document.getElementById("dateMessage");
	var fontColor = "red";
	if (isValid == "true") {
		fontColor = "green";
	}
	//document.write("hhaah");
	messageArea.innerHTML = "<font color=" + fontColor + ">"	+ message + " </font>";
}
</script>

<body>
	<h1>Ajax Validation Example</h1>
	Birth date:
	<form action="#">
		<input type="text" size="10" id="birthDate" οnblur="validate()" />
	</form>
	<div id="dateMessage"></div>

</body>
</html>

(2) servlet ValidationServlet.java

package ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.ParseException;
import java.text.SimpleDateFormat;

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

@WebServlet("/ValidationServlet")
public class ValidationServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	public ValidationServlet() {
	}
	
	/** Handles the HTTP <code>GET</code> method.
	* @param request servlet request
	* @param response servlet response
	*/
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		PrintWriter out = response.getWriter();
		boolean passed = validateDate(request.getParameter("birthDate"));
		response.setContentType("text/xml");
		response.setHeader("Cache-Control", "no-cache");
		String message = "You have entered an invalid date.";
		
		if (passed){
			message = "You have entered a valid date.";
		}
		out.println("<response>");
		out.println("<passed>" + Boolean.toString(passed) + "</passed>");
		out.println("<message>" + message + "</message>");
		out.println("</response>");
		out.close();
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
	}
	
	/**
	* Checks to see whether the argument is a valid date.
	* A null date is considered invalid. This method
	* used the default data formatter and lenient parsing.
	*
	* @param date a String representing the date to check
	* @return message a String representing the outcome of the check
	*/
	protected boolean validateDate(String date) {
		boolean isValid = true;
		if (date != null) {
			SimpleDateFormat formatter = new SimpleDateFormat("MM/dd/yyyy");
			try {
				formatter.parse(date);
			} catch (ParseException e) {
				System.out.println(e.toString());
				isValid = false;
			}
		} else {
			isValid = false;
		}
		return isValid;
	}

}

result:

2 Reading Response Headers

(1) readingResponseHeaders.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Reading Response Headers</title>
<script type="text/javascript">
	var xmlHttp;
	var requestType = "";
	function createXMLHttpRequest() {
		if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} else if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
	}
	function doHeadRequest(request, url) {
		requestType = request;
		createXMLHttpRequest();
		xmlHttp.onreadystatechange = handleStateChange;
		xmlHttp.open("HEAD", url, true);
		xmlHttp.send(null);
	}
	function handleStateChange() {
		if (xmlHttp.readyState == 4) {
			if (requestType == "allResponseHeaders") {
				getAllResponseHeaders();
			} else if (requestType == "lastModified") {
				getLastModified();
			} else if (requestType == "isResourceAvailable") {
				getIsResourceAvailable();
			}
		}
	}
	function getAllResponseHeaders() {
		alert(xmlHttp.getAllResponseHeaders());
	}
	function getLastModified() {
		alert("Last Modified: " + xmlHttp.getResponseHeader("Last-Modified"));
	}
	function getIsResourceAvailable() {
		if (xmlHttp.status == 200) {
			alert("Successful response");
		} else if (xmlHttp.status == 404) {
			alert("Resource is unavailable");
		} else {
			alert("Unexpected response status: " + xmlHttp.status);
		}
	}
</script>
</head>

<body>
	<h1>Reading Response Headers</h1>
	<a href="javascript:doHeadRequest('allResponseHeaders','readingResponseHeaders.xml');">Read 	All Response Headers</a>
	<br />
	<a	href="javascript:doHeadRequest('lastModified','readingResponseHeaders.xml');">Get	Last Modified Date</a>
	<br />
	<a href="javascript:doHeadRequest('isResourceAvailable','readingResponseHeaders.xml');">Read Available Resource</a>
	<br />
	<a href="javascript:doHeadRequest('isResourceAvailable','not-available.xml');">Read	Unavailable Resource</a>

</body>
</html>

(2) readingResponseHeaders.xml

<?xml version="1.0" encoding="UTF-8"?>
<readingResponseHeaders>
</readingResponseHeaders>

result:

3 Dynamically Loading List Boxes

(1) dynamicLists.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dynamically Filling Lists</title>
<script type="text/javascript">
	var xmlHttp;
	function createXMLHttpRequest() {
		if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} else if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
	}
	function refreshModelList() {
		var make = document.getElementById("make").value;
		var modelYear = document.getElementById("modelYear").value;
		if (make == "" || modelYear == "") {
			clearModelsList();
			return;
		}
		var url = "RefreshModelList?" + createQueryString(make, modelYear)
				+ "&ts=" + new Date().getTime();
		createXMLHttpRequest();
		xmlHttp.onreadystatechange = handleStateChange;
		xmlHttp.open("GET", url, true);
		xmlHttp.send(null);
	}
	function createQueryString(make, modelYear) {
		var queryString = "make=" + make + "&modelYear=" + modelYear;
		return queryString;
	}
	function handleStateChange() {
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200) {
				updateModelsList();
			}
		}
	}
	function updateModelsList() {
		clearModelsList();
		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 clearModelsList() {
		var models = document.getElementById("models");
		while (models.childNodes.length > 0) {
			models.removeChild(models.childNodes[0]);
		}
	}
</script>
</head>
<body>
	<h1>Select Model Year and Make</h1>
	<form action="#">
		<span style="font-weight: bold;">Model Year:</span> 
		<select id="modelYear" οnchange="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" 	οnchange="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: 300px;">
		</select>
	</form>

</body>
</html>

(2) servlet RefreshModelListServlet.java

package ajax;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Iterator;

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

@WebServlet("/RefreshModelList")
public class RefreshModelList extends HttpServlet {
	private static final long serialVersionUID = 1L;

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

	public void init() {
		availableModels.add(new MakeModelYear(2006, "Dodge", "Charger"));
		availableModels.add(new MakeModelYear(2006, "Dodge", "Magnum"));
		availableModels.add(new MakeModelYear(2006, "Dodge", "Ram"));
		availableModels.add(new MakeModelYear(2006, "Dodge", "Viper"));

		availableModels.add(new MakeModelYear(1995, "Dodge", "Avenger"));
		availableModels.add(new MakeModelYear(1995, "Dodge", "Intrepid"));
		availableModels.add(new MakeModelYear(1995, "Dodge", "Neon"));
		availableModels.add(new MakeModelYear(1995, "Dodge", "Spirit"));

		availableModels.add(new MakeModelYear(1985, "Dodge", "Aries"));
		availableModels.add(new MakeModelYear(1985, "Dodge", "Daytona"));
		availableModels.add(new MakeModelYear(1985, "Dodge", "Diplomat"));
		availableModels.add(new MakeModelYear(1985, "Dodge", "Omni"));

		availableModels.add(new MakeModelYear(1970, "Dodge", "Challenger"));
		availableModels.add(new MakeModelYear(1970, "Dodge", "Charger"));
		availableModels.add(new MakeModelYear(1970, "Dodge", "Coronet"));
		availableModels.add(new MakeModelYear(1970, "Dodge", "Dart"));

		availableModels.add(new MakeModelYear(2006, "Chevrolet", "Colorado"));
		availableModels.add(new MakeModelYear(2006, "Chevrolet", "Corvette"));
		availableModels.add(new MakeModelYear(2006, "Chevrolet", "Equinox"));
		availableModels.add(new MakeModelYear(2006, "Chevrolet", "Monte Carlo"));

		availableModels.add(new MakeModelYear(1995, "Chevrolet", "Beretta"));
		availableModels.add(new MakeModelYear(1995, "Chevrolet", "Camaro"));
		availableModels.add(new MakeModelYear(1995, "Chevrolet", "Cavalier"));
		availableModels.add(new MakeModelYear(1995, "Chevrolet", "Lumina"));

		availableModels.add(new MakeModelYear(1985, "Chevrolet", "ACavalier"));
		availableModels.add(new MakeModelYear(1985, "Chevrolet", "Chevette"));
		availableModels.add(new MakeModelYear(1985, "Chevrolet", "Celebrity"));
		availableModels.add(new MakeModelYear(1985, "Chevrolet", "Citation II"));

		availableModels.add(new MakeModelYear(1970, "Chevrolet", "Bel Air"));
		availableModels.add(new MakeModelYear(1970, "Chevrolet", "Caprice"));
		availableModels.add(new MakeModelYear(1970, "Chevrolet", "Chevelle"));
		availableModels.add(new MakeModelYear(1970, "Chevrolet", "Monte Carlo"));
		
		availableModels.add(new MakeModelYear(2006, "Pontiac", "G6"));
		availableModels.add(new MakeModelYear(2006, "Pontiac", "Grand Prix"));
		availableModels.add(new MakeModelYear(2006, "Pontiac", "Solstice"));
		availableModels.add(new MakeModelYear(2006, "Pontiac", "Vibe"));

		availableModels.add(new MakeModelYear(1995, "Pontiac", "Bonneville"));
		availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Am"));
		availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Prix"));
		availableModels.add(new MakeModelYear(1995, "Pontiac", "Firebird"));

		availableModels.add(new MakeModelYear(1985, "Pontiac", "6000"));
		availableModels.add(new MakeModelYear(1985, "Pontiac", "Fiero"));
		availableModels.add(new MakeModelYear(1985, "Pontiac", "Grand Prix"));
		availableModels.add(new MakeModelYear(1985, "Pontiac", "Parisienne"));

		availableModels.add(new MakeModelYear(1970, "Pontiac", "Catalina"));
		availableModels.add(new MakeModelYear(1970, "Pontiac", "GTO"));
		availableModels.add(new MakeModelYear(1970, "Pontiac", "LeMans"));
		availableModels.add(new MakeModelYear(1970, "Pontiac", "Tempest"));

	}

	protected void processRequest(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/xml;charset=UTF-8");
		int modelYear = Integer.parseInt(request.getParameter("modelYear"));
		String make = request.getParameter("make");

		StringBuffer results = new StringBuffer("<models>");
		MakeModelYear availableModel = null;
		for (Iterator<MakeModelYear> it = availableModels.iterator(); it
				.hasNext();) {
			availableModel = it.next();
			if (availableModel.modelYear == modelYear) {
				if (availableModel.make.equals(make)) {
					results.append("<model>");
					results.append(availableModel.model);
					results.append("</model>");
				}
			}
		}
		results.append("</models>");

		response.setContentType("text/xml");
		response.getWriter().println(results.toString());
	}

	public RefreshModelList() {
		super();
	}

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		processRequest(request, response);
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
	}

	private static class MakeModelYear {
		private int modelYear;
		private String make;
		private String model;

		public MakeModelYear(int modelYear, String make, String model) {
			this.modelYear = modelYear;
			this.make = make;
			this.model = model;
		}
	}
}

result:

4 Creating an Autorefreshing Page

(1) dynamicUpdate.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Dynamic Update</title>
<script type="text/javascript">
	var xmlHttp;
	function createXMLHttpRequest() {
		if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} else if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
	}
	function doStart() {
		createXMLHttpRequest();
		var url = "DynamicUpdateServlet?task=reset";
		xmlHttp.open("GET", url, true);
		xmlHttp.onreadystatechange = startCallback;
		xmlHttp.send(null);
	}
	function startCallback() {
		if (xmlHttp.readyState == 4) {
		    if (xmlHttp.status == 200) {
			setTimeout("pollServer()", 5000);// call pollServer() after 5s, not blocked here, that is call refreshTime() immediately
			refreshTime();
		    }
		}
	}
	function pollServer() {
		createXMLHttpRequest();
		var url = "DynamicUpdateServlet?task=foo";
		xmlHttp.open("GET", url, true);
		xmlHttp.onreadystatechange = pollCallback;
		xmlHttp.send(null);
	}
	function refreshTime() {
		var time_span = document.getElementById("time");
		var time_val = time_span.innerHTML;
		var int_val = parseInt(time_val);
		var new_int_val = int_val - 1;
		if (new_int_val > -1) {
			setTimeout("refreshTime()", 1000);
			time_span.innerHTML = new_int_val;
		} else {
			time_span.innerHTML = 5;
		}
	}
	function pollCallback() {
	    if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
		    var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
		    if (message != "done") {
			var new_row = createRow(message);
			var table = document.getElementById("dynamicUpdateArea");
			var table_body = table.getElementsByTagName("tbody").item(0);
			var first_row = table_body.getElementsByTagName("tr").item(1);
			table_body.insertBefore(new_row, first_row);
			setTimeout("pollServer()", 5000);
			refreshTime();
		    }
		}
	    }
	}
	function createRow(message) {
		var row = document.createElement("tr");
		var cell = document.createElement("td");
		var cell_data = document.createTextNode(message);
		cell.appendChild(cell_data);
		row.appendChild(cell);
		return row;
	}
</script>

</head>
<body>
	<h1>Ajax Dynamic Update Example</h1>
	This page will automatically update itself:
	<input type="button" value="Launch" id="go" οnclick="doStart();" />
	<p>	Page will refresh in <span id="time">5</span> seconds.</p>
	<table id="dynamicUpdateArea" align="left">
		<tbody>
			<tr id="row0"><td></td></tr>
		</tbody>
	</table>
</body>
</html>

(2) servlet DynamicUpdateServlet.java

package ajax;

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

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

@WebServlet("/DynamicUpdateServlet")
public class DynamicUpdateServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	private int counter = 1;
	
	public DynamicUpdateServlet() {
		super();
	}

	/** Handles the HTTP <code>GET</code> method.
	* @param request servlet request
	* @param response servlet response
	*/
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		String res = "";
		String task = request.getParameter("task");
		String message = "";
		
		if (task.equals("reset")) {
			counter = 1;
		} else {
			switch (counter) {
			case 1 : message = "Steve walks on stage"; break;
			case 2 : message = "iPods rock"; break;
			case 3 : message = "Steve says Macs rule"; break;
			case 4 : message = "Change is coming"; break;
			case 5 : message = "Yes, OS X runs on Intel - has for years"; break;
			case 6 : message = "Macs will soon have Intel chips"; break;
			case 7 : message = "done"; break;
			}
			counter++;
		}
		res = "<message>" + message + "</message>";
		
		PrintWriter out = response.getWriter();
		response.setContentType("text/xml");
		response.setHeader("Cache-Control", "no-cache");
		out.println("<response>");
		out.println(res);
		out.println("</response>");
		out.close();
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
	}

}

5 Displaying a Progress Bar

(1) progressBar.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Progress Bar</title>
<script type="text/javascript">
	var xmlHttp;
	var key;
	var bar_color = 'gray';
	var span_id = "block";
	var clear = "   "
	function createXMLHttpRequest() {
		if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} else if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
	}
	function go() {
		createXMLHttpRequest();
		checkDiv();
		var url = "ProgressBarServlet?task=create";
		var button = document.getElementById("go");
		button.disabled = true;
		xmlHttp.open("GET", url, true);
		xmlHttp.onreadystatechange = goCallback;
		xmlHttp.send(null);
	}
	function goCallback() {
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200) {
				setTimeout("pollServer()", 2000);
			}
		}
	}
	function pollServer() {
		createXMLHttpRequest();
		var url = "ProgressBarServlet?task=poll&key=" + key;
		xmlHttp.open("GET", url, true);
		xmlHttp.onreadystatechange = pollCallback;
		xmlHttp.send(null);
	}
	function pollCallback() {
            if (xmlHttp.readyState == 4) {
		if (xmlHttp.status == 200) {
		    var percent_complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
		    var index = processResult(percent_complete);
		    for ( var i = 1; i <= index; i++) {
			var elem = document.getElementById("block" + i);
			elem.innerHTML = clear;
			elem.style.backgroundColor = bar_color;
			var next_cell = i + 1;
			if (next_cell > index && next_cell <= 9) {
			    document.getElementById("block" + next_cell).innerHTML = percent_complete + "%";
			}
		    }
		    if (index < 9) {
			setTimeout("pollServer()", 2000);
		    } else {
			document.getElementById("complete").innerHTML = "Complete!";
			document.getElementById("go").disabled = false;
		    }
		}
	    }
	}
	function processResult(percent_complete) {
		var ind;
		if (percent_complete.length == 1) {
			ind = 1;
		} else if (percent_complete.length == 2) {
			ind = percent_complete.substring(0, 1);
		} else {
			ind = 9;
		}
		return ind;
	}
	function checkDiv() {
		var progress_bar = document.getElementById("progressBar");
		if (progress_bar.style.visibility == "visible") {
			clearBar();
			document.getElementById("complete").innerHTML = "";
		} else {
			progress_bar.style.visibility = "visible"
		}
	}
	function clearBar() {
		for ( var i = 1; i < 10; i++) {
			var elem = document.getElementById("block" + i);
			elem.innerHTML = clear;
			elem.style.backgroundColor = "white";
		}
	}
</script>

</head>
<body>
	<h1>Ajax Progress Bar Example</h1>
	Launch long-running process:
	<input type="button" value="Launch" id="go" οnclick="go();" />
	<p>
	<table align="center">
	  <tbody>
	    <tr><td>
		<div id="progressBar"	style="padding: 2px; border: solid black 2px; visibility: hidden">
		  <span id="block1">   </span> <span id="block2">   </span>
		  <span id="block3">   </span> <span id="block4">   </span>
		  <span id="block5">   </span> <span id="block6">   </span>
		  <span id="block7">   </span> <span id="block8">   </span>
		  <span id="block9">   </span>
	        </div>
	     </td></tr>
	     <tr><td align="center" id="complete"></td></tr>
          </tbody>
	</table>

</body>
</html>

One gray block is three spaces.

The server code for this example “fakes” a long-running transaction . In a production environment, you would be creating new instances and registering them, and your client would have to ask about a specific item. For simplicity sake, we’ve omitted this and any threading code.

(2)servlet ProgressBarServlet.java

package ajax;

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

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

@WebServlet("/ProgressBarServlet")
public class ProgressBarServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	private int counter = 1;
	
	public ProgressBarServlet() {
		super();
	}

	/** Handles the HTTP <code>GET</code> method.
	* @param request servlet request
	* @param response servlet response
	*/
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		String task = request.getParameter("task");
		String res = "";
		
		if (task.equals("create")) {
			res = "<key>1</key>";
			counter = 1;
		} else {
			String percent = "";
			switch (counter) {
			case 1: percent = "10"; break;
			case 2: percent = "23"; break;
			case 3: percent = "35";break;
			case 4: percent = "51";break;
			case 5: percent = "64";break;
			case 6: percent = "73";break;
			case 7: percent = "89";break;
			case 8: percent = "100";break;
			}
			counter++;
			
			res = "<percent>" + percent + "</percent>";
		}
		PrintWriter out = response.getWriter();
		response.setContentType("text/xml");
		response.setHeader("Cache-Control", "no-cache");
		out.println("<response>");
		out.println(res);
		out.println("</response>");
		out.close();
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
	}

}

6 Creating Tooltips

(1) toolTip.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Tool Tip</title>
<script type="text/javascript">
	var xmlHttp;
	var dataDiv;
	var dataTable;
	var dataTableBody;
	var offsetEl;
	function createXMLHttpRequest() {
		if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} else if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
	}
	function initVars() {
		dataTableBody = document.getElementById("courseDataBody");
		dataTable = document.getElementById("courseData");
		dataDiv = document.getElementById("popup");
	}
	function getCourseData(element) {
		initVars();
		createXMLHttpRequest();
		offsetEl = element;
		var url = "ToolTipServlet?key=" + escape(element.id);
		xmlHttp.open("GET", url, true);
		xmlHttp.onreadystatechange = callback;
		xmlHttp.send(null);
	}
	function callback() {
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200) {
				setData(xmlHttp.responseXML);
			}
		}
	}
	function setData(courseData) {
	    clearData();
	    setOffsets();
	  var length = courseData.getElementsByTagName("length")[0].firstChild.data;
		var par = courseData.getElementsByTagName("par")[0].firstChild.data;
		var row, row2;
		var parData = "Par: " + par
		var lengthData = "Length: " + length;
		row = createRow(parData);
		row2 = createRow(lengthData);
		dataTableBody.appendChild(row);
		dataTableBody.appendChild(row2);
	}
	function createRow(data) {
		var row, cell, txtNode;
		row = document.createElement("tr");
		cell = document.createElement("td");
		cell.setAttribute("bgcolor", "#FFFAFA");
		cell.setAttribute("border", "0");
		txtNode = document.createTextNode(data);
		cell.appendChild(txtNode);
		row.appendChild(cell);
		return row;
	}
	function setOffsets() {
		var end = offsetEl.offsetWidth;
		var top = calculateOffsetTop(offsetEl);
		dataDiv.style.border = "black 1px solid";
		dataDiv.style.left = end + 15 + "px";
		dataDiv.style.top = top + "px";
	}
	function calculateOffsetTop(field) {
		return calculateOffset(field, "offsetTop");
	}
	function calculateOffset(field, attr) {
		var offset = 0;
		while (field) {
			offset += field[attr];
			field = field.offsetParent;
		}
		return offset;
	}
	function clearData() {
		var ind = dataTableBody.childNodes.length;
		for ( var i = ind - 1; i >= 0; i--) {
			dataTableBody.removeChild(dataTableBody.childNodes[i]);
		}
		dataDiv.style.border = "none";
	}
</script>

</head>
<body>
	<h1>Ajax Tool Tip Example</h1>
	<h3>Golf Courses</h3>
	<table id="courses" bgcolor="#FFFAFA" border="1" cellspacing="0" cellpadding="2" >
	<tbody>
		<tr>
			<td id="1" οnmοuseοver="getCourseData(this);"	οnmοuseοut="clearData();">Augusta National</td>
		</tr>
		<tr>
			<td id="2" οnmοuseοver="getCourseData(this);"	οnmοuseοut="clearData();">Pinehurst No. 2</td>
		</tr>
		<tr>
			<td id="3" οnmοuseοver="getCourseData(this);"	οnmοuseοut="clearData();">St. Andrews Links</td>
		</tr>
		<tr>
			<td id="4" οnmοuseοver="getCourseData(this);"	οnmοuseοut="clearData();">Baltusrol Golf Club</td>
		</tr>
	</tbody>
	</table>
	<div style="position: absolute;" id="popup">
		<table id="courseData" bgcolor="#FFFAFA" border="0" cellspacing="2" cellpadding="2" >
			<tbody id="courseDataBody"></tbody>
		</table>
	</div>

</body>
</html>

(2) servlet ToolTipServlet.java

package ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ToolTipServlet")
public class ToolTipServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	private HashMap<Integer, CourseData> courses = new HashMap<Integer, CourseData>();
	
	public ToolTipServlet() {
		super();
	}

	public void init(ServletConfig config) throws ServletException {
		CourseData augusta = new CourseData(72, 7290);
		CourseData pinehurst = new CourseData(70, 7214);
		CourseData standrews = new CourseData(72, 6566);
		CourseData baltusrol = new CourseData(70, 7392);
		courses.put(new Integer(1), augusta);
		courses.put(new Integer(2), pinehurst);
		courses.put(new Integer(3), standrews);
		courses.put(new Integer(4), baltusrol);
	}
	
	/** Handles the HTTP <code>GET</code> method.
	* @param request servlet request
	* @param response servlet response
	*/
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		Integer key = Integer.parseInt(request.getParameter("key"));
		CourseData data = courses.get(key);
		
		PrintWriter out = response.getWriter();
		
		response.setContentType("text/xml");
		response.setHeader("Cache-Control", "no-cache");
		
		out.println("<response>");
		out.println("<par>" + data.getPair() + "</par>");
		out.println("<length>" + data.getLength() + "</length>");
		out.println("</response>");
		out.close();
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
	}

	private class CourseData {
		private int pair;
		private int length;
		
		public CourseData(int pair, int length) {
			this.pair = pair;
			this.length = length;
		}
		public int getPair() {
			return pair;
		}
		public int getLength() {
			return length;
		}
	}
}

result:

7 Providing Autocomplete

(1) autoComplete.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Auto Complete</title>
<style type="text/css">
.mouseOut {
	background: #708090;
	color: #FFFAFA;
}

.mouseOver {
	background: #FFFAFA;
	color: #000000;
}
</style>
<script type="text/javascript">
	var xmlHttp;
	var completeDiv;
	var inputField;
	var nameTable;
	var nameTableBody;
	function createXMLHttpRequest() {
		if (window.ActiveXObject) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		} else if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
		}
	}
	function initVars() {
		inputField = document.getElementById("names");
		nameTable = document.getElementById("name_table");
		completeDiv = document.getElementById("popup");
		nameTableBody = document.getElementById("name_table_body");
	}
	function findNames() {
		initVars();
		if (inputField.value.length > 0) {
		    createXMLHttpRequest();
		  var url = "AutoCompleteServlet?names=" + escape(inputField.value);
		    xmlHttp.open("GET", url, true);
		    xmlHttp.onreadystatechange = callback;
		    xmlHttp.send(null);
		} else {
	            clearNames();
		}
	}
	function callback() {
		if (xmlHttp.readyState == 4) {
			if (xmlHttp.status == 200) {
				var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
				setNames(xmlHttp.responseXML.getElementsByTagName("name"));
			} else if (xmlHttp.status == 204) {
				clearNames();
			}
		}
	}
	function setNames(the_names) {
		clearNames();
		var size = the_names.length;
		setOffsets();
		var row, cell, txtNode;
		for ( var i = 0; i < size; i++) {
			var nextNode = the_names[i].firstChild.data;
			row = document.createElement("tr");
			cell = document.createElement("td");
			cell.onmouseout = function() {
				this.className = 'mouseOver';
			};
			cell.onmouseover = function() {
				this.className = 'mouseOut';
			};
			cell.setAttribute("bgcolor", "#FFFAFA");
			cell.setAttribute("border", "0");
			cell.onclick = function() {
				populateName(this);
			};
			txtNode = document.createTextNode(nextNode);
			cell.appendChild(txtNode);
			row.appendChild(cell);
			nameTableBody.appendChild(row);
		}
	}
	function setOffsets() {
		var end = inputField.offsetWidth;
		var left = calculateOffsetLeft(inputField);
		var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
		completeDiv.style.border = "black 1px solid";
		completeDiv.style.left = left + "px";
		completeDiv.style.top = top + "px";
		nameTable.style.width = end + "px";
	}
	function calculateOffsetLeft(field) {
		return calculateOffset(field, "offsetLeft");
	}
	function calculateOffsetTop(field) {
		return calculateOffset(field, "offsetTop");
	}
	function calculateOffset(field, attr) {
		var offset = 0;
		while (field) {
			offset += field[attr];
			field = field.offsetParent;
		}
		return offset;
	}
	function populateName(cell) {
		inputField.value = cell.firstChild.nodeValue;
		clearNames();
	}
	function clearNames() {
		var ind = nameTableBody.childNodes.length;
		for ( var i = ind - 1; i >= 0; i--) {
			nameTableBody.removeChild(nameTableBody.childNodes[i]);
		}
		completeDiv.style.border = "none";
	}
</script>

</head>
<body>
	<h1>Ajax Auto Complete Example</h1>
	Names:
	<input type="text" size="20" id="names" οnkeyup="findNames();" style="height: 20;" />
	<div style="position: absolute;" id="popup">
		<table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0" >
			<tbody id="name_table_body"></tbody>
		</table>
	</div>

</body>
</html>

(2) servlet AutoCompleteServlet

package ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Iterator;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/AutoCompleteServlet")
public class AutoCompleteServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	private ArrayList<String> names = new ArrayList<String>();
	
	public AutoCompleteServlet() {
		super();
	}

	public void init(ServletConfig config) throws ServletException {
		names.add("Abe");
		names.add("Abel");
		names.add("Abigail");
		names.add("Abner");
		names.add("Abraham");
		names.add("Marcus");
		names.add("Marcy");
		names.add("Marge");
		names.add("Marie");
	}
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		String prefix = request.getParameter("names");
		NameService service = NameService.getInstance(names);
		
		ArrayList<String> matches = service.findNames(prefix);
		if (matches.size() > 0) {
			PrintWriter out = response.getWriter();
			
			response.setContentType("text/xml");
			response.setHeader("Cache-Control", "no-cache");
			
			out.println("<response>");
			Iterator<String> it = matches.iterator();
			while (it.hasNext()) {
				String name = it.next();
				out.println("<name>" + name + "</name>");
			}
			out.println("</response>");
			matches = null;
			service = null;
			out.close();
		} else {
			response.setStatus(HttpServletResponse.SC_NO_CONTENT);
		}
	}

	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
	}

}

(3) NameService.java

package ajax;

import java.util.ArrayList;
import java.util.Iterator;

public class NameService {
	private ArrayList<String> names;
	
	public NameService(ArrayList<String> list_of_names) {
		names = list_of_names;
	}
	public static NameService getInstance(ArrayList<String> list_of_names) {
		return new NameService(list_of_names);
	}
	public ArrayList<String> findNames(String prefix) {
		String prefix_upper = prefix.toUpperCase();
		ArrayList<String> matches = new ArrayList<String>();
		Iterator<String> iterator = names.iterator();
		while (iterator.hasNext()) {
			String name = iterator.next();
			String name_upper_case = name.toUpperCase();
			if (name_upper_case.startsWith(prefix_upper)) {
				boolean result = matches.add(name);
			}
		}
		return matches;
	}
}

On the way...