naresh information technologies · • evolution of web • what is ajax • ajax role in web...
TRANSCRIPT
![Page 1: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/1.jpg)
Naresh InformationTechnologies
���������
���������
Technologies
Nagaraju [email protected]
MCAD.NET Sr Consultant,Trainer
http://nbende.wordpress.com
![Page 2: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/2.jpg)
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
![Page 3: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/3.jpg)
Evolution������������ �� ���� � ����� ������ ������������� ������� ������� �������� ���� ������������������ ������!����"���������������#����������� #����� ��$$� ��������� �����$�����%� ������ ����� ��������� �������$��������
�������������� �����������������
![Page 4: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/4.jpg)
AJAX == Asynchronous JavaScript and XMLAJAX is really a set of technologies working
together:XHTML and CSS for markup
What exactly is AJAX?
�������������� �����������������
DOM for display & interaction
XML and XSLT for data interchange & manipulation
JSON for marshalling objects
XMLHttpRequest for asynchronous communication
JavaScript for programming it all
3-Tier Client Server Applications
![Page 5: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/5.jpg)
So what is AJAX?
������&'�!���
��������&(�)��*��+��,-���������.����*��+����������!�,
/
��������&�������!�*� ������(���,-0�����������*� 1������(���,
�������������� �����������������
0�����������*� 1������(���,/
![Page 6: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/6.jpg)
Classic vs. AJAX
UI request handled locally, perhaps without server interaction
Page rendering handled locally, perhaps without
�������������� �����������������
perhaps without having to wait for server
![Page 7: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/7.jpg)
Sharing Application Business Logic
�������
���������
������������������
����������������
���23�+�� 4����� ���
�� �
�! "��
#!�����������
���
#!������$�����
%�������
����� ��
&����
������������!���
#!������'����
%�������
���
()'�*� �������
#!������'����
%�������
#!������'����
%�������
Session-State
������&&&&&&&&4����
'$��4�����
����� ���+�(
![Page 8: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/8.jpg)
Old XmlHttp Object & JavaScript
• With Microsoft Internet Explorer 5.0 as ActiveX library called MSXML was also introduced. XmlHttp is one of the object
• AJAX is not a new technology– Google calls their technique: Javascript
�������������� �����������������
– Google calls their technique: Javascript– Also known as XMLHTTP technique– In use since at least 1997
• The XMLHttp object was created to enable developers to initiate HTTP requests from anywhere in an application
![Page 9: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/9.jpg)
GetTime.htm A basic example
• This is the client-side page the user interacts with…– page contains the HTML and JavaScript for the UI– page makes the asynchronous server call to get
the time
�������������� �����������������
���������� �������� �� ����������������������������������� ����������������!�������
�!������"#�$#��#����%�������&�'#�()(*+,���-#� ��������!-#� �
�!"#�$��!�� ��
GetTime.htm
![Page 10: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/10.jpg)
(1) Client-side Initialization
• AJAX makes use of asynchronous XMLHttpRequests– when page loads, create XMLHttpRequest object for
communication
�������������� �����������������
![Page 11: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/11.jpg)
������������������� ������������ ��� �.���/
-�����#�%�������&�'#�()(*+,0
��$0�-+1���#1�(��� �*�"����,
� �.������1(��� �*�"����+�2���#�#-��*23.����,/�����-+1���#1�*23.���4�5����,
� �.������1*23.���4�5����+,/�����-+1���#1�������4�5����,
� �.����1���#1�������4�5����+,/6
�������������� �����������������
6�����+�,0� �.��������/6
6���
�!��������!������"#�$#��#����%�������&�'#�()(*+,����
�
![Page 12: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/12.jpg)
(2) Making the Call
• On button click, we make asynchronous call– when server responds, call to UpdateUI will be
made…
�������������� �����������������
![Page 13: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/13.jpg)
������������������� ���������������
-�����#���7���#�����8+,0
�-+� �.���������,0�����+�()(*9��$�����������#��#�����#��������,/
������/6!!#�������$���#������#�+���������$��,:� �.����#���+���;��<��� �������<����,/!!1���9��� ����������:� �.����#�����$������������=�����=%/!!������������5����+�������#�#�����<��� ��
�������������� �����������������
!!������������5����+�������#�#�����<��� ���������1���,:
� �.��������+����,/6���
�!��������!������"#�$#��#����%�������&�'#�()(*+,���-#� �
�������$����"���#��#�����8����7���#�����8+,� ���!��
![Page 14: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/14.jpg)
(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
�!��������!��������!��������!�������
![Page 15: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/15.jpg)
• 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 ActiveX object in IE4)
• Start.com portal
AJAX Apps on Web
�������������� �����������������
• Start.com portal• Google Maps - http://maps.google.com/• MSN Virtual Earth - http://virtualearth.msn.com/• Flickr Photo Sharing website – http://www.flickr.com
�����55��������!����$�����55������6���$�����55�������$
![Page 16: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/16.jpg)
�������������� �����������������
![Page 17: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/17.jpg)
���������
���������
���������
Nagaraju [email protected]
MCAD.NET Sr Consultant,Trainer
http://nbende.wordpress.com
![Page 18: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/18.jpg)
Observations
• How AJAX works!• The concept of AJAX
– asynchronous message-passing
• The trade-off is that client-side development is
�������������� �����������������
• The trade-off is that client-side development is more difficult:– browser differences (IE vs. Firefox vs. Opera vs. )
– concurrent programming style (race conditions, critical sections, …)
![Page 19: Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp](https://reader034.vdocument.in/reader034/viewer/2022050406/5f83dd532615c2524222a1b7/html5/thumbnails/19.jpg)
Using AJAXBenefits and Concerns
Benefits
• Richer application functionality
• Better end-user
Concerns
• Increased complexity for developers
• Increased attack surface
�������������� �����������������
• Better end-user experiences
• Decreased bandwidth utilization
• Improved scalability
• Increased attack surface