Post on 31-Jul-2020
Naresh InformationTechnologies
���������
���������
Technologies
Nagaraju Bendenbende@gmail.com
MCAD.NET Sr Consultant,Trainer
http://nbende.wordpress.com
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
Evolution������������ �� ���� � ����� ������ ������������� ������� ������� �������� ���� ������������������ ������!����"���������������#����������� #����� ��$$� ��������� �����$�����%� ������ ����� ��������� �������$��������
�������������� �����������������
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
So what is AJAX?
������&'�!���
��������&(�)��*��+��,-���������.����*��+����������!�,
/
��������&�������!�*� ������(���,-0�����������*� 1������(���,
�������������� �����������������
0�����������*� 1������(���,/
Classic vs. AJAX
UI request handled locally, perhaps without server interaction
Page rendering handled locally, perhaps without
�������������� �����������������
perhaps without having to wait for server
Sharing Application Business Logic
�������
���������
������������������
����������������
���23�+�� 4����� ���
�� �
�! "��
#!�����������
���
#!������$�����
%�������
����� ��
&����
������������!���
#!������'����
%�������
���
()'�*� �������
#!������'����
%�������
#!������'����
%�������
Session-State
������&&&&&&&&4����
'$��4�����
����� ���+�(
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
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
(1) Client-side Initialization
• AJAX makes use of asynchronous XMLHttpRequests– when page loads, create XMLHttpRequest object for
communication
�������������� �����������������
������������������� ������������ ��� �.���/
-�����#�%�������&�'#�()(*+,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���
�!��������!������"#�$#��#����%�������&�'#�()(*+,����
�
(2) Making the Call
• On button click, we make asynchronous call– when server responds, call to UpdateUI will be
made…
�������������� �����������������
������������������� ���������������
-�����#���7���#�����8+,0
�-+� �.���������,0�����+�()(*9��$�����������#��#�����#��������,/
������/6!!#�������$���#������#�+���������$��,:� �.����#���+���;��<��� �������<����,/!!1���9��� ����������:� �.����#�����$������������=�����=%/!!������������5����+�������#�#�����<��� ��
�������������� �����������������
!!������������5����+�������#�#�����<��� ���������1���,:
� �.��������+����,/6���
�!��������!������"#�$#��#����%�������&�'#�()(*+,���-#� �
�������$����"���#��#�����8����7���#�����8+,� ���!��
(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
�!��������!��������!��������!�������
• 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�������$
�������������� �����������������
���������
���������
���������
Nagaraju Bendenbende@gmail.com
MCAD.NET Sr Consultant,Trainer
http://nbende.wordpress.com
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, …)
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