7/31/2019 ramya-090827102721-phpapp01

1/28

7/31/2019 ramya-090827102721-phpapp01

2/28

7/31/2019 ramya-090827102721-phpapp01

3/28

History of AJAX

What is AJAX ?

AJAX Introduction

Why AJAX is Important ?

AJAX XMLHttpRequest

AJAX Example

AJAX Browser Support

AJAX - The XMLHttpRequest Object

AJAX - Request a Serve

AJAX - The Server-Side Script

end

7/31/2019 ramya-090827102721-phpapp01

4/28

History of AJAX

On April 30, 1993, CERN announced that the World Wide Web would be free foranyone to use and the Web took off, jumping from 130 Web sitesin 1993, to over100,000in 1996, to 11.5 billion sites in 2005.

The main protocol used on the Web is the Hypertext Transfer Protocol (HTTP).It's a patented open Internet request/response protocol intended to publish and

receive HTML pages.

The Web was never meant to be used for applications, only mass storage orlinked content. Ever since the Web came out, developers have been struggling toget around the request/response sequence.

Browser asynchronous hacks have been possible since 1996, when InternetExplorer introduced the IFRAME tag

HOMENEXT

7/31/2019 ramya-090827102721-phpapp01

5/28

Microsoft's Remoting Scriptingor MSRS was introduced in 1998. Thisdevice was more elaborate than previous hack attempts and used JavaScript

to communicate with a hidden Java applet that was in charge of theasynchronous communication.

In 2002, Microsoft replaced Remoting Scripting with the XMLHttpRequestobject, which was quickly copied by all the major browsers.

Most modern browsers now implement Uniform Resource Identifier (URI),HTTP/1.1, HTML 4.01, Document Object Model (DOM), and JavaScript.This means that there is less need for conditional statements to applydifferent scripts depending on the browser.

Historically, Web sites improved in user experience by implementing

Dynamic HTML or DHTML, a method of combining HTML, JavaScript,Cascading Style Sheets (CSS), and Document Object Model (DOM) tointeract with user events.

PREVNEXT

7/31/2019 ramya-090827102721-phpapp01

6/28

AJAX is only a communication layer and does not include any visualelements. However, because AJAX, like DHTML, is based on JavaScript, itcan achieve amazing results.

The term AJAX was coined on February 18, 2005, by Jesse James

Garret(Father of AJAX)in a short essay published a few days afterGoogle released its Maps application.

PREVNEXT

7/31/2019 ramya-090827102721-phpapp01

7/28

When Google launched its AJAX services, it gave AJAX awareness, trust,and credibility.

IBM and a group of industry leaders announced on February 2006, anopen source initiative to promote AJAX adoption.

This initiative, known as OpenAjax , is supported by over 60 companiesand organizations including BEA Systems, Borland, the Dojo Foundation,

the Eclipse Foundation, Google, IBM, Laszlo Systems, Mozilla, Nexaweb,Novell, Openwave Systems, Oracle, Red Hat, Yahoo, Zend, and Zimbra.

PREVHOME

7/31/2019 ramya-090827102721-phpapp01

8/28

AJAX = Asynchronous JavaScript and XML.

AJAX is based on JavaScript and HTTP requests.

AJAX is a type of programming made popular in 2005 by Google (withGoogle Suggest).

AJAX is not a new programming language, but a new way to useexisting standards.

AJAX is a group of interrelated web development techniques used onthe client-side to create interactive web applications or rich Internet

applications.

HOMENEXT

7/31/2019 ramya-090827102721-phpapp01

9/28

With Ajax, web applications can retrieve data from the serverasynchronously in the background without interfering with the display andbehavior of the existing page.

The use of Ajax has led to an increase in interactive animation on webpages and better quality of Web services due to the asynchronous mode.

Data is usually retrieved using the XMLHttpRequestobject

PREVHOME

7/31/2019 ramya-090827102721-phpapp01

10/28

AJAX is not a new programming language, but a new technique forcreating better, faster, and more interactive web applications.

With AJAX, a JavaScript can communicate directly with the server, with

the XMLHttpRequest object. With this object, a JavaScript can trade datawith a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between thebrowser and the web server, allowing web pages to request small bits ofinformation from the server instead of whole pages.

HOMENEXT

7/31/2019 ramya-090827102721-phpapp01

11/28

AJAX is based on the following web standards:

JavaScript XML HTML CSSAJAX applications are browser- and platform-independent

Internet-applications have many benefits over desktop

applications; they can reach a larger audience, they are easier toinstall and support, and easier to develop.

With AJAX, Internet applications can be made richer and moreuser-friendly.

PREVHOME

7/31/2019 ramya-090827102721-phpapp01

12/28

AJAX enables a much betteruser experience for Web sites andapplications.

Developers can now provide user interfaces that are nearly as

responsive and rich as more traditional Windows Forms applicationswhile taking advantage of the Web's innate ease of deployment andheterogeneous, cross-platform nature.

These benefits have been shown to dramatically reduce softwaremaintenance costs and increase its reach. You can use AJAX to only

load the portions of pages that change,

HOMEHOME

7/31/2019 ramya-090827102721-phpapp01

13/28

To get or send information from/to a database or a file on the serverwith traditional JavaScript, you will have to make an HTML form, and auser will have to click the "Submit" button to send/get the information,wait for the server to respond, then a new page will load with theresults.

Because the server returns a new page each time the user submitsinput, traditional web applications can run slowly and tend to be lessuser-friendly.

With AJAX, your JavaScript communicates directly with the server,

through the JavaScript XMLHttpRequest object.

