Ajax!
Ajax, Asynchronous JavaScript Technology and XML, a good way for loading web page without refreshing (reloading).
As we know, we have to refresh a whole web page to submit a form and get the result from server side. That way wastes much bandwidth and time to reload many things, even though these things are the same as we got before reloading.
The concept Ajax was out to solve this problem. You can get more information from ‘Ajax: A New Approach to Web Applications’ written by Jesse Garrett.
Below is a demo page shows how Ajax works.
Environment:
J2SE1.4/J2EE1.3
Rational SDP6.0
WebSphere Test Environment 5.1
IE 6.0
Steps:
1. We create a html page named as ajax.html. Below is the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM Software Development Platform">
<TITLE>ajax.html</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
var req;
function check() {
var idField = document.getElementById("userid");
var url = "Check?id=" + escape(idField.value);
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
function callback() {
if (req.readyState == 4) {
if (req.status == 200) {//if the response is sucessful
parseMessage();
}
}
}
function parseMessage() {
var message = req.responseXML.getElementsByTagName("message")[0];
setMessage(message.getElementsByTagName("status")[0].childNodes[0].nodeValue,message.getElementsByTagName("text")[0].childNodes[0].nodeValue);
}
function setMessage(sta,msg) {
var mdiv = document.getElementById("errorMessage");
if(sta == "OK") {
mdiv.innerHTML = "<div style=\"color:green\">"+msg+"</ div>";
} else if(sta=="FALSE"){
mdiv.innerHTML = "<div style=\"color:red\">"+msg+"</ div>";
}
}
</SCRIPT>
<BODY>
UserID:
<input type="text" size="20" id="userid" name="id" onkeyup="check()">
<div id="errorMessage"></div>
</BODY>
</HTML>
2.A servlet for dealing the request from JS of the HTML file below.
package net.rick.ajax;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.Servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Check extends HttpServlet implements Servlet {
/*
* (non-Java-doc)
*
* @see javax.servlet.http.HttpServlet#HttpServlet()
*/
public Check() {
super();
}
/*
* (non-Java-doc)
*
* @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request,
* HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
PrintWriter writer = response.getWriter();
response.setContentType("text/xml");//here we use xml to transact data
response.setHeader("Cache-Control", "no-cache");
// start checking what you want to check
String userID = request.getParameter("id");
writer.write(checkUserID(userID));
}
/*
* (non-Java-doc)
*
* @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request,
* HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}
/**
*
* @param id
* @return
*/
private String checkUserID(String id) {
String errorMsg = "<message>";
if (id.indexOf("@") < 0) {
//here we check the id is or not a email address
errorMsg += "<status>FALSE</status>";
errorMsg += "<text>Sorry! This filed must be an email address!</text>";
} else {
//do what ever you want
errorMsg += "<status>OK</status>";
errorMsg += "<text>Sucessful!</text>";
}
errorMsg += "</message>";
return errorMsg;
}
}
3.Deploy to WTE
4.Testing
When we open ajax.html in IE, we can input something in the input filed.ajax.html can send our input string to the servlet named Check. A red string ‘Sorry! This filed must be an email address!’ will be shown below the input box when there is no @ in the inputted string. A blue string ‘Successful!’ will be shown if it contains @. And all of these actions were finished without any browser refreshing.
Some people say that Ajax is not as useful as what it seems. But I think Ajax will be good for making the web page more efficient and simple for the users.
