<ul><li>Introducing .NET &  ASP.NET </li></ul><ul><li>by Anil Kumar Donthula </li></ul>
<ul><li>Ajax means asynchronous JavaScript and xml </li></ul><ul><li>This Asynchronous mode or Ajax architecture is develo...
Client Server 2 2 4 4 4 2 1 1 1
Synchronous Request Model <ul><li>step1: </li></ul><ul><li>user prepares the request at client side </li></ul><ul><li>step...
Disadvantages: <ul><li>1.User idle time is more because until server process the </li></ul><ul><li>request user need to si...
Asynchronous request model 1 1 1 3 3 3 2 2 5 5 5 2 6 6 6 4 4 4 7 7 7 Client Ajax Engine Server
ASynchronous Request Model <ul><li>step1: </li></ul><ul><li>User prepares a request at client side. </li></ul><ul><li>step...
Asynchronous request model <ul><li>step5: </li></ul><ul><li>Ajax engine will deliver response to the user. </li></ul><ul><...
Advantages: <ul><li>1.User idle time is reduced and user will be get very quick response </li></ul><ul><li>2.Burden on the...
List of Ajax Frameworks <ul><li>Once J.J Garet introduced Ajax ,so many other people or companies developed different kind...
Asp. Net Ajax <ul><li>1.Micro soft asp.net Ajax enable to create rich user experience </li></ul><ul><li>websites. </li></u...
Components of Asp.net Ajax <ul><ul><ul><ul><ul><li>1.Html+Css </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>2.Dom(...
Html+Css: <ul><li>Html is used to perform the necessary design understood by the client. </li></ul><ul><li>Css are used to...
DOM: <ul><li>Displaying the data in hierarchal manner is known as DOM. </li></ul><ul><li>There are 2 types of DOM availabl...
JavaScript <ul><li>It is used to perform required validations and events at client side </li></ul>
J son <ul><li>It is a light weight data interchange format. Json format is introduced by Douglas crock ford. Default Exten...
Xml Http Request XML HTTP REQUEST EVENT  HTML DOM IIS Client Server XML XML 1 2 5 3 4
Xml Http Request <ul><li>step1: </li></ul><ul><li>A Request event will be raised from Html Dom in the form of JavaScript. ...
Xml Http Request <ul><li>step4: </li></ul><ul><li>server will process the request and sends the result in xml form to the ...
Programming Model in Asp.net Ajax: <ul><ul><ul><ul><li>Asp. Net ajax supports 2 types of programming model. </li></ul></ul...
Client centric model Presentation ATLAS SERVICE PROXY UI BEHAVIOUR SCRIPT PAGES WEB SERVICES Client Browser Server Initial...
Client centric model <ul><li>In this method at 1st request of the page server will deliver all UI interface elements along...
Server centric Model Presentation PAGES UI Behaviours Client Browser Server Asp. Net Appl Initial Rendering Input Data Upd...
Server centric Model <ul><li>In this method the application logic code and most of the UI related code remain on the serve...
Working with ajax: <ul><ul><li>At server side ,along with asp.net VS .Net Controls we find the following controls. </li></...
script manager: <ul><li>script manager control is responsible to make any webpage as ajax enabled webpage. In any webpage,...
update panel: <ul><li>It is used to provide client centric programming model. </li></ul><ul><li>Any control we placed in u...
Working with ajax control tool kit: <ul><ul><li>1.Ajax control tool kit provide different types of user interface controls...
Extended controls <ul><li>Extended controls require help of other controls. </li></ul><ul><li>They can't work individually...
Non Extended controls <ul><li>These controls can work individually and do not work as a supportive controls. </li></ul>
Steps to add DLL to the toolbox: <ul><li>Create a new web application </li></ul><ul><li>Go to the toolbox </li></ul><ul><l...
<ul><li>Thank You ! </li></ul>
Upcoming SlideShare
Loading in …5
×

Ajaxppt

1,799 views

Published on

Published in: Education
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,799
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Ajaxppt

  1. 1. <ul><li>Introducing .NET & ASP.NET </li></ul><ul><li>by Anil Kumar Donthula </li></ul>
  2. 2. <ul><li>Ajax means asynchronous JavaScript and xml </li></ul><ul><li>This Asynchronous mode or Ajax architecture is developed by J.J.Garet(Jessy James Garet) in the year 2005. </li></ul><ul><li>The term Ajax also coined(introduced) by him in the same year </li></ul><ul><li>In general with out Ajax whatever the request we send to the server from the client is known as synchronous request </li></ul>
  3. 3. Client Server 2 2 4 4 4 2 1 1 1
  4. 4. Synchronous Request Model <ul><li>step1: </li></ul><ul><li>user prepares the request at client side </li></ul><ul><li>step2: </li></ul><ul><li>request is send to the server </li></ul><ul><li>step3: </li></ul><ul><li>server will process the request </li></ul><ul><li>step4: </li></ul><ul><li>client gets the response from the server </li></ul><ul><li>These steps will repeat again and again as long as </li></ul><ul><li>user is interact with website. </li></ul>
  5. 5. Disadvantages: <ul><li>1.User idle time is more because until server process the </li></ul><ul><li>request user need to sit idle </li></ul><ul><li>2.Burden on the server will be more because complete client request should be processed by server only. </li></ul><ul><li>3.Burden on the network is more, because every thing is </li></ul><ul><li>coming from server to client. </li></ul><ul><li>To overcome these, we use Asynchronous model. </li></ul>
  6. 6. Asynchronous request model 1 1 1 3 3 3 2 2 5 5 5 2 6 6 6 4 4 4 7 7 7 Client Ajax Engine Server
  7. 7. ASynchronous Request Model <ul><li>step1: </li></ul><ul><li>User prepares a request at client side. </li></ul><ul><li>step2: </li></ul><ul><li>Request is sent to Ajax engine at client side. </li></ul><ul><li>step3: </li></ul><ul><li>some part of the request will be processed by the Ajax engine at client side only. </li></ul><ul><li>step4: </li></ul><ul><li>Request is delivered to server by Ajax engine. </li></ul>
  8. 8. Asynchronous request model <ul><li>step5: </li></ul><ul><li>Ajax engine will deliver response to the user. </li></ul><ul><li>step6: </li></ul><ul><li>server process the request. </li></ul><ul><li>step7: </li></ul><ul><li>Result is delivered to the client. </li></ul><ul><li>Before response comes from the server user starts preparing other request at client side. </li></ul><ul><li>This process will be repeated as long user interacting with the server. </li></ul>
  9. 9. Advantages: <ul><li>1.User idle time is reduced and user will be get very quick response </li></ul><ul><li>2.Burden on the server is reduced, because some part of the request is processed by the Ajax Engine only. </li></ul><ul><li>3.Burden on the network is reduced, because payload coming from server is less. </li></ul>
  10. 10. List of Ajax Frameworks <ul><li>Once J.J Garet introduced Ajax ,so many other people or companies developed different kinds of Ajax frameworks in support to their technologies </li></ul><ul><li>Those are: </li></ul><ul><ul><ul><li>1.BackBase </li></ul></ul></ul><ul><ul><ul><li>2.DOJO tool kit </li></ul></ul></ul><ul><ul><ul><li>3.Ext </li></ul></ul></ul><ul><ul><ul><li>4.Jquery </li></ul></ul></ul><ul><ul><ul><li>5.Prototype </li></ul></ul></ul><ul><ul><ul><li>6.Mootools </li></ul></ul></ul><ul><ul><ul><li>7.Script.aculo.us </li></ul></ul></ul><ul><ul><ul><li>8.Yahoo.UI Library </li></ul></ul></ul>
  11. 11. Asp. Net Ajax <ul><li>1.Micro soft asp.net Ajax enable to create rich user experience </li></ul><ul><li>websites. </li></ul><ul><li>2.Asp.net Ajax software is spread at client side and also at server side. </li></ul><ul><li>3.It provides partial updates of the WebPages by processing most parts of request at client side only. </li></ul><ul><li>4.using Asp. Net Ajax we can create very good user interface elements, such as Progress indicators, tooltips, popup windows etc. </li></ul><ul><li>5.Asp.net support most popular and generally user browsers like </li></ul><ul><li>Internet Explorer, Mozilla Firefox, Apple Saffari,Netscape Navigator </li></ul>
  12. 12. Components of Asp.net Ajax <ul><ul><ul><ul><ul><li>1.Html+Css </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>2.Dom(Document object Model) </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>3.Javascript </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>4.Json(Javascript Object Notation) </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>5.Xml Http Request </li></ul></ul></ul></ul></ul>
  13. 13. Html+Css: <ul><li>Html is used to perform the necessary design understood by the client. </li></ul><ul><li>Css are used to apply required styles for these designs. </li></ul><ul><li>Css are introduced in the year 1996 </li></ul><ul><li>There are 3 types of Css available </li></ul><ul><li>1.Inline </li></ul><ul><li>2.Internal </li></ul><ul><li>3.External </li></ul>
  14. 14. DOM: <ul><li>Displaying the data in hierarchal manner is known as DOM. </li></ul><ul><li>There are 2 types of DOM available </li></ul><ul><li>1.Html Dom </li></ul><ul><li>2.Xml Dom </li></ul>
  15. 15. JavaScript <ul><li>It is used to perform required validations and events at client side </li></ul>
  16. 16. J son <ul><li>It is a light weight data interchange format. Json format is introduced by Douglas crock ford. Default Extension is .json </li></ul><ul><li>By combining Json format along with JavaScript complete object oriented programming features will be provided to JavaScript </li></ul>
  17. 17. Xml Http Request XML HTTP REQUEST EVENT HTML DOM IIS Client Server XML XML 1 2 5 3 4
  18. 18. Xml Http Request <ul><li>step1: </li></ul><ul><li>A Request event will be raised from Html Dom in the form of JavaScript. </li></ul><ul><li>step2: </li></ul><ul><li>This event request will be sent to the Xml Http request object. </li></ul><ul><li>step3: </li></ul><ul><li>Xml Http request object will convert these to xml form and sends to the server.(which is known as xml serialization) </li></ul>
  19. 19. Xml Http Request <ul><li>step4: </li></ul><ul><li>server will process the request and sends the result in xml form to the xml http request object. </li></ul><ul><li>step5: </li></ul><ul><li>xml http request object will convert the result from xml form to required form(known as xml Deserialization) </li></ul>
  20. 20. Programming Model in Asp.net Ajax: <ul><ul><ul><ul><li>Asp. Net ajax supports 2 types of programming model. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>1.Client centric model. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>2.Server centric model </li></ul></ul></ul></ul>
  21. 21. Client centric model Presentation ATLAS SERVICE PROXY UI BEHAVIOUR SCRIPT PAGES WEB SERVICES Client Browser Server Initial Rendering Data Data
  22. 22. Client centric model <ul><li>In this method at 1st request of the page server will deliver all UI interface elements along with validations and other behaviors and also with data from 2nd request onwards complete page code will be executed at client side only, just request will go for the data and server will respond only with that request only. </li></ul><ul><li>From second request onwards complete logic code of the page will be executed at client side only. </li></ul>
  23. 23. Server centric Model Presentation PAGES UI Behaviours Client Browser Server Asp. Net Appl Initial Rendering Input Data Update UI behaviors
  24. 24. Server centric Model <ul><li>In this method the application logic code and most of the UI related code remain on the server only. </li></ul><ul><li>Incremental changes for the UI elements are passed to the browser instead of the changes we made at client side . </li></ul>
  25. 25. Working with ajax: <ul><ul><li>At server side ,along with asp.net VS .Net Controls we find the following controls. </li></ul></ul><ul><ul><li>1.script manager </li></ul></ul><ul><ul><li>2.script manager proxy </li></ul></ul><ul><ul><li>3.update panel </li></ul></ul><ul><ul><li>4.update progress </li></ul></ul><ul><ul><li>5.Timer </li></ul></ul>
  26. 26. script manager: <ul><li>script manager control is responsible to make any webpage as ajax enabled webpage. In any webpage, if we place script manager control, then that webpage will become as ajax enabled and script manager controls will be provide all the ajax features to the webpage. </li></ul>
  27. 27. update panel: <ul><li>It is used to provide client centric programming model. </li></ul><ul><li>Any control we placed in update panel control will work with client centric programming model and the controls that we don't place in update panel control will work with server centric programming model. </li></ul>
  28. 28. Working with ajax control tool kit: <ul><ul><li>1.Ajax control tool kit provide different types of user interface controls. </li></ul></ul><ul><ul><li>2.This tool kit is developed by codeplex.com and supported by Microsoft. </li></ul></ul><ul><ul><li>3.Download the toolkit from the following link </li></ul></ul><ul><ul><li>http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?Released=16488 </li></ul></ul><ul><ul><li>4.In Ajax control toolkit the controls can be divided into 2 categories </li></ul></ul><ul><ul><li>a. Extended controls </li></ul></ul><ul><ul><li>b.Non-Extended controls </li></ul></ul>
  29. 29. Extended controls <ul><li>Extended controls require help of other controls. </li></ul><ul><li>They can't work individually and in general they are used as supportive controls </li></ul>
  30. 30. Non Extended controls <ul><li>These controls can work individually and do not work as a supportive controls. </li></ul>
  31. 31. Steps to add DLL to the toolbox: <ul><li>Create a new web application </li></ul><ul><li>Go to the toolbox </li></ul><ul><li>Click with right mouse button </li></ul><ul><li>Click on add tab </li></ul><ul><li>Type ajax control tool kit </li></ul><ul><li>Click with right mouse button </li></ul><ul><li>Click on choose items </li></ul><ul><li>Click on browse </li></ul><ul><li>Select the DLL of the control tool kit </li></ul><ul><li>Click on open </li></ul><ul><li>Click on ok. </li></ul><ul><li>All ajax tool kit controls are added to the tool box. </li></ul>
  32. 32. <ul><li>Thank You ! </li></ul>

×