HOMENEXT

7/31/2019 ramya-090827102721-phpapp01

14/28

PREVNEXT

7/31/2019 ramya-090827102721-phpapp01

15/28

With the XMLHttpRequest object, a web page can make a requestto, and get a response from a web server - without reloading thepage.

The user will stay on the same page, and he or she will not noticethat scripts request pages, or send data to a server in thebackground.

By using the XMLHttpRequest object, a web developer canupdate a page with data from the server after the page hasloaded!

Google Suggest is using the XMLHttpRequest object to create a

very dynamic web interface: When you start typing in Google's searchbox, a JavaScript sends the letters off to a server and the serverreturns a list of suggestions.

PREVHOME

7/31/2019 ramya-090827102721-phpapp01

16/28

First AJAX application :

To understand how AJAX works, we will create a small AJAXapplication.First we are going to create a standard HTML form with two inputfields: Name and Time. The "Name" field will be filled out by theuser, and the "Time" field will be filled out with AJAX.

The HTML file will be named "testAjax.htm", and it looks like this :

Name:

Time:

HOMENEXT

7/31/2019 ramya-090827102721-phpapp01

17/28

Output :

PREV HOME

7/31/2019 ramya-090827102721-phpapp01

18/28

The keystone of AJAX is the XMLHttpRequest object.

All new browsers use the built-in JavaScript XMLHttpRequestobject to create an XMLHttpRequest object (IE5 and IE6 uses an

ActiveXObject).

Let's update our "testAjax.htm" file with a JavaScript that creates anXMLHttpRequest object:

HOMENEXT

7/31/2019 ramya-090827102721-phpapp01

19/28

function ajaxFunction(){var xmlhttp;if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}

else if (window.ActiveXObject)

{ // code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

else{alert("Your browser does not support XMLHTTP!");}

}Name: Time:

PREV NEXT

7/31/2019 ramya-090827102721-phpapp01

20/28

Example explained

1. Create a variable named xmlhttpto hold the XMLHttpRequestobject.

2. Try to create the XMLHttpRequest object with xmlhttp=newXMLHttpRequest().

3. If that fails, try xmlhttp=newActiveXObject("Microsoft.XMLHTTP"). This is for IE6 and IE5.

4. If that fails too, the user has a very outdated browser, and will getan alert stating that the browser doesn't support XMLHTTP.

PREVHOME

7/31/2019 ramya-090827102721-phpapp01

21/28

Before sending data off to a server, we will look at three important properties

of the XMLHttpRequest object.

1. The onreadystatechange propertyo After a request to a server, we need a function to receive the data returned

from the server.o The onreadystatechange property stores the function that will process the

response from a server. The function is stored in the property to be calledautomatically.

o The following code sets the onreadystatechange property and stores anempty function inside it:

xmlhttp.onreadystatechange=function(){

// We are going to write some code here}

HOMENEXT

7/31/2019 ramya-090827102721-phpapp01

22/28

2. The readyState propertyo The readyState property holds the status of the server's response.o Each time the readyState property changes, the onreadystatechange

function will be executed.o Possible values for the readyState property:

Add an If statement to the onreadystatechange function to test if theresponse is complete

xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4){

// Get data from the server's response

}}

State Description

0 The request is not initialized1 The request has been set up2 The request has been sent3 The request is in process4 The request is complete

PREVNEXT

7/31/2019 ramya-090827102721-phpapp01

23/28

3. The responseText property

o The data sent back from a server can be retrieved with the

responseText propertyo Now, we want to set the value of the "Time" input field equal to

responseText:

xmlhttp.onreadystatechange=function(){

if(xmlhttp.readyState==4){document.myForm.time.value=xmlhttp.responseText;}

}

PREVHOME

7/31/2019 ramya-090827102721-phpapp01

24/28

To send off a request to the server, we use the open() and send() methods.

The open() method takes three arguments. The first argument defines which method to use when sending the request(GET or POST). The second argument specifies the URL of the server-side script. The third argument specifies that the request should be handled

asynchronously.

The send() method sends the request off to the server. If we assume thatthe HTML and ASP file are in the same directory, the code would be:

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

xmlhttp.send(null);

Now we must decide when the AJAX function should be executed.

HOMENEXT

7/31/2019 ramya-090827102721-phpapp01

25/28

We will let the function run "behind the scenes" when a user typessomething in the "Name" field:

Name: Time:

Our updated "testAjax.htm" file now looks like this:

function ajaxFunction()

{var xmlhttp;if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();}else if (window.ActiveXObject){// code for IE6, IE5

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

PREVNEXT

7/31/2019 ramya-090827102721-phpapp01

26/28

else{alert("Your browser does not support XMLHTTP!");

}xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4){document.myForm.time.value=xmlhttp.responseText;

}}xmlhttp.open("GET","time.asp",true);xmlhttp.send(null);}

Name: Time:

PREVHOME

7/31/2019 ramya-090827102721-phpapp01

27/28

Now we are going to create the server-side script that displays the

current time.

The responseText property will store the data returned from the server.Here we want to send back the current time.

The code in "time.asp" looks like this:

Note: The response.expires command sets how long time (in minutes) apage will be cached on a browser before it expires. If a user returns tothe same page before it expires, the cached version is displayed.response.expires=-1 indicates that the page will never be cached.

PREVNEXT

7/31/2019 ramya-090827102721-phpapp01

28/28

Referenced sites:

http://www.w3schools.comhttp://www.infragistics.com

http://java.sun.comhttp://www.trishalyn.com

Presented

By

M.Ramya

MCA III Year