AJAX Suggestion Text Box 

AJAX Auto Complete Text Box Using JSP JAVA

The latest Websites uses AJAX for user friendly. 

Text box Auto Complete is latest trend to display the typing word as dropdown.

 Example google shows the drop down.

How to create Suggestion Box?

Its simple because if you gonna use jQuery then it takes little time. However you need the Business logic to work on Database. 

You have to configure your coding structure for connecting to Database. Whenever user types a letter in the Text box then using onkeyup event in javascript have to ping up the Database. Using like statement in Database have to retrieve the value and display it in View part i mean in JSP.

Description

The AutoSuggest class adds a pulldown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the enter key. The values for the suggestion list are to provided as XML, or as JSON (by a PHP script, or similar).
The results of the first request are cached on the client machine and are filtered as the user continues to type, to reduce the number of requests hitting the server.
In the JSON example above a callback function is passed to the autoSuggest instance. It is called when the user selects an entry, and inserts the entry id into a hidden field (visible for this example).
In the XML example below supplementary information is being displayed along with the names, in this case an english county.

Example for AJAX Suggestion Box:

Visit TutorialsFree.net

»»  Read More
Read more!

 Step by Step AJAX Tutorial for Beginners - Contents Page Chapter Wise

• 1. AJAX Introduction
• 2. How Ajax Works?
• 3. Software needed for AJAX
• 4. Ajax Browser compatibility
• 5. Ajax Example1
• 6. Example 1: Source code
• 7. Example:1 AJAX Source Code Explained
• 8. Example 2: Ajax with Database
• 9. Example 3 : AJAX Database using Struts
• 10. Example 4: Dynamic City State Loading

»»  Read More
Read more!

Dynamic City, State Loading based on Country Selection 

 Without Reloading the Page 

In previous chapter i explained Database connection with Ajax. 

Now we will discuss how to load City and State on particular Country selection using Combo Box or Drop Down Box

Use Servlets or Struts for Connecting Database the response from action should be in xml format.

Check Below link to create Servlet class

http://ajaxtutorialonline.blogspot.com/2010/09/steps-to-connect-ajax-with-database-to.html.

Configure Web.xml 
-------------------------

<servlet>

<servlet-name>DynamicLoading</servlet-name>

<servlet-class>com.CountryLoad</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>DynamicLoading</servlet-name>

<url-pattern>/Country</url-pattern>

</servlet-mapping>

 public class DynamicLoading extends HttpServlet
{
public void doGet(HttpServletRequest request, HttpServletResponse response)
{
try
  {
     String val = request.getParameter("id");
     String stor=null;
     Connection con = null;
     PreparedStatement pst =null;
     ResultSet rs=null;
     response.setContentType("text/xml");
     Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
     pst = con.prepareStatement("select State from Country where Country=?");
     pst.setString(1,val);

     response.getWriter().write("<Country>");
     while(rs.next())
     {
      stor =rs.getString(1);
      response.getWriter().write("<state>"+stor+"</state>");
     }

response.getWriter().write("</Country>");
  con.close();
  }catch(SQLException e)
   {
    
   }
}
}

»»  Read More
Read more!

Step by Step Ajax tutorial for Beginners

Brief Introduction to Ajax:

Ajax is the Latest Technology which is used in Web Application Development.

Ajax is not popular until Google use that. In the year 2005 Google use's AJAX in Gmail, Google Search and GoogleMaps etc makes ajax popular.

Use of AJAX:

AJAX is used to build a dynamic website without reloading a page, menus or images etc. 

Also its very faster and save resources.

Processing of web page is on Server side using web services, JSP or PHP Scripts.
For example, fields of forms, choices of user, may be processed and the result displayed immediately into the same page. 

What is Ajax?

Ajax is defined as Asynchronous Javascript XML.
If you need a fastest website use ajax.
Look and feel is good.

XML Extensible Markup Language is a very good option for programmers because using xml we can parse all kind of results using AJAX.
In my Example's i used ordinary methods like innerHTML for displaying results in Html Format.
Each and every Program and example's of this is using JavaScript. By using DIV i displayed dynamic results and Many more so you can have a look at all things below.

»»  Read More
Read more!

How AJAX works?
Ajax works on xmlHttp Request to server and Client.

1. Client Browser (Sends Request)

2 Server (Process the Request and sends the Response)

3. Client Browser ( process the request using Javascript and Displays the Content)

1. Clients creates xmlHttpRequest to server.
2. Server process the HttpRequest from client. And send response to the client browser.
3. Client browser process the returned data using javascript. Content of the page will be updated.

Do you know 95% of AJAX is JAVASCRIPT only.
WHAT CAN WE DO WITH AJAX?
With AJAX we can do lot of things display a result dynamically as well as differently in appearance wise.  Thing of google worlds top search engine uses AJAX as a main source. Did you Noticed while typing in a search box in google a drop down search suggestion will open. Have you wondered about how it works? Its all of AJAX.
You can load the content dynamically as you want to display it in time. For Example If you having a very big content in your Database or some thing which is Large to load in browser at that time you can show a loading image so user can easily identify that content is loading or processing. After content has been been loaded it will be displayed to user browser.
With AJAX we can fetch the data from database and parse that as XML and display it in browser as you like. AJAX is very faster in loading its a great thing to use AJAX.
However it is I wrote many examples of AJAX coding in my tutorial.
So learn AJAX and play with it.
ALL THE BEST

»»  Read More
Read more!

Ajax Browser support

Ajax supports all kind of browsers with small conflicts.
Older browsers like Internet Explorer 5.0 6.0 didn't support xmlHttpRequest directly so instead they are using ActiveXObject which is implemented in Explorer 5.0 and 6.0.

