Introduction

What is Ajax?

History

Why use Ajax?

Ajax as a combination of Technologies

How Ajax works?

Advantages

Drawbacks

Future

Conclusion

References
INTRODUCTION:
Internet is very important technology in this era.
Most of students, teachers and computer users are using this technology. However, there are
some problems with this technology. Because of interacting with some servers across the world,
this procedure makes the interacting not that fast. Web-designers and Internet developers try to
solve this problem by many ways. One of these ways is design new web-programming languages
such as JavaScript or XML. Unfortunately, these new ways solve a part of these problems but the
other parts still face problems.
Some scientists say that if there is an ideal solvent to this problem, the people life will depend
almost completely on the computers. Here we are going to tell you about a new technology
called Ajax that has been solving big part of problems with browsing the Internet.
Ajax is actually a family of technologies that have been available for years. The means to make
requests to the server using only JavaScript were built into Internet Explorer 5.5, but the
possibilities of the technology were overlooked. It was only in 2005 that the techniques were
rediscovered and used, notably to excellent effect in Google’s Gmail web application.

WHAT IS AJAX?

AJAX (shorthand for Asynchronous JavaScript and XML):

Asynchronous:
This means that when you send a request, you wait for the response to come back, but are
free to do other things while you wait. The response probably won’t come back
immediately, so you set up a function that will wait for the response to be sent back by
the server, and react to it once that happens.
JavaScript:
JavaScript is used to make a request to the server. Once the response is returned by the
server, you will generally use some more JavaScript to modify the current page’s
document object model in some way to show the user that the submission went through
successfully.
XML:
The data that you receive back from the server will often be packaged up as a snippet of
XML, so that it can be easily processed with JavaScript. This data can be anything you
want, and as long as you want.
Ajax is a group of interrelated web development techniques used on the client-side to create
interactive web applications or rich Internet applications.
With Ajax, web applications can retrieve data from the server asynchronously in the background
without interfering with the display and behavior of the existing page. The use of Ajax has led to
an increase in interactive or dynamic interfaces on web pages and better quality of Web services
due to the asynchronous mode.
Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of
JavaScript and XML is not actually required, nor do the requests need to be asynchronous.

HISTORY:

Techniques for the asynchronous loading of content date back to the mid 1990s. Java applets
were introduced in the first version of the Java language in 1995. These allow compiled client-
side code to load data asynchronously from the web server after a web page is loaded. In 1996,
Internet Explorer introduced the IFrame element to HTML, which also enables this to be
achieved. In 1999, Microsoft created the XMLHTTP ActiveX control in Internet Explorer 5,
which is now supported by Mozilla, Safari and other browsers as the native XMLHttpRequest
object. However, this feature only became widely known after being used by Gmail (2004) and
Google Maps (2005).

Ajax is only a name given to a set of tools that previously existed. The main part is
XMLHttpRequest, a server-side object usable in JavaScript that was implemented into Internet
Explorer since the 4.0 version. In Internet Explorer it is an ActiveX object that was first named
XMLHTTP sometimes, before to be generalized on all browsers under the name
XMLHttpRequest, when the Ajax technology becomes commonly used. The use of
XMLHttpRequest in 2005 by Google, in Gmail and Google Maps has contributed to the success
of this format. But this is the when the name Ajax was itself coined that the technology started to
be so popular.
WHY USE AJAX?

Mainly AJAX is used to build a fast, dynamic website, and also to save resources.
For improving sharing of resources, it is better to use the power of all the client computers rather
than just a unique server and network. Ajax allows performing processing on client computer (in
JavaScript) with data taken from the server. The processing of web page formerly was only
server-side, using web services or PHP scripts, 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.

AJAX AS A COMBINATION OF TECHNOLOGIES

The term Ajax has come to represent a broad group of web technologies that can be used to
implement a web application that communicates with a server in the background, without
interfering with the current state of the page:

HTML and CSS for presenting.

JavaScript for local processing, and DOM (Document Object Model) to access data
inside the page or to access elements of XML file read on the server
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.
HOW AJAX WORKS?

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 and buttons. DOM allows to link elements of the page with
actions and also to extract data 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.
We have 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.

