Ajax Presentation


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Ajax Presentation

  1. 1. AJAX and ASP.NET <ul><li>Thomas Zachary Moore </li></ul><ul><li>[email_address] </li></ul><ul><li>28 Jun 2006 </li></ul>
  2. 2. AJAX <ul><li>Asynchronous – Communication can take place with the server as the user is interacting with the page. </li></ul><ul><li>Javascript – Coding is done in Javascript which is close to cross browser compatible </li></ul><ul><li>And </li></ul><ul><li>XML – The original design was for data to be passed back and forth using XML (i.e. Web Services). As we will see, there are now other methods of passing data as well. </li></ul>
  3. 3. Non-Ajax Web Browser Web Server www.mypage.com User http://www.myPage.com/ GET / Page
  4. 4. Non-Ajax Web Browser (Default.aspx) Web Server www.mypage.com User Some Interaction POST Form Variables Refresh entire page User views new page
  5. 5. Ajax Enabled 1 st part same as before Web Browser Web Server www.mypage.com User http://www.myPage.com/ GET / Page
  6. 6. Ajax Enabled Here is the different Web Browser (Default.aspx) Web Server www.mypage.com User Some Interaction Asynchronous HTTP Callback Data Chunk Javascript updates DOM
  7. 7. The X in Ajax <ul><li>The 'X' in AJAX is supposed to stand for XML. </li></ul><ul><li>It was envisioned that XML would be the perfect container for data passed back and forth between the browser and client because it is an open standard and most browsers have parsers. </li></ul><ul><li>XML has been mostly abandoned because it takes up too much space. </li></ul>
  8. 8. The X in Ajax (more) <ul><li>XML is nice but it is wordy and it can bloat the size of your data. </li></ul><ul><li>JSON (Javascript Object Notation) is often used instead. </li></ul>
  9. 9. Advantages of JSON <ul><li>JSON is more concise. It takes less text to describe the same data. </li></ul><ul><li>JSON is also directly executable. </li></ul><ul><ul><li>Because Javascript is an interpreted language, JSON objects are directly usable and do not require an additional parsing step </li></ul></ul>
  10. 10. Simple XML Example <ul><li><Student> </li></ul><ul><ul><li><id>123</id> </li></ul></ul><ul><ul><li><FirstName>Bob</FirstName> </li></ul></ul><ul><ul><li><LastName>Smith</LastName> </li></ul></ul><ul><ul><li><Address>123 Main ST</Address> </li></ul></ul><ul><ul><li><City>Springfield</City> </li></ul></ul><ul><ul><li><State>GA</State> </li></ul></ul><ul><ul><li><Zip>33333</Zip> </li></ul></ul><ul><li></Student> </li></ul>
  11. 11. JSON Example <ul><li>{ </li></ul><ul><li>&quot;Student&quot;: </li></ul><ul><ul><li>[ </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><ul><li>&quot;id&quot;:&quot;123&quot;, </li></ul></ul></ul><ul><ul><ul><li>&quot;FirstName&quot;:&quot;Bob&quot;, </li></ul></ul></ul><ul><ul><ul><li>&quot;LastName&quot;:&quot;Smith&quot;, </li></ul></ul></ul><ul><ul><ul><li>&quot;Address&quot;:&quot;123 Main ST&quot;, </li></ul></ul></ul><ul><ul><ul><li>&quot;City&quot;:&quot;Springfield&quot;, </li></ul></ul></ul><ul><ul><ul><li>&quot;State&quot;:&quot;GA&quot;, </li></ul></ul></ul><ul><ul><ul><li>&quot;Zip&quot;:&quot;33333&quot; </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>] </li></ul></ul><ul><li>} </li></ul>
  12. 12. XML gets the last word <ul><li>JSON uses Javascript style schema to describe the data. </li></ul><ul><li>Javascript only has 1 datatype, the variant, so JSON doesn't store Type. </li></ul><ul><li>Ajax uses JSON to be faster and easier, but certain implementations can still use XML or call XML Web Services. </li></ul>
  13. 13. AJAX .NET <ul><li>Created and maintained by Michael Schwarz of Stein, Germany. </li></ul><ul><li>Uses Attributes to define “Ajax methods” </li></ul><ul><li>Works with ASP.NET 1.1 and 2.0 </li></ul><ul><li>Several Versions </li></ul><ul><ul><li>AJAX .NET </li></ul></ul><ul><ul><li>Another version of AJAX .NET maintained by a company that offers paid support. </li></ul></ul><ul><ul><li>AJAX .NET Pro – No paid support but this is the version I recommend with the most recent updates. </li></ul></ul>
  14. 14. Atlas <ul><li>Atlas is an Ajax Framework created by Microsoft. </li></ul><ul><li>Atlas is currently still in Beta. </li></ul><ul><li>I'm new to Atlas so my examples are basic. </li></ul>
  15. 15. Summary <ul><li>AJAX is a Design Pattern, not a single technology, framework, or library. </li></ul><ul><li>Using AJAX, data can be transmitted in many formats, including but not limited to XML, JSON, Comma Delimited, and binary formats such as image data. </li></ul><ul><li>Using ASP.NET, you can design a form using the default postback technology and then enhance the page by redesigning features to use AJAX later. </li></ul>
  16. 16. Links <ul><li>AJAX .NET </li></ul><ul><ul><li>http://www.ajaxpro.info/ </li></ul></ul><ul><li>Microsoft Atlas Site </li></ul><ul><ul><li>http://atlas.asp.net/default.aspx?tabid=47 </li></ul></ul><ul><li>Wikipedia </li></ul><ul><ul><li>http://en.wikipedia.org/wiki/Ajax_framework </li></ul></ul><ul><li>Google Suggest </li></ul><ul><ul><li>http://www.google.com/webhp?complete=1&hl=en </li></ul></ul><ul><li>Articles </li></ul><ul><ul><li>http://www.developer.com/design/article.php/10925_3526681_1 </li></ul></ul><ul><ul><li>http://dotnetjunkies.com/WebLog/joshuagough/archive/2006/06/28/141278.aspx </li></ul></ul><ul><ul><li>http:// www.deitel.com/ajax/AJAX_resourcecenter.html </li></ul></ul>