Ajax

AJAX = Asynchronous JavaScript and XML.

AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without
reloading the whole page.
WHAT IS AJAX?
Ajax is asset of technologies, supported by a web browser, including these elements.
HTML and CSS for presenting.
Java script for local processing, and DOM (Document Object Model) to access data
inside the page are to access elements of XML file read on the server (with the
getElementByTagName metod for example)..
The XMLHttpRequest object is used to read or send data on the server asynchronously.
Optionally
DOM parser may be used.
PHP or another scripting language may be used on the server.
XML and XSLT to process the data if returned in XML form.
SOAP may be used to dialog with the server.
The asynchronous word, means that the response of the server while be processed when
available, without to wait and to freeze the display of the page.

Ajax uses a programming model with display and events. These events are user actions, they
call functions associated to elements of the web page.
Interactivity is achieved with forms &buttons. DOM allows to link elements of the page with
actions and also to extract dat from XML files provided by the server.
To get data on the server, XMLHttpRequest provides two methods:
open(): create a connection
send(): send a request to the server
Data furnished by the server will be found in the attributes of the XMLHttpRequest object:
-responseXml for an xml file or
-responseText for a plain text.
Take note that a new XMLHttpRequest object has to be created for each new file to load.
Weve to wait for the data to be available to process it and in this purpose, the state of
availability of data is given by the readyState attribute of XMLHttpRequest.
States of readyState follow(only the last one is really useful):
0: not initialized
1: connection established.
2: request received.
3: answer in process.
4. Finished.
The XML Http Request object:

The mechanism for sending data to and retrieving data from the server with Ajax is the
XMLHttpRequest object. Unfortunately, modern browsers that supports XMLHttpRequests
have different methods for doing so
Attributes
readyState ----- the code successively changes value from 0 to 4 that means for ready.
status ------ 200 is ok
404 IF THE page is not found.
Responsetext ------ holds loaded data as a string of characters.
ResponseXML-- holds an XML loaded file, DOMs method allows to extract data.
Onreadystatechange property that takes a function as value that is involved when the
readystatechange event is dispatched.

Methods:
open(mode, url, boolean) mode: type of request, GET or POST
url: the location of the file, with a path.
Boolean: true(asynchronous)/false(synchronous).
Optionally, a login and a password may be added to arguments.
Send(string) null for a get command

Building a request, step by step:
Step:1
This is just a classical instance of class, but two options must be tried, for browser
compatibility.
If(window.XMLHttpRequest)// Object of the current windows
{
pa1=new XMLHttprequest();
}else
If(window.ActiveObject)//Activex version
{
pa1=new ActiveXObject(Msxml2.XMLHTTP);//Internet Explorer
}
Or exceptions may be used instead:
Var Pa1;
Try
{
Pa1=new ActiveXObject(Msxml2.XMLHTTP); //FOR I.E less than 6.0
}catch(e)
{
Pa1= new XMLHttprequest();// other browsers.
}
Step 2: Wait for the response
The response and further processing are included in afunction and the return of the
function will be assigned to the onreadystatechange attribute of the object previously
created.
Pa1.onreadystatechange=function(){
If(pa1.readyState==4){
//Received ok;
}else{
//wait
}}
Step 3: make the request itself
Two methods of XMLHttpRequest are used:
-open: command GET or POST, URL of the document , true for asynchronous.
-send: with POST only , the data to send to the server.
The request below read a document on the server.
Pa1.open(GET,pavan.php?uname=+p,true);
Pa1.send(null);
Step 4: server response
Property Description
responseText get the response data as a string
responseXML get the response data as a XML data
The responseText property
If the response from the server is not XML, use the responseText property.
The responseText property returns the response as a string, and you can use it accordingly:
Example:
Document.getElementById(ID or DIV).innerHTML=pa1.responseText;
The responseXML property:
If the response from the server is XML, and you want to pase it as an XML object, use the
responseXML property:
Example:
X=pa1.responseXML;
Var txt=;
Y=X.getElementsByTagName(ARTIST);
For(i=0;y.length;i++)
{txt=txt+y[i].childNodes[0].nodeValue+<br/>}
Document.getElementById(IDNAME OR DIV).innerHTML=txt;

EX: AJAX Engine to servlet Communiccation
Input.html
<html><head><script>
Var Pa1;
function f1()
{
Try
{
Pa1=new ActiveXObject(Msxml2.XMLHTTP); //FOR I.E less than 6.0
}catch(e)
{
Pa1= new XMLHttprequest();// other browsers.
}
Pa1.onreadystatechange=fun2
Var k= document.get ElementById(id).value
Pa1.open(get, verify?id= +k,true);
Pa1.send()
}
Function fun2()
{
If(Pa1.readystate= =4)
{
Document.getElementById(err).style.color= red
Document.getElementById(err).innerHTML= Pa1.responseText }
}
</script>
</head>
<body>
<form name= f1>
Enter Student Name:<input type = text name= id id= id onkeyup= fun1()> <span
id= err></span>
</form>
</body>



---------------------------web.xml--------------------------------
<web-app>
<servlet>
<servlet-name>dum</servlet-class>
<servlet-class>VerifyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dum>/servlet-name>
<url-pattern>/verify</url-pattern>
</servlet-mapping>
</web-app>
--------------------------------VerifyServlet.java---------------------------
//Verify servlet.java
Import javax.servlet.*;
Import java.io.*;
Import java.sql.*;
Public class Verifyservlet extends Genericservlet
{
Public void service(ServletRequest req,ServletResponse res)
{
Try
{
Class.forName(sun.jdbc.odbc.JdbcOdbcDriver);
Connection con = DriverManager.getconnection(jdbc:odbc:sathya,
scott, tiger);
Statement st = con.createstatement();
String s = req.getParameter(id);
PrintWriter pw = res.getWriter();
ResultSet rs = st.executeQuery(select count(*) from student_names where studname =
+s+);
Rs.next();
Int k = rs.getInt(1);
If(k= = o)
Pw.println(invalid studname);
Con.close();
}
Catch(Exception e)
{
e.printStackTrace();
}
}
}