A Report On Ajax Computer Science Essay

Published:

AJAX is shorthand for asynchronous JavaScript and XML. It is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously without prying with the display and actions of the existing page. The use of Ajax techniques has led to enhance in interactive and dynamic interfaces on web pages. Data are typically retrieved with the XMLHttpRequest object. Even though the name, the employ of XML is not really required, nor do the requests have to be asynchronous. In AJAX it is possible to update parts of a web page without reloading the whole page. Like DHTML, Ajax is not a developing tools itself, but a group of technologies. Ajax uses a grouping of HTML & CSS to mark-up and style information. Document Object Model (DOM) is accessed with JavaScript to dynamically display and to permit the user to relate with the information presented. JavaScript and XMLHttpRequest object give a method for exchanging data asynchronously among browser and server to avoid full page reloads.

Lady using a tablet
Lady using a tablet

Professional

Essay Writers

Lady Using Tablet

Get your grade
or your money back

using our Essay Writing Service!

Essay Writing Service

Classic web pages that do not use AJAX must reload the whole page if the content should change.

Examples of applications using AJAX are Google Maps, Gmail, Youtube and Facebook tab.

Background

In the year 1990, web browsers and web sites were based on static pages and each user action required that the page be reloaded from the server or a new page loaded. This could slow down user communication significantly.

Asynchronous loading of content first became realistic when Java applets have introduced in the first edition of the Java language in 1995. These permit compiled client-side code to stack data asynchronously from the web server after a web page is loaded. In 1996, Internet Explorer introduced the IFrame element to HTML, which also enabled asynchronous loading. In 1999, Microsoft created the XMLHTTP ActiveX control in Internet Explorer version5, which is currently supported by Safari, Mozilla, Opera and other browsers as the local XMLHttpRequest object. The benefit of background HTTP requests to the server & asynchronous web technologies remained reasonably unclear until Google made a large exploitation of Ajax with Gmail in 2004 and Google Maps in 2005.

Technologies in AJAX

In Ajax the following technologies are required:

JavaScript - XmlHttpRequest object

HTML/XHTML

DOM

XML

CSS

In the classic Web application model as discussed by Garrett, a user interacts with a Web server through a Web page running on their browser.

The AJAX Web application model adds an intermediary between the user and the server-side system, which is called an AJAX engine.

The AJAX engine is responsible for communicating with the server and for relaying any information from the server to the user interface

Figure-1

JavaScript call

datastores, backend processing, legacy systems

server-side systems

datastores, backend processing, legacy systems

server-side systems

HTTP request

classic

web application model

HTML + CSS data

http(s) transport

user interface

browser client

user interface

XML data

AJAX engine

user interface

browser client

web and/or XML server

AJAX

web application model

HTTP request

http(s) transport

HTML+CSS data

HTML DOM

DOM stands for Document Object Model; it is an abstract model of the documents, comprising a strict flow of information - typically top-down, from left to right

The DOM presents an HTML document as a tree-structure (a node tree), with elements, attributes, and text.

The HTML Document Object Model (HTML DOM) defines a standard way for accessing and manipulating HTML documents.

Document

Root element:

<html>

Element:

<head>

Root element:

<body>

Element:

<title>

Attribute:

<"href">

Element:

<a>

Element:

<h1>

Text:

"My title"

Text:

"My link"

Text:

Lady using a tablet
Lady using a tablet

Comprehensive

Writing Services

Lady Using Tablet

Plagiarism-free
Always on Time

Marked to Standard

Order Now

"My header"

Figure-2

HTML DOM and JavaScript

JavaScript uses predefined object document, which represents the document as DOM-tree to refer to the Web page it runs on

Documents are treated as trees of nodes

Every item in the documents is a "node" in the tree (both structural tags and attributes, as well as enclosed content texts are nodes)

Child elements and enclosed text are sub-nodes of the parent nodes

Each node may have associated procedures for processing of the node

AJAX Basic Steps

iii

Server-side System

Browser Client

ii

Web Server

HTTP Request

XML HttpRequest

iv

XML HttpRequest

Callback()

XML Data

v

JavaScript call

data

exchange

HTML & CSS data

i

datastores

User Interface

Figure-3 illustrates the following steps in a generalized Ajax request:

The following sequence of steps occurs in a general AJAX request [Figure-1]:

The user generates an event (e.g. entering input or clicking a button). This event triggers a call to a JavaScript function.

An XmlHttpRequest object is created and configured with a request parameter that includes the ID of the component that generated the event and any value that the user has entered.

The XmlHttpRequest object makes an asynchronous request to the web server, i.e. while the request is made the user interface is not blocked. The server processes the request, exchanges any data required from the data store.

Although Figure 1 shows that the web server returns XML Data in fact the server can return any fragment of data, which typically is an XML document or a plain text containing the result.

The XmlHttpRequest object calls a callback() function, it receives the data and processes the result.

The HTML DOM is updated.

How AJAX works

The following example explain how AJAX works:

<html>

<head>

<script type="text/javascript">

function loadXMLDoc()

{

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

}

</script>

</head>

