abc

1. Introduction What is Ajax? History Why use Ajax? Ajax as a combination of
Technologies How Ajax works? Advantages Drawbacks Future Conclusion References

2. 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.

3. 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 clientside 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.

4. 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.

5. 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)

6. 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 status responseText responseXml onreadystatechange The code
successively changes value from 0 to 4 that means for "ready". 200 is OK 404 if
the page is not found. Holds loaded data as a string of characters. 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 event is dispatched.

7. Methods
mode: type of request, GET or POST open(mode, url, boolean) 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
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)
{ xhr = new XMLHttpRequest(); } 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"); } catch(e) { xhr = new
XMLHttpRequest(); } // Other browsers. // Failed // Trying Internet Explorer //
Firefox, Safari, ... // Object of the current windows

8. 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);

9. 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; } };

10. 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.

11. 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;

12. 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.

13. Old technologies Comparison with AJAX.
Figure. 1(a)

14. 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.

15. 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).

16. 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, Internetapplications 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