Introduction What is Ajax? History Why use Ajax? Ajax as a combination of Technologies 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? XML): 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 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.
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
status
The code successively changes value from 0 to 4 that means for "ready". 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, DOM's method allows to extract data.
onreadystatechange
Property that takes a function as value that is invoked when the r eadystatechange eadystatechange event is dispatched.
Methods
mode: type of request, GET or POST boolean) open(mode, url, boolean) open(mode,
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.
ing") send("string") send("str
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) (window.XMLHttpRequest)
// Object of the current windows
{ xhr = new XMLHttpRequest();
// Firefox, 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(); XMLHtt pRequest(); }
// 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 <script> function submitForm() { var xhr; try { xhr = new ActiveXObject('Msxml2.XMLH ActiveXObject( 'Msxml2.XMLHTTP'); TTP'); } catch (e) { try { xhr = new ActiveXObject('Microso ActiveXOb ject('Microsoft.XMLHTTP'); ft.XMLHTTP'); catch (e2) { try { xhr = new XMLHttpRequest(); XMLHtt pRequest();
}
catch (e3) { xhr = false; } } }
xhr.onreadystatechange xhr.onreadystat echange = function() { if(xhr.readyState if(xhr.read yState == 4) { if(xhr.status == 200) document.ajax.dyn="Received:" document.ajax.dyn="Rece ived:" + xhr.responseText; else document.ajax.dyn="Error code " + xhr.status; } };
}
xhr.open(GET, "data.txt", true); xhr.send(null); }
Syntax of form using Ajax
Comments on the code: new ActiveXObject(Microsof ActiveXObject(Microsoft.XMLHTTP) t.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.
... some text to replace ...
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 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">
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, 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
