naresh information technologies · • evolution of web • what is ajax • ajax role in web...

19
N aresh I nformation Technologies T echnologies Nagaraju Bende [email protected] MCAD.NET Sr Consultant,Trainer http://nbende.wordpress.com

Upload: others

Post on 31-Jul-2020

4 views

Category:

Documents


0 download

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

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

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

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

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

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

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

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

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

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

(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

������������������� ������������ ��� �.���/

-�����#�%�������&�'#�()(*+,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

(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

������������������� ���������������

-�����#���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

(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

• 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

�������������� �����������������

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

���������

���������

���������

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

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

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