The XMLHttpRequest object is used to swap data with a server in back end. This means that it is possible to update parts of a web page, without reloading the whole page.

XMLHttpRequest Object:

All current browsers like Internet Explorer 7 and more, Firefox, Safari, Chrome, Opera has a built-in XMLHttpRequest object.

How can create an XMLHttpRequest object (Syntax):

Xmlhttp = new XMLHttpRequest();

Old versions of Internet Explorer ie the Internet Explorer version less than or equal to 6 uses an ActiveX Object:

Xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

Sending Request to Server:

If we want to send request to server, we use the open() & send() methods of the XMLHttpRequest object:

xmlhttp.open ("GET", "ajax_info.txt",true);

xmlhttp.send();

Get method is faster and simpler however Post method it update a file or database on the server, it has no size limitations, POST is more robust and secure than GET

The url is a File On a Server

The url parameter of the open() method, is an address to a file on a server:

xmlhttp.open ("GET", "ajax_test.asp", true);

The file can be any type of file that is it can be like .txt and .xml or server scripting files, which is like .asp and .php which can perform actions on the server before sending the response back to the client.

Asynchronous (True or False?):

Lady using a tablet
Lady using a tablet

This Essay is

a Student's Work

Lady Using Tablet

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

Examples of our work

AJAX stands for Asynchronous JavaScript and XML, and for the XMLHttpRequest object to work as AJAX, the async parameter of the open() method has to be set to true:

xmlhttp.open("GET","ajax_test.asp",true);

By AJAX, the JavaScript does not need to wait for the server response, however can instead:

execute other scripts at the same time waiting for server response

deal with the response when the response prepared

Response of Server:

If we want to get the response from server, we should use either responseText or responseXML property of the XMLHttpRequest object

Property

Description

responseText

Which means get the response data as a string

responseXML

Which means get the response data as XML data

AJAX vs ActionScript

ActionScript is a very powerful RIA programming language that was launched in 1998 by Macromedia. It's deemed to be the most powerful programming language for RIA before Ajax. It uses Flash as a means of interacting with the users. Although it will require Flash in local computers, the popularity of Flash has made the interaction with the client side possible without any need of download. ActionScript is now controlled by Adobe who purchased Macromedia in 2005.

JavaScript before Ajax has been deemed as an "eye candy" programming language. The reason for this is that developers are not able to come in terms of XMLHttpRequest. Before Ajax, XHR is only limited to IE since Microsoft doesn't want to share this powerful function.

When Ajax was launched, JavaScript shed off its eye candy status and become one of the most sought after programming language today. Developers around the world are scrambling to learn this programming language to develop Ajax based applications.

Frameworks have also been developed to convert codes into JavaScript so that it could be developed into a full feature Ajax based application. From a simple eye candy programming language, JavaScript became a very powerful programming language for Rich Internet Application.

Although JavaScript has been developed into greater heights, ActionScript is continuously being developed by Adobe. Today, ActionScript could be easily compared to JavaScript as each of these RIA programming languages has their own advantages and disadvantages. Depending on the need of the developers, they should be able to select which programming language to select.

Using ActionScript

ActionScript's experience in providing RIA has been proven and it continuous to do so under the radar of JavaScript. Developers that use ActionScript are well known in building applications that could easily handle multimedia files.

Audio and video integration is no problem with the use of ActionScript. Obviously, the integration of Flash in ActionScript has enabled this feature. If the developer wants to build an application full of multimedia interaction, then ActionScript should be the choice of programming language.

But as expected, ActionScript is a lot heavier compared to JavaScript. ActionScript is also loose in its coding as it will never require the developer to be very conscious on the case of the codes.

Using JavaScript

On the other hand, JavaScript has been the option for developers in building lightweight applications. This is also the option for developers who also wanted to build an application that will never require any previous download.

Developers will be required to properly code JavaScript but this is eased up with the presence of hundreds of frameworks ready to be used in building an Ajax based application. Because of the popularity of JavaScript, support has been possible for almost any concerns…except security.

Even with the popularity of Ajax and JavaScript security is still the main concern of developers as this programming language can't be easily secured. The only way to secure JavaScript is through the assistance of other programming language.

Advantages:

There is no more slow full form-based interaction between the client and the server, but efficient interaction using request objects instead

There is no more slow page-based responding of the server since it returns fragments only

Traffic to and from the server is reduced considerably

There is no need for updating the whole page on the client - we can use the DOM object of the pages to modify them directly on the client without

Waiting time is reduced

The application fails graciously, without causing head-aches for the users.

Some Disadvantages

The forms are no longer self-contained, since they have context of use and carry hidden information

The Back button functionality of the browser is broken

The server-side needs to process directly the HTTP request which is no longer plain HTML but fragment, so the header of the response must be specified explicitly

Conclusion:

Using usual methods that content would have to be reloaded on every request. But using Ajax, a web application can request only the content that needs to be updated, as a result drastically reducing bandwidth usage and load time.

The use of Ajax can reduce connections to the server, while scripts and style sheets have to be requested once only.

State can be maintained all over a Web site. JavaScript variables will continue because the main container page need not be reloaded.

In conclusion AJAX is best use in website