Ajax-web with dynamism

18
By Arpan Chavda By Arpan Chavda 09BCE006 09BCE006

description

This presentation will teach you basic ajax and its features.

Transcript of Ajax-web with dynamism

Page 1: Ajax-web with dynamism

By Arpan ChavdaBy Arpan Chavda

09BCE00609BCE006

Page 2: Ajax-web with dynamism

AJAX = Asynchronous JavaScript and XML

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

AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.

What is AJAX?

Page 3: Ajax-web with dynamism

Google Suggest AJAX was made popular in 2005 by Google, with

Google Suggest. Google Suggest is using AJAX to create a very

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

Afterwards, Google put AJAX on Gmail and youtube and lots of products and other websites also followed AJAXIAN method to make dynamic pages like facebook,twitter,Hotmail,etc.

History

Page 4: Ajax-web with dynamism

Examples

Google suggest

Page 5: Ajax-web with dynamism

Gmail

Page 6: Ajax-web with dynamism

Password verification

Page 7: Ajax-web with dynamism

How AJAX works?

Page 8: Ajax-web with dynamism

XMLHttpRequest - supports all kind of HTTP request type.

IFrame - It can make requests using both POST and GET methods

The interface is much responsive, instead of the whole page; a section of the page is transferred at a time.

Waiting time is reduced Traffic to and from the server is reduced.

Advantages

Page 9: Ajax-web with dynamism

XMLHttpRequest –Maintainance of Older Browsers. 

IFrame - implementation difference among different   browsers. Unnecessary history records.

Cookies - It prohibits no synchronous requests, it does not cope with large requests/results.

Disadvantages

Page 10: Ajax-web with dynamism

HTML(Hypertext Markup Language) XMLHttpRequest object (to exchange data

asynchronously with a server) JavaScript/DOM (to display/interact with the

information) CSS (to style the data) XML (often used as the format for transferring

data) You can use PHP or ASP.NET for your purpose

Prerequisites of AJAX

Page 11: Ajax-web with dynamism

XMLHttpRequest Object Open method Send method

Server Response Objects responseText Property responseXML Property

onreadystatechange event readyState property Status property

AJAX functions

Page 12: Ajax-web with dynamism

Syntax for creating an XMLHttpRequest object for Modern Browsers(IE7+,Chrome & Firefox):

variable=new XMLHttpRequest();

Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object:

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

XMLHttpRequest Object

Page 13: Ajax-web with dynamism

Method Description

open(method,url,async)

Specifies the type of request, the URL, and if the request should be handled asynchronously or not.method: the type of request: GET or POSTurl: the location of the file on the serverasync: true (asynchronous) or false (synchronous)

send(string) Sends the request off to the server.string: Only used for POST requests

Send a request to Server

variable.open("GET","ajax_info.txt",true);variable.send();

Page 14: Ajax-web with dynamism

responseText property get the response data as a string If the response from the server is not XML, use

the responseText property. Example:

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

Server Response

Page 15: Ajax-web with dynamism

responseXML property get the response data as XML data

Example:xmlDoc=xmlhttp.responseXML;

txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; }document.getElementById("myDiv").innerHTML=txt;

Conti.

Page 16: Ajax-web with dynamism

When using async=true, specify a function to execute when the response is ready in the onreadystatechange event:

Example 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();

Onreadystatechange event

Page 17: Ajax-web with dynamism

Property Descriptiononreadystatechange

Stores a function (or the name of a function) to be called automatically each time the readyState property changes

readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established2: request received 3: processing request 4: request finished and response is ready

status 200: "OK"404: Page not found

Page 18: Ajax-web with dynamism

Wiley -Learn JavaScript and Ajax with w3Schools.com-Ebook edition

O'Reilly Media, Inc. Head first AJAX by Rebecca Riordan

Ajax programming by Wikipedia (http://en.wikipedia.org/wiki/Ajax_(programming))

AJAX for Designers (Document) by David Heller

References