AJAX JSP Example -- AJAX Suggest on the server side: suggest.jsp

Subject: AJAX JSP Example -- AJAX Suggest on the server side: suggest.jsp
Author: WebSpider
In response to: AJAX Example -- AJAX Suggest on the client side: suggest.html
Posted on: 11/11/2009 01:34:30 PM

A server side application JSP which should answer the request from the client is shown as follows:


<%!
	// preload a list of faked names
	int size;
	String[] names;
    // ...perform one time initialization.
    // ...this method is called only once per JSP, not per request
	public void jspInit() {
	    size = 100;
	    names = new String[size];
		for(int k=0; k<size; k++){
			int len = (int)(Math.random()*10);
			if(len<5)
				len = 5;
			StringBuffer sb = new StringBuffer();
			for(int j=0; j<len; j++){
				int pos = ((int)(Math.random()*1000))%26;
				if(j==0)
					sb.append((char)(pos+65));
				else
					sb.append((char)(pos+97));
			}
			names[k] = sb.toString();
		}
    }
	
%>

<%
	
	// get the parameter from the query string
	String s = request.getParameter("s");
	if(s==null)
		s = "";
	else
		s = s.toLowerCase();
		
	// go through the name list to find all the matches	
	String hint = null;
	if(s.length()>0){
		int count = 0;
		for(int k=0; k<size; k++){
			String name = names[k].toLowerCase();
			if(name.startsWith(s)){
				count++;
				if(count==1)
					hint = names[k];
				else
					hint += ", " + names[k];
			}
		}
	}

	if(hint==null){
		out.print("no suggestion");
	}else{
		out.print(hint);		
	}
%>

>
> On 11/11/2009 01:26:02 PM WebSpider wrote:

Now it's time to put all above together to show how a client side AJAX application looks like. A perfect example of AJAX is Google's Suggest -- a list of hints pop up while you are typing in the Google search box. Here a very silimar example (suggest.html) is shown to demostrate how AJAX make it work behind the scene.

<html> <head> <title>An example to show how AJAX works</title> </head> <body> <script language="javascript"> var xmlhttp function fireAJAX(str) { // avoiding bothering the server too much if (str.length==0) { document.getElementById("myHook").innerHTML=""; return; } // get an XMLHttpRequest object xmlhttp = getXmlHttpObject(); if(xmlhttp==null) { alert ("Your browser does not support XMLHttpRequest!"); return; } // register the lister before sending out the request xmlhttp.onreadystatechange = listenerForStateChange; // URL to the target server for response var url = "suggest.jsp?s=" + str; url = url + "?sid=" + Math.random(); // to avoid cached results // send out the request xmlhttp.open("GET", url, true); xmlhttp.send(null); } function listenerForStateChange() { if(xmlhttp.readyState==4) { document.getElementById("myHook").innerHTML = xmlhttp.responseText; }else{ // do some funcy thing } } function getXmlHttpObject() { if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // for IE6, IE5 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; } </script> <form> Name: <input type="text" onkeyup="fireAJAX(this.value);" /> Suggestions: <span id="myHook">This part will be soon replaced by response from server.</span> </form> </body> </html>

References:

Next Post: Javascript Code for URL UTF-8 Encoder & Decorder WebSpider 11/23/2009 02:32:04 PM
Previous Post: AJAX Example -- AJAX Suggest on the client side: suggest.html WebSpider 11/11/2009 01:26:02 PM
Next Topic: Javascript Code for URL UTF-8 Encoder & Decorder WebSpider 11/23/2009 02:32:04 PM
Previous Topic: Globalize JSP web application by charset encoding WebSpider 11/04/2009 01:54:05 AM
Index: by Date
Index: by Topic