Research and Application of Ajax Technology in

Web development
Presented by

Raghavendra
4SF12CS072
Guide: Ms. K. H. Naz Mufeeda
02/24/16

Contents
Abstract
Introduction
Literature survey
Methodology
Implementation
Experimental Results
Conclusion
References

02/24/16

Abstract
There are several highly interactive web applications and web
sites. Those sites faced a common problem of page refreshing.
Sometimes user had to wait for a long time to reload the page .
Ajax technology is now widely applied in Web development. It is
bundle of technologies combined together to create new,
dynamic, responsive and powerful web applications. Most of the
giant internet-based companies such as Google, Yahoo,
Microsoft and Amazon etc. have started developing web
application based on Ajax. It is making full use of existing
technical standards to update the page content without
refreshing the entire page.

02/24/16

Introduction
AJAX = Asynchronous JavaScript and XML.
The term AJAX is coined on February 18, 2005, by Jesse
James Garret
Ajax is a Web application client technology.
Ajax is a combination of JavaScript, CSS, HTML, the
XMLHttpRequest object, and Document Object Model(DOM).
AJAX allows web pages to be updated asynchronously by
exchanging small amounts of data with the server behind the
scenes

02/24/16

Literature survey
Asynchronous Communication in Web Technology[2]
Creation of XMLHttpRequest Object[3]
Process cycle of Ajax[4]

02/24/16

Methodology

Figure 1. Process cycle of Ajax[4]

02/24/16

Methodology(cont.)
A JavaScript creates an XMLHttpRequest object, initializes it
with relevant information as necessary, and sends it to the
server.
The server responds by sending the contents of a file.
When the response arrives from the server, a JavaScript
function is triggered to act on the data supplied by the server.
This JavaScript response function typically refreshes the
display using the DOM, avoiding the requirement to reload or
refresh the entire page.

02/24/16

Implementation
The keystone of AJAX is the XMLHttpRequest object.
All modern browsers (Chrome, IE7+, Firefox, Safari, and Opera)
have a built-in XMLHttpRequest object.
Syntax for creating an XMLHttpRequest object:
variable=newXMLHttpRequest();
Old versions of Internet Explorer (IE5 and IE6) use an ActiveX
Object:
variable=newActiveXObject("Microsoft.XMLHTTP");
To handle all browsers, including IE5 and IE6, check if the
browser supports the XMLHttpRequest object. If it does, create
an XMLHttpRequest object, if not, create an ActiveXObject:
02/24/16

Implementation(cont.)
Example:
varxhttp;
if(window.XMLHttpRequest) {
xhttp =newXMLHttpRequest();
}else{
// code for IE6, IE5
xhttp =newActiveXObject("Microsoft.XMLHTTP");
}

02/24/16

Implementation(cont.)
Send a Request To the Server
We use open() and send() methods of the XMLHttpRequest
object:
xhttp.open("GET","ajax_info.txt",true);
xhttp.send();
To get the response from a server, use the responseText or
responseXML property of the XMLHttpRequest object.

02/24/16

10

Implementation(cont.)
Here is an example of a simple Ajax request using theGET
method, written inJavaScript.
// This is the client-side script.
// Initialize the Http request.
var xhr = new XMLHttpRequest();
xhr.open('get', 'send-ajax-data.php');
// Track the state changes of the request.
xhr.onreadystatechange = function () {
var DONE = 4; // readyState 4 means the request is done.
02/24/16

11

Implementation(cont.)
var DONE = 4; // readyState 4 means the request is done.
var OK = 200; // status 200 is a successful return.
if (xhr.readyState === DONE) {
if (xhr.status === OK) {
alert(xhr.responseText); // 'This is the returned text.'
} else {
alert('Error: ' + xhr.status); // An error occurred during
the request.
}
}
}
02/24/16

12

Experimental Results

Figure 2. Before Ajax[5]

02/24/16

13

Experimental Results

Figure 3. Result of google search earlier[5]

02/24/16

14

Experimental Results

Figure 4. Google search these days[5]

02/24/16

15

Conclusion
Ajax web applications are the future of web applications.
It also provides flexibility to the users as well as developers.
Ajax is relatively young technology and there is lots of possibilities
to research.

02/24/16

16

References
[1] Jin Yuping, Research and Application of Ajax Technology in Web
Development,2011
[2]
International Journal of Innovative Research in Science,
Engineering and
Technology (An ISO 3297: 2007 Certified
Organization) Vol. 4, Issue 11,
November 2015
[3]
TheXMLHttpRequest
Object
http://www.w3schools.com/xml/xml-http.asp
[4]
Ji Wei, Research and Applications of Web Development Based
on
Ajax Design Pattern, Beijing: Beijing Jiaotong University, 2007.
[5]
www.hiteshagrawal.com/ajax/basics-of-ajax-part-1/

02/24/16

17

Thank you
02/24/16

18