Naresh Information Technologies · • Evolution of Web • What is AJAX • AJAX Role in Web Applications • Web Apps – Classic & AJAX based • Business Tier Model • XmlHttp

Post on 31-Jul-2020

2 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

Transcript

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

top related