Latest Browsers like Firefox, Opera, Chrome, Safari and IE 8 implemented the xmlHttpRequest to support Ajax.


Note:
  At first website must satisfy a Compatible view in all kind of browsers. If you use ajax in your web Application then you have to use two kind of codes for compatibility.

Older Browsers like IE5.0 and IE6.0

xmlhttp = new ActiveXObject("Microsoft.XMLHttpRequest");

For Latest Browsers

xmlhttp = new XMLHttpRequest();

So using the above code creates an object for all kind of browsers. No more compatible issue in using Ajax.

Code for Checking Browser Compatibility

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

»»  Read More
Read more!

Tools and Software needed to Code AJAX

You can develop AJAX based Application easy and quickly without the help of any third party tools and software's. For your convenience you can use Eclipse IDE, NetBeans etc. 

Myself i put some screen shots or images of Eclipse IDE to develop your own AJAX based Application. You can develop ajax application without using IDE but its not reliable because we need Tomcat Apache Server to run and verify our application.

Follow below steps to achieve a good end result for your AJAX Application.

For this i used a freeware software Eclipse IDE which is mainly used to develop JAVA, J2EE based Applications.

1. Download Eclipse IDE from this Eclipse Official Website http://www.eclipse.org/downloads/
2. Open and install Eclipse if you need Java Runtime Environment( JRE and JDK) http://java.sun.com download from this site and install it. You can code your program without using JRE and JDK its not necessary for AJAX based application.
3. Download Freeware Tomcat Apache Server now latest version 7.0 is available but i gave you the link for Apache Tomcat 6.0 http://tomcat.apache.org/download-60.cgi Click the ZIP file and start download and install that with default password and username.
4. Open Eclipse IDE and it prompts you to enter Workspace just give your application name.

Step By Step to develop AJAX program in Eclipse IDE(Integrated Development Environment):

STEP 1 : 

Open Eclipse IDE

 

STEP 2: 

Click File ==> New ==> Project (2)

STEP 3:

Click WEB ==> Dynamic Project

STEP 4: 

Name Your Project and Click Finish

STEP 5 : 

Now you can see a Project Explore.

Click Server tab as i mentioned in red mark

STEP 6: 

Right click on the space provided in server tab Click New ==> Server

STEP 7: 

Now a window will open Click Apache ==> then select appropriate server which you installed as i mentioned above. Here i using Tomcat 6.0

STEP 8:

In this step you going to select the Tomcat Apache Installed Path. I installed in my system in this path C:\Program Files\Apache Software Foundation\Tomcat 6.0

STEP 9 :  

Right Click in WebContent folder in Eclipse and then 

Click New ==> select JSP Name your JSP and click Finish

STEP 10 : 

Start Coding your Program as i Mentioned in coding section CLICK HERE .

After completed your Coding save your Project. Right click on the Tomcat Apache server which is at the bottom of the Eclipse and Click Start. After that Tomcat Apache Server will start running in Default 8080 port.

STEP 11: 

Open your Browser here i used IE(Internet Explorer 7.0) Just type url.

Example: http://localhost:8080/Ajax/sample.jsp

Note: http://localhost ----- is the local hostname

8080----> is port number. So its common no need to change any names in this type as i said http://localhost:8080/

After http://localhost:8080/ i mentioned Ajax is the Project Name which you give during the creation of project. sample.jsp is the name of your JSP page which you created.

»»  Read More
Read more!

Ajax Simple Example to show or hide the Data dynamically without reloading the Page If you click "Show Button" it show some data below. If you click "Hide Button" then it hides the data that shown. Try clicking the button below

»»  Read More
Read more!

Ajax Simple Example
In previous chapter i explained browser compatibility  for browser.
So now we will see a simple example for AJAX.

Code for Example 1

function hide() { var x =document.getElementById("hello"); x.innerHTML=""; } function ajax() { if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { var x= document.getElementById("hello"); x.innerHTML= "<h3>Hi Welcome to Ajax tutorial</h3><h2 style='color:red;'>Kamalakannan JS</h2>"; } xmlhttp.open("Post","http://ajaxtutorialonline.blogspot.com"); xmlhttp.send(); }

»»  Read More
Read more!

Example:1 Source Code Explained

Source Code Explained:

To get the Element of a ID ----> document.getElementById("hello");

the above code uses to get the element id with hello.

Step : 1

<div id="hello"></div>

Step : 2

The document.getElementById("hello"); 

Used to get the id name of the particular div. 

Step : 3

var x =document.getElementById("hello");

Storing the retrieved document id to variable 'x'

Step 4: 

 x.innerHTML="";

innerHTML method in java script used to display a Dynamic Content.

For Example:

x.innerHTML="<b>Kannan</b>";

Will result in display a Bold word as Kannan.

Step 5:
Checking for Old Browser and New Browser

if(window.XMLHttpRequest)

{

xmlhttp = new XMLHttpRequest();

}

else

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

Step 6:

xmlhttp.onreadystatechange=function()

{

// code

}

There are five Ready states in Ajax as i mentioned before. 

onreadystatechange is the method which will executed if we get successful request from server.

Step 7:

xmlhttp.open("Post","http://ajaxtutorialonline.blogspot.com");

 The above coded used to open a connection.
It must be given in all ajax codes. Else it won't Work.

Note :

Inside xmlhttp.open i gave POST method instead of that you can use GET. 

And you have to the link of your own site which you going to put code. 

I mentioned http://ajaxtutorialonline.blogspot.com because i coded the program for this site. If you put your code in any website you can put your own website or domain name ex : http://example.com

Step 8 :

The send method will send the data. If you not retrieve any data you can simply give null.

xmlhttp.send();

 

»»  Read More
Read more!