ajax v4 day 1 blog
TRANSCRIPT
-
7/31/2019 Ajax v4 Day 1 Blog
1/19
NareshInformation
Technologies
Nagaraju Bende
MCAD.NET Sr Consultant,Trainer
http://nbende.wordpress.com
-
7/31/2019 Ajax v4 Day 1 Blog
2/19
Agenda Day 1
Evolution of Web What is AJAX
AJAX Role in Web Applications
Web Apps Classic & AJAX based Business Tier Model
XmlHttp and JavaScript
Important Terms of AJAX
Demos
-
7/31/2019 Ajax v4 Day 1 Blog
3/19
Evolution
!" # # $$ $% $
-
7/31/2019 Ajax v4 Day 1 Blog
4/19
AJAX == Asynchronous JavaScript and XML
AJAX is really a set of technologies workingtogether:
XHTML and CSS for markup
What exactly is AJAX?
DOM for display & interactionXML and XSLT for data interchange & manipulation
JSON for marshalling objects
XMLHttpRequest for asynchronous communication
JavaScript for programming it all
3-Tier Client Server Applications
-
7/31/2019 Ajax v4 Day 1 Blog
5/19
So what is AJAX?
&'!
&()*+,
-.*+!,/
&!*(,-
0 (
/
-
7/31/2019 Ajax v4 Day 1 Blog
6/19
Classic vs. AJAX
UI request handledlocally, perhapswithout serverinteraction
Page renderinghandled locally,
having to wait forserver
-
7/31/2019 Ajax v4 Day 1 Blog
7/19
Sharing Application Business Logic
23+
4
!"
#!
#!$%
&
!
#!
'%
()'*
#!'%
#!'
%
Session-State
&&&&&&&&4
'$4
+(
-
7/31/2019 Ajax v4 Day 1 Blog
8/19
Old XmlHttp Object & JavaScript
With Microsoft Internet Explorer 5.0 asActiveX library called MSXML was also
introduced. XmlHttp is one of the object
AJAX is not a new technology
Google calls their technique: Javascript Also known as XMLHTTP technique
In use since at least 1997
The XMLHttp object was created to enabledevelopers to initiate HTTP requests fromanywhere in an application
-
7/31/2019 Ajax v4 Day 1 Blog
9/19
GetTime.htm A basic example
This is the client-side page the user interactswith
page contains the HTML and JavaScript for the UI
page makes the asynchronous server call to getthe time
!!"#$##%&'#()(*+,
-#
!-#!"#$
!
GetTime.htm
-
7/31/2019 Ajax v4 Day 1 Blog
10/19
(1) Client-side Initialization
AJAX makes use of asynchronousXMLHttpRequests
when page loads, createXMLHttpRequestobject for
communication
-
7/31/2019 Ajax v4 Day 1 Blog
11/19
./
-#%&'#()(*+,0
$0
-+1#1(*",
.1(*"+2##-*23.,/-+1#1*23.45,
.1*23.45+,/-+1#145,
.1#145+,/
+,0./6
6
!!"#$##%&'#()(*+,
-
7/31/2019 Ajax v4 Day 1 Blog
12/19
(2) Making the Call
On button click, we make asynchronous call
when server responds, call to UpdateUIwill bemade
-
7/31/2019 Ajax v4 Day 1 Blog
13/19
-#7#8+,0
-+.,0+()(*9$###,/
/6!!#$##+$,:.#+;
-
7/31/2019 Ajax v4 Day 1 Blog
14/19
(3) Updating the UI
When server responds, UI is updated
-#-#-#-#==%==%==%==%+,+,+,+,0000
!!:!!:!!:!!:!!>&!!>&!!>&!!>&
?#?#?#?#
!!@#!!@#!!@#!!@#!!A!!A!!A!!A!!B#!!B#!!B#!!B#-+-+-+-+.$;.$;.$;.$; B,B,B,B,!!#!!#!!#!!#0000
-+-+-+-+.... @>>,@>>,@>>,@>>,!!C!!C!!C!!C0000
#7$%+,$$D"#8D/#7$%+,$$D"#8D/#7$%+,$$D"#8D/#7$%+,$$D"#8D/#7$%+",.23#7$%+",.23#7$%+",.23#7$%+",.23.#.#.#.#////
6666
+###:E.,/+###:E.,/+###:E.,/+###:E.,/6666
6666!!!!
-
7/31/2019 Ajax v4 Day 1 Blog
15/19
GMail http://mail.google.com Google Suggest -
http://www.google.com/webhp?complete=1&hl=en Outlook Web Access Comes as part of Exchange
Server (Available from 1998 XmlHttpRequest ActiveXobject in IE4)
AJAX Apps on Web
.
Google Maps - http://maps.google.com/ MSN Virtual Earth - http://virtualearth.msn.com/ Flickr Photo Sharing website http://www.flickr.com
55!$556$55$
-
7/31/2019 Ajax v4 Day 1 Blog
16/19
-
7/31/2019 Ajax v4 Day 1 Blog
17/19
Nagaraju [email protected]
MCAD.NET Sr Consultant,Trainer
http://nbende.wordpress.com
-
7/31/2019 Ajax v4 Day 1 Blog
18/19
Observations
How AJAX works!
The concept of AJAX asynchronous message-passing
The trade-off is that client-side development ismore difficult:
browser differences (IE vs. Firefox vs. Opera vs. )
concurrent programming style (race conditions,critical sections, )
-
7/31/2019 Ajax v4 Day 1 Blog
19/19
Using AJAX
Benefits and Concerns
Benefits
Richer applicationfunctionality
-
Concerns
Increased complexity fordevelopers
experiences
Decreased bandwidthutilization
Improved scalability
ncrease a ac sur ace