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/
8/14/2019 Getting Hands on AJAX-New
2/42
Outline
1. What youre in for2. Whats AJAX?
3. Why AJAX?
4.
Look at AJAX example5. Issues related with AJAX
8/14/2019 Getting Hands on AJAX-New
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
8/14/2019 Getting Hands on AJAX-New
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.
8/14/2019 Getting Hands on AJAX-New
5/42
Who are using AJAX ?
8/14/2019 Getting Hands on AJAX-New
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
8/14/2019 Getting Hands on AJAX-New
7/42
Job Trends
8/14/2019 Getting Hands on AJAX-New
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.
8/14/2019 Getting Hands on AJAX-New
9/42
Traditional Web Interactio
Client makes http request
WebServer returns a new page
8/14/2019 Getting Hands on AJAX-New
10/42
How AJAX works
W
Client makes http request for specific information
Server returns the requested information
Multiple requests are served
8/14/2019 Getting Hands on AJAX-New
11/42
8/14/2019 Getting Hands on AJAX-New
12/42
8/14/2019 Getting Hands on AJAX-New
13/42
8/14/2019 Getting Hands on AJAX-New
14/42
-experiences
8/14/2019 Getting Hands on AJAX-New
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
8/14/2019 Getting Hands on AJAX-New
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
8/14/2019 Getting Hands on AJAX-New
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
8/14/2019 Getting Hands on AJAX-New
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
8/14/2019 Getting Hands on AJAX-New
19/42
8/14/2019 Getting Hands on AJAX-New
20/42
Walkthrough An Exam
8/14/2019 Getting Hands on AJAX-New
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
8/14/2019 Getting Hands on AJAX-New
22/42
HMTL Code
Hello I.T. FINAL YEAR
Click to let AJAX change this text
ClickMe
8/14/2019 Getting Hands on AJAX-New
23/42
JavaScript Code
8/14/2019 Getting Hands on AJAX-New
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
8/14/2019 Getting Hands on AJAX-New
25/42
8/14/2019 Getting Hands on AJAX-New
26/42
Important Properties
The XHR object has 3 important proThe responseText propertyThe readyState property
The onreadystatechange property
8/14/2019 Getting Hands on AJAX-New
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.
8/14/2019 Getting Hands on AJAX-New
28/42
8/14/2019 Getting Hands on AJAX-New
29/42
Make A Change
xmlhttp.onreadystatechange=state_Change();
8/14/2019 Getting Hands on AJAX-New
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); }
}
}
8/14/2019 Getting Hands on AJAX-New
31/42
INSPECT OUR CODE
8/14/2019 Getting Hands on AJAX-New
32/42
8/14/2019 Getting Hands on AJAX-New
33/42
8/14/2019 Getting Hands on AJAX-New
34/42
8/14/2019 Getting Hands on AJAX-New
35/42
8/14/2019 Getting Hands on AJAX-New
36/42
8/14/2019 Getting Hands on AJAX-New
37/42
iChat
8/14/2019 Getting Hands on AJAX-New
38/42
Login Forms
Auto-Complete
Chat InstaMess
Voting and RatingForSub
Val
Lightboxes Using AJAX Wit
8/14/2019 Getting Hands on AJAX-New
39/42
Lightboxes Using AJAX WitFlash
Drag and Drop Updating With UContent
8/14/2019 Getting Hands on AJAX-New
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
8/14/2019 Getting Hands on AJAX-New
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.php8/14/2019 Getting Hands on AJAX-New
42/42
THANK YOU