getting hands on ajax-new

8/14/2019 Getting Hands on AJAX-New

1/42

GETTING HANDS ON

AJAX

Submitted To:- Prof. Abhinav Juneja H.O.D CSE

Submitted By:- Chu

IT/


2/42

Outline

1. What youre in for2. Whats AJAX?

3. Why AJAX?

4.

Look at AJAX example5. Issues related with AJAX


3/42

What youre in for

A discussion about an emergapplication framework An introduction to the essent

elements of AJAX

Walkthrough the code of a wAJAX example

Issues related with AJAX


4/42

What is AJAX?

Asynchronous Javascript and XML Not all AJAX apps involve XML Combination of technologies HTML, CSS, DOM XML, XMLHttp, JavaScript

Not a language but a methodolog A method for building more respo

interactive applications.


5/42

Who are using AJAX ?


6/42

Why Do I Care About

Enables building Rich Internet Applications Allows dynamic interaction on the Web Improves performance Real-time updates, without reloading the w No plug-ins required Open Source Work on Open Standards Platform independence (OS, server, browse Compatible with HTML and existing web de

technologies


7/42

Job Trends


8/42

AJAX = Asynchronous JavaScand XML

JavaScript: used to make a requestweb server.

Asynchronous: means that the pro

will continue on without waiting for side retrieval to complete.

XML: may be used to receive the da

returned from the web server.


9/42

Traditional Web Interactio

Client makes http request

WebServer returns a new page


10/42

How AJAX works

W

Client makes http request for specific information

Server returns the requested information

Multiple requests are served


11/42


12/42


13/42


14/42

-experiences


15/42

Ajax Value Proposition

More productive end-users, lowebandwidth, and strong ROI Time spent waiting for data to be

transmitted.Time spent completing a particular Bandwidth consumed for the entire


16/42

Client vs. Server Scriptin

Client scriptingWeb browser does all the work

Server ScriptingWeb server does all the work

AJAX leverages both client andside scripting


17/42

AJAX Web Interaction

What you dont seeData reload happens in the backJavaScript queries the server to g

proper data without you knowingPage updates without a screen

AJAX uses the XMLHttpRequest


18/42

AJAX uses the XMLHttpRequestobject

Our JavaScript communicates directlthe server, through the JavaScript XHobject.

With the XHR object, a web page cana request to, and get a response fromweb server - without reloading the pa


19/42


20/42

Walkthrough An Exam


21/42

We create an AJAX application froscratch. It will have a click button to fetch

from a server and display the

information in a web page, withoreloading the page itself..

HMTL C d


22/42

HMTL Code

Hello I.T. FINAL YEAR

Click to let AJAX change this text

ClickMe


23/42

JavaScript Code


24/42

JavaScript Codefunction loadXMLDoc(url)

{

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

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

}

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

document.getElementById('test').innerHTML=xmlhttp.respo

}

create a XMLHobjec

Open the requesobject

if IE5 or IE6 cre

ActiveXObject

Update paresponse fro

Send request toserver


25/42


26/42

Important Properties

The XHR object has 3 important proThe responseText propertyThe readyState property

The onreadystatechange property


27/42

responseText - stores any data retrieved from a server.document.getElementById('test').innerHTML=xmlhttp.re

Once we have sent a request to the server we are not sure abrequest completion.

For this we need to set the onreadystatechange property, t(or name of a function) to be executed after completion.

In this onreadystatechange function we must test the readproperty before we can use the result of the server call.


28/42


29/42

Make A Change

xmlhttp.onreadystatechange=state_Change();


30/42

xmlhttp.open("GET",url,true);

xmlhttp.send(null);

function state_Change()

{

if(xmlhttp.readyState==4)

{ if (xmlhttp.status==200)

{ // 200 = "OK"

document.getElementById(test').innerHTML=xmlhttp.responseText

else

{

alert("Problem retrieving data:" + xmlhttp.statusText); }

}

}


31/42

INSPECT OUR CODE


32/42


33/42


34/42


35/42


36/42


37/42

iChat


38/42

Login Forms

Auto-Complete

Chat InstaMess

Voting and RatingForSub

Val

Lightboxes Using AJAX Wit


39/42

Lightboxes Using AJAX WitFlash

Drag and Drop Updating With UContent


40/42

Potential Problems

Ajax reliance on JavaScript Pages can be difficult to bookmTime lag Debugging is difficult Complexity of the code makes

difficult for web developers


41/42

AJAX - Further References Articles

Ajax: A New Approach to Web Applications by Jesse James Garretthttp://www.adaptivepath.com/publications/essays/archives/000385.php

Ajax gives software a fresh look(from CNET News)http://beta.news.com.com/Ajax+gives+software+a+fresh+look/2100-1005886709.html?

Weighing the Alternatives(from ajax info)http://www.ajaxinfo.com/default~viewart~8.htm

Resources XMLHttpRequest & Ajax Based Applications (from Fiftyfoureleven.com)

http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/ Foundations of Ajaxby Ryan Asleson, Nathaniel T. Schutta

ISBN: 1590595823 http://www.worldcatlibraries.org/wcpa/isbn/159059582 Tutorials

Getting Started with AJAX (from A List Apart)http://www.alistapart.com/articles/gettingstartedwithajax

AJAX:Getting Started (from Mozilla Developer Center)http://developer.mozilla.org/en/docs/AJAX:Getting_Started

Dynamic HTML and XML: The XMLHTTPRequest Object (from Apple DeveloConnection) http://developer.apple.com/internet/webcontent/xmlhttpreq.h

Mastering Ajax, Part 1: Introduction to Ajax (from IBM developerWorks)http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html?ca=dgr-wikiAJAXinto1
http://www.adaptivepath.com/publications/essays/archives/000385.phphttp://beta.news.com.com/Ajax+gives+software+a+fresh+look/2100-1007_3-5886709.html?http://beta.news.com.com/Ajax+gives+software+a+fresh+look/2100-1007_3-5886709.html?http://www.ajaxinfo.com/default~viewart~8.htmhttp://www.ajaxinfo.com/default~viewart~8.htmhttp://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/http://www.worldcatlibraries.org/wcpa/isbn/1590595823http://www.alistapart.com/articles/gettingstartedwithajaxhttp://developer.mozilla.org/en/docs/AJAX:Getting_Startedhttp://developer.apple.com/internet/webcontent/xmlhttpreq.htmlhttp://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html?ca=dgr-wikiAJAXinto1http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro1.html?ca=dgr-wikiAJAXinto1http://developer.apple.com/internet/webcontent/xmlhttpreq.htmlhttp://developer.mozilla.org/en/docs/AJAX:Getting_Startedhttp://www.alistapart.com/articles/gettingstartedwithajaxhttp://www.worldcatlibraries.org/wcpa/isbn/1590595823http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/http://www.ajaxinfo.com/default~viewart~8.htmhttp://beta.news.com.com/Ajax+gives+software+a+fresh+look/2100-1007_3-5886709.html?http://www.adaptivepath.com/publications/essays/archives/000385.php


42/42

THANK YOU

getting hands on ajax-new

Documents