Before discussing how Ajax works, you should know how the old technologies work. Why
should you know how the old technologies work? The answer is simply to observe the difference
between the old technologies and Ajax. The action is sent to the server by requesting an HTTP
trigger and you, the internet user, wait to the server to respond. It is also not that simple. The
server will do many jobs in each request. After doing some processing stuff the server will
respond to the client (see figure1). (2:1)
This way is very technical but do you ask yourself this question: What you will do when the
server does its jobs? The answer is nothing but waiting for the jobs to be done by the server. This
is clearly a problem. It is wasting time and money. (2:2) On the other hand, Ajax will eliminate
the number of interactions with the server by asking the server to do some specific job(s). How
Ajax does that? This is done by putting Ajax Engine in the middle between the client and the
server. Ajax engine will make the application is less responsive. (2:2) Furthermore, after
knowing that there is something called Ajax engine but you where it is or how to get it. Do not
worry, the user does not have to download this engine or buy it. It is simply when the user tries
to load the webpage, the Ajax engine will be loaded instead. This engine is written in JavaScript.
Rendering the visual interface and interaction with the server is not a user’s responsibilities it is
an Ajax engine’s responsibilities. This whole processes take place asynchronously. It is
independent of communication with the server. So, if you want to re-load or update the webpage,
then you do not have to start from an empty webpage. So, the internet’s user will interact with
Ajax engine instead of interacting with the server. How Ajax engine working is not our issue. So
as I said earlier, Ajax engine will take care of interacting with server asynchronously.

The XMLHttpRequest object

Allows interacting with the servers, thanks to its methods and attributes.

Attributes

readyState The code successively changes value from 0 to 4 that means for "ready".

200 is OK
status
404 if the page is not found.

responseText Holds loaded data as a string of characters.

responseXml Holds an XML loaded file, DOM's method allows to extract data.

Property that takes a function as value that is invoked when the readystatechange
onreadystatechange
event is dispatched.
Methods

mode: type of request, GET or POST

url: the location of the file, with a path.
open(mode, url, boolean)
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

First step: create an instance

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

{
xhr = new XMLHttpRequest(); // Firefox, Safari, ...
}
else
if (window.ActiveXObject) // ActiveX version
{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
Or exceptions may be used instead:
try
{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Trying Internet Explorer
}
catch(e) // Failed
{
xhr = new XMLHttpRequest(); // Other browsers.
}
Second step: wait for the response

The response and further processing are included in a function and the return of the function will
be assigned to the onreadystatechange attribute of the object previously created.

xhr.onreadystatechange = function() { // instructions to process the response };

if (xhr.readyState == 4)
{
// Received, OK
}
else
{
// Wait...
}

Third step: 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.

xhr.open('GET', 'http://www.xul.fr/somefile.xml', true);

xhr.send(null);
Examples

Get a text
<html>
<head>
<script>
function submitForm()
{
var xhr;
try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { xhr = new XMLHttpRequest(); }
catch (e3) { xhr = false; }
}
}

xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
document.ajax.dyn="Received:" + xhr.responseText;
else
document.ajax.dyn="Error code " + xhr.status;
}
};
 xhr.open(GET, "data.txt", true);
xhr.send(null);
}
</script>
</head>

<body>
<FORM method="POST" name="ajax" action="">
<INPUT type="BUTTON" value="Submit" ONCLICK="submitForm()">
<INPUT type="text" name="dyn" value="">
</FORM>
</body>
</html>
Syntax of form using Ajax

Comments on the code:

new ActiveXObject(Microsoft.XMLHTTP)
This constructor is for Internet Explorer.

new XMLHttpRequest()
This constructor is for any other browser including Firefox.

http.onreadystatechange
An anonymous function is assigned to the event indicator.

http.readyState == 4
The 4 state means for the response is ready and sent by the server.

http.status == 200
This status means ok, otherwise some error code is returned, 404 for example.
http.open(“POST", "data.xml", true);
POST or GET
URL of the script to execute.
True for asynchronous (false for synchronous).

http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
This is for POST only.
http.send(document.getElementById("TYPEDTEXT").value);
Send data to the server. Data comes from the "TYPEDTEXT" variable filled through the form
by the user.

Get from XML

To get data from an XML file, we have just to replace this line:

document.ajax.dyn="Received:" + xhr.responseText;

By this code:

var doc = xhr.responseXML; // Assign the XML file to a var

var element = doc.getElementsByTagName('root').item(0); // Read the first element
document.ajax.dyn.value= element.firstChild.data; // Assign the content to the form

Write to body

In this demo, the text read is put into the body of the page, and not into a textfield.
The code below replaces the textfield form object and the second part replaces the assignment
into the JavaScript function.

<div id="zone">
... some text to replace ...
</div>
document.getElementById("zone").innerHTML = "Received:" + xhr.responseText;
Post a text

In this demo, a text is sent to the server and is written into a file. The call to the "open" method
changes, the argument is POST, the url is the name of a file or script that receives the data sent,
and that must process it. And the "send" method has now a value as argument that is a string of
parameters.

xhr.open ("POST", "ajax-post-text.php", true);

xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded");
xhr.send (data);

The parameter of the send method is in the format of the HTML POST method. When several
values are sent, they are separated by the ampersand symbol:

var data = "file=" + url + "&content=" + content;

The "file" parameter is the name of a file created to store the content. The filename must be
checked by the server to prevent any other file to be modified.

Using an external file

It is simpler to include a JavaScript file. This line will be included into the head section of the
HTML page:

<script src="ajax.js" type="text/javascript"></script>

And the function is called with this statement:

var xhr = createXHR();

View the script in the ajax.js file.

Old technologies Comparison with AJAX.

Figure. 1(a)
ADVANTAGES:

Bandwidth utilization: In many cases, related pages on a website consist of much

content that is common between them. Using traditional methods, that content would
have to be reloaded on every request. However, using Ajax, a web application can
request only the content that needs to be updated, thus drastically reducing bandwidth
usage and load time.
User interface: The use of asynchronous requests allows the client's Web browser UI to
be more interactive and to respond quickly to inputs, and sections of pages can also be
reloaded individually. Users may perceive the application to be faster or more responsive,
even if the application has not changed on the server side.
More efficient: The use of Ajax can reduce connections to the server, since scripts and
style sheets only have to be requested once.
State can be maintained throughout a Web site. JavaScript variables will persist because
the main container page need not be reloaded.

DRAWBACKS:

The ease of use of Ajax-powered interfaces often dramatically increases the number of
user-generated requests to web servers and their back-ends (databases, or other). This can
lead to slower response times and additional hardware needs to support Ajax-powered
interfaces.
Pages dynamically created using successive Ajax requests do not automatically register
themselves with the browser's history engine, so clicking the browser's "back" button
may not return the user to an earlier state of the Ajax-enabled page, but may instead
return them to the last full page visited before it.
 Because most web crawlers do not execute JavaScript code, publicly indexable web
applications should provide an alternative means of accessing the content that would
normally be retrieved with Ajax, to allow search engines to index it.
Any user whose browser does not support Ajax or JavaScript, or simply has JavaScript
disabled, will not be able to use its functionality. Similarly, devices such as mobile
phones, PDAs, and screen readers may not have support for JavaScript or the
XMLHttpRequest object.
If JavaScript is not activated, Ajax can't works. The user must be asked to set JavaScript
from within options of the browser, with the "noscript" tag.
Since data to display are loaded dynamically, they are not part of the page, and the
keywords inside are not viewed by search engines.
The asynchronous mode may change the page with delays (when the processing on the
server takes some times), this may be disturbing.
The back button may be deactivated. This may be overcome.

FUTURE:

Big applications of Ajax showed that it is not just a technical issues but it is a real world
application.
As the seminar demonstrates earlier, Ajax has the ability to grow. Ajax applications face some
non-technical difficulties. For instance, the programmers and the developers are not qualified yet
to implement this approach. However, big companies like Microsoft, Sun Microsystems Inc and
TIBCO Software Inc want to use Ajax in their applications (4:1). This step will make Ajax is
very popular.
Microsoft wants to develop smart client strategy by implementing Ajax (9:2). Microsoft Atlas is
an Ajax based programming framework (8:1).
CONCLUSION:

Internet-applications have many benefits over desktop applications; they can reach a larger
audience, they are easier to install and support, and easier to develop. However, Internet-
applications are not always as "rich" and user-friendly as traditional desktop applications. AJAX
applications are browser- independent and platform-independent.

With AJAX, Internet applications can be made richer and more user-friendly. AJAX is not a new
programming language, but a new technique for creating better, faster, and more interactive web
applications. AJAX uses asynchronous data transfer (HTTP requests) between the browser and
the web server, allowing web pages to request small bits of information from the server instead
of whole pages. New applications use Ajax will be very popular.

REFRENCES:

www.google.com
www.w3schools.com
www.wikipedia.com
www.yourhtmlsource.com
www.whatis.com