What is Ajax, learn Ajax (Asynchronous JavaScript and XML) and implement in webpage, where we can use Ajax

In this article I will explain the AJAX technology. And also the explain with the help of example and know where we can use the AJAX in web programming. Now a day’s AJAX is growing technology in web programming and it’s uses by Google Maps, G mail, YouTube, and Facebook tabs etc. So lets learn and implement this technology.

 

Definition:- AJAX stands for Asynchronous JavaScript and XML, and AJAX is mainly used in web programming due to its capability to retrieve data from database and display on webpage without reloading hole web page.

AJAX in not new programming language but it use the existing standards and work as new programming language. As it’s name suggest that the it uses the following technology JavaScript and XML i.e. AJAX is best for creating fast and dynamic web pages.

Where we can use AJAX:- Before implement AJAX let’s understand the where we can use Ajax. As we know the Ajax creates fast and more dynamic web pages so the it’s use is increases and create more professional web pages in web programming.
Best example of ajax technology is Google search. When we type query in google search box then it suggest related query’s.
Most use of ajax in signup page where we need to check the user name is available or not. Just like in Gmail signup page. as we type email address it checks availability of email.
And in signup page if we select the country then it’s corresponding district and and if select district then corresponding city’s.

Implementation:-  In implementation at first understand the how ajax works.

In ajax at client side an event occurs then the browser creates XMLHttpRequest object (to exchange data asynchronously with a server) and send to server.

Server process this XMLHttpRequest and create response data and send to client browser. And then client side browser process returned data from server using JavaScript and update the page contents.
In AJAX implementation we need to two web pages one for client side which generate event and display processed data. And one for server, which process the operation and generate the data corresponding to XMLHttpRequest.

Let’s understand the signup page where we can check user name availability as we type user name.

Client side page signup.jsp

<html>
<head>
<title>Sign Up Page</title>
<script type="text/javascript" language="javascript">
function ajax(v1,id){var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7 , Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(id).innerHTML=xmlhttp.responseText;
// In this id is id of webpage part where the ajax update the content
}
}
xmlhttp.open("GET","CheckUserAvil.jsp?value=" v1,true);
//here the url of server page and send required value to
urlxmlhttp.send();
}
</script>
</head>
<body>
<form name="form1" action="SignUpProcess.jsp" method="post"
onSubmit="return valid()">
<table width="478" border="0">
<tr>
<td><div align="right">User Name: </div></td>    <td>
<input name="user_name" type="text"
id="user_name" onKeyUp="ajax(this.value,'avil')">
<!-- the ajax function is called when we key up
means type user name and ajax called and check
availability of user name -->
</td>
<td id="avil">(Check availability)</td>
<!--Here is the id where the message is indicate
availability of user name -->
 </tr>
<tr>
<td>
<div align="right">Password:</div>
</td>
<td colspan="2">
<input name="user_pass" type="password" id="user_pass" >
</td>
</tr>
<tr>
<td>
<div align="right">Full Name: </div>
</td>
<td colspan="2">
<input name="firstName" type="text" id="firstName">
</td>
</tr>
<tr>
<td><div align="right">Email:</div></td>
<td colspan="2">
<input name="email" type="text" id="email">
</td>
</tr>
<tr>
<td>
<div align="right">Mobile No: </div>
</td>
<td colspan="2">
<input name="mobileNo" type="text" id="mobileNo">
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="submit" name="Submit" value="Submit">
</td>
<td>
<input type="reset" name="Submit2" value="Reset">
</td>
</tr></table></form></body></html>

Server side page CheckUserAvil,jsp

<%@ page contentType="text/html; charset=iso-8859-1"
language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<title>Check User Avil. | UniqueID</title>
</head>
<body>
<%
String value=request.getParameter("value");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
Connection conPass=DriverManager.getConnection("jdbc:odbc:study");
Statement st = conPass.createStatement();
ResultSet rs = st.executeQuery("select user_id from login");
boolean avi=false;
while(rs.next())
{if(rs.getString(1).equals(value)){avi=true;break;
}}if(avi){%>
<td align="left">User Name Not avilable. try different</td>
<%
}
else
{
%>
<td  align="left">Good User Name is Avilable.Proceed</td> <%}%>
</body>
</html>

Download full Ajax implementation packs.
One thing must remember that the if web page part which is update by ajax must me same as the server send the response to XMLHttpRequest.

Means that if we update the list then server must send the list type value in XML object.

3 Comments
  1. June 10, 2012
  2. June 20, 2012