Ajax
AJAX: AJAX stands for Asynchronous Javascript and XML processing. AJAX is not programming language but it is one of the programming concept.
Def: AJAX is the art of
exchanging data with a server and update parts of a web page without reloading
whole page.
1.
AJAX
applications are browser-platform independent
2.
AJAX can be
used for creating rich, web-based applications that look and works like a
desktop application.
3.
With AJAX we
can create better, faster, and more user-friendly web applications.
4.
AJAX will work based
on Javascript and HTTP requests.
5.
AJAX is a type
of programming mode which was populared in the year 2005 by Google(With Google
suggest)
AJAX is the use of non
standard XMLHTTPRequst object to communicate with server side scripts. It can
send as well as receive information in variety of formats includeing XML. HTML,
and even text files. AJAX’s most appealing characterstics, however, it its
“asynchronous” nature, which means that it can do all of this without having to
refresh the page. This allows us to update protions a page based upon server
events.
What is AJAX: AJAX is a set
of technologies, supported by a web browser, including these elements
HTML and CSS for
presenting.
Javascipt for local
processing data inside the page or to access
elements of XML file read on the server(with the getElementByTagName
method for example)
Optionally….
The DOM parser class may
used
JSP or another scripting
language may be used
XML and XSTL to process the
data if returned in XML form.
SOAP may be used to dialog
with the server.
Asynchronous: Asynchronous
means getting the response of the server without reloading current web page.
Synchronous: Synchronous
means getting response of the server each and every time after reloading the
web page.
Why to use AJAX: It is used
mainly to build a fast, dynamic website, but also resources. For improving
sharing of resources, it is better to use the power of all client computers
sharing of resources. It is better to use the power of all the client computers
rather than just unique server network. AJAX allows performing processing on
client computer (in JavaScipt) with data taken from the server.
The processing of web page formerly was only
server-side, using services or PHP scipts, before the whole page was sent
within the network. But AJAX can selectively modify a part of a page displayed
by the browser, and update it without the need to reload the whole document
with all images, menus etc..
For example, fields of
forms, choices of user, may be processed and the result displayed immediately
into the same page.
How does AJAX work: AJAX
uses a programming model with display and events. These events are user actions
they call functions associated to elements of the web page.
Interactively it is achieved with form and buttons. DOM allows linking
elements page with actions and also extracting data from XML files provided by
the server.
The keystone of AJAX is the
XMLHttpRequest
XMLHttpRequest:
All modern browsers support
the XMLHttpRequest object(IE5 and IE6 uses an ActiveX object)
The XMLHttpRequest object
is used to exchange data with a server behind the scenes. This means that it is
possible to update parts of web pae, without reloading whole page.
How to create an
XMLHttpRequest Object:
All modern browsers(IE7+,
Firefox, Chrome, safari and opera) have a built-in XmlRequest object.
Syntax for HttpRequest Object:
Variable=new
XMLHttpRequest();
Syntax for
ActiveXObject(IE5 and IE6) use an ActiveXObject
Variable=new
ActiveXObject(“Mirosoft.XMLHTTP”);
To work with AJAX,
XMLHttpRequest object(AJAX engine) provides us four methods and six properties.
The two methods provided by
XMLHttpRequest objects are
1. Open(“GET/POST(Any http
method),url,true/false)
2. send() or send(String)
3.
setRequestHeader(header_name,header_value)
4.
overrideMIMEType(“text/html”) (supported
by only firefox)
|
Method
|
Description
|
|
Open(http_method,url,async)
|
Specifies the type
of reuqst, the URL, and if the request should be handled asynchronously or
not.
Method: the type of
request: GET or POST or any other http method
url: the location
of the file on the server
async:
true(asynchronous) or false (synchronous)
|
|
Send
|
Send request to the server.
|
|
Send(String)
|
Only used for POSt
methods
|
|
setRequestHeader(header,value)
|
Add HTTP headers to
the request.
Header: specifies
the header name
Value: specifies
the header value
|
GET: GET is simplifier and
faster than post, and can be used in most cases.
POST: A cached file is not
an option (update a file or database on the server)
Sending a large amount of
data to the server(POST has no size limitations)
Sending user input(which
can contain unknown characters), POST is more robust and secure than GET.
EX: A simple GET method is
shown below
xmlhttp.opn(“GET”,”demo_get.jsp”,true);
xmlhttp.send();
If we want ot send
information with theGET method, add the information to the URL
xmlhttp.open(“GET”,”demo_get2.jsp?fname=sachin&lname=Tendulkar”true)
xmlhttp.send();
AJAX has given six
properties. Those are listed below.
1.
Onreadystatechange
2.
readyState
3.
status
4.
responseText
5.
responwXML
6.
StatusText:
Onreadystatechange: This
property holds or contains the name of the Javascipt function to be called
whenever response from the server is received by the AJAX engine. While working
with AJAX, we need to take the support of minimum of two Javascript functions
One for sending the request
to the server and another for receiving response from the server.
EX:
function
f1()
{
var x=new
ActiveXObject(“Microsoft.XMLHTTP”);
x.onreadystatechange=fun2;
---------------
x.open(-,-)
x.send();
ReadyState:
This
property holds the status of the request.
This value
of this property will be dynamically changed.
Ready state
property values are varied from 0 to 4.
0: request not initialized: AJAX engine is created,
but open(-,-) is not called.
1:
server connection established: Means that open(-,-,-) is called
2: Request received: means that send() is called
3:
Processing request: Means that request is under processing.
4: Request finished and response is ready: Means that
response for the request is generated by
the server.
3. Status: Status
attributes holds different status codes to know the status of the response
returned by the server.
100-109: represents info
200-299: represents success
response
300-399: represents
redirection
400-499: represents
incomplete web resource
500-599: represents server
error
4. ResponseText: This
property holds the response data returned by the server for the given req
request
5. ResponseXML: This
property holds the response generated by the server for the given
requests.
6. StatusText: StatusText
is generated text message of response text.
Procedure to develop AJAX code to interact with the web
resourece program of web application:
1. Make web page generate
javascript call based request.
EX: Enter country:
<input type=”text” name=”t1” onKeyup=”f1()”/>
When the key of keyboard is
pressed and released to type a letter in the text.
Here “onKeyup” even is
raised and it calls the javascript function “f1()”
Step2: Keep AJAX engine
ready in the JavaScript function definition.
Function f1()
{
If(window.XMLHttpRequest) //object of the current window
{
Var areng=new
XMLHttpRequest() //code for IE+7, Firefox, Chrome, Opera
}
else if(window.ActiveXObject)
//ActiveX version
{
Var aeng=new
ActriveXObject(“Mircosoft.XMLHTTP”)
//code for IE6,7
}
------
----------
}
3. Specify the name fo the
call back function to AJAX engine.
aeng.onreadystatechange=connection;
The dunction that specified
“connection” Javascript function will be called automatically by Ajax engine
for each change that takes place in readyState. Property values like
0-1,1-2,1-3,1-4
readyState property value
is “4”
4. Process the request of
the url having query string.
//read from data
var
String=document.f1.t1.value;
//frame request url
var
url=”test.jsp?q=”+strng;
5. Makes AJAX engine send
request to targe web resource program asynchronously
Aseng.open(“GET”,url,truye)
6. Develop targe web
resource program like servlet or jsp
7. Define callback function
definition(java script function) having logic to update webpage content when
AJAX engine’s “responseState” is “4” and http response “status” code is “200”.
EX:
Function connection()
{
If(aeng.readyState==4||aeng.readyState==”complete”)
{
-----------------
-------------------
}
}
Flow of AJAX engine:
AJAX web architecture
Disadvantages of AJAX:
- The
back and refresh button are rendered useless
With AJAX, as all functions are loaded on a dynamic page without the page being reloaded or more importantly a URL being changed (except for a hash symbol maybe), clicking the back or refresh button would take you to an entirely different web page or to the beginning of what your dynamic web page was processing. This is the main drawback behind AJAX but fortunately with good programming skills this issue can be fixed. - Back functionality cannot work because the dynamic
pages don’t register themselves to the browsers history engine. Hence the
need of Iframe becomes essential.
- The page cannot be bookmarked if implemented using
Ajax.
- If java script is disabled , Ajax will not work
- Because different components of the pages are loaded
at different times, response time may be slow.
- Because different components of the pages are loaded
at different times it may create confusion for the user.
For example programs please refer
AJAX\NetBeansProjects
Advantages of AJAX:
a) Allows feedback, confirmation and errors
messages to be displayed on same page/view.b) Wider variety of controls e.g. sliders, date pickers, windows, tabs, spinners etc.
c) No installation, just an AJAX enabled browser required
d) Higher immunity to viruses and piracy.
e) Reduced load on server resources as processing is distributes over server and client
f) Lowered application development and deployment costs
g) Reduction in network traffic due to more intelligent client and selective data request