Successfully reported this slideshow.
Introduction to AJAX & jQueryJon Tedesco                                1
Outline               Web Requests                 GET &POST               AJAX Basics               JavaScript       ...
Web Requests              GET & POST, Client & Server PerspectivesJon Tedesco                                              3
A Basic Web Request                                Client (Browser)                                   Submit single web ...
GET & POST: Summary              GET                                 POST               Retrieve data                    ...
A Basic Web Request                                GET                                  Most basic request              ...
GET & POST: Characteristics              GET                           POST               More usable                  M...
GET & POST: Best Practices              GET                            POST               Use for idempotent actions    ...
GET & POST: From PHP              GET                                     POST               myserver/endpoint.php?foo=1&b...
AJAX              A high-level introductionJon Tedesco                               10
AJAX: Overview               What is it?                  Use JavaScript to send web requests after page load           ...
AJAX: Diagram                                 Client (Browser)                                   Submit request         ...
JavaScript              Key features & use with AJAXJon Tedesco                                  13
JavaScript: Introduction               Runs on user’s browser                 Place in <script> … </script>             ...
JavaScript: Basics               Language                 Basic, readable                   syntax                 Auto...
JavaScript: Functions               Functions                  First-class citizens                  Associated with   ...
JavaScript: Browser ExampleJon Tedesco                                 17
JavaScript: AJAX Example               Trigger JavaScript                  On page load                  On user event ...
JavaScript: AJAX Example    JavaScript (triggered by event)   PHP (endpoint.php)Jon Tedesco                               ...
jQuery              Key features & use with AJAXJon Tedesco                                  20
jQuery: Motivation               JavaScript can be challenging                 Too much code for simple tasks           ...
jQuery: Motivation               jQuery is …                 Fast                 Concise                 Lightweight ...
jQuery: Basic Selectors              Without jQuery                              With jQuery                 DOM selectio...
jQuery: DOM Manipulation & Animation              Without jQuery       With jQueryJon Tedesco                             ...
jQuery: AJAX              Without jQuery   With jQueryJon Tedesco                                  25
AJAX Demo               Let’s write the code…                 PHP endpoint                 Empty web page              ...
AJAX Demo                          endpoint.php     index.html                          Console / JavaScriptJon Tedesco   ...
AJAX Demo                          endpoint.php     index.html                          Console / JavaScriptJon Tedesco   ...
Summary               Web Requests                 GET &POST               AJAX Basics               JavaScript       ...
Questions?Jon Tedesco              30
References                 GET v. POST                     http://blog.teamtreehouse.com/the-definitive-guide-to-get-vs-...
Upcoming SlideShare
Loading in …5
×

Introduction to AJAX

329 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

Introduction to AJAX

  1. 1. Introduction to AJAX & jQueryJon Tedesco 1
  2. 2. Outline  Web Requests  GET &POST  AJAX Basics  JavaScript  Overview  Callbacks  AJAX  jQuery  Features  DemoJon Tedesco 2
  3. 3. Web Requests GET & POST, Client & Server PerspectivesJon Tedesco 3
  4. 4. A Basic Web Request  Client (Browser)  Submit single web request  Receive & render HTML Time  Server  Receive request  Return HTML  Static  One request, no further interactionJon Tedesco 4
  5. 5. GET & POST: Summary GET POST  Retrieve data  Modify or submit data  Display data in URL  Data hidden from URL  Example  Example  Fetching a web page  Submitting a form  Either allow passing parameters  How does each behave? When should we use one over the other?Jon Tedesco 5
  6. 6. A Basic Web Request  GET  Most basic request  Sent by browser for fetching a page  POST Time  Often used for form data  Why?  Simple  Fast  IdempotentJon Tedesco 6
  7. 7. GET & POST: Characteristics GET POST  More usable  More complex  GET requests can be cached  Slower  GET requests can remain in the browser history  Secure (sort of)  GET requests can be  Parameters are not bookmarked shown in URL  GET requests can be distributed & shared  Better for large amounts of  URL length data  Prohibitive for large requests  Not sharableJon Tedesco 7
  8. 8. GET & POST: Best Practices GET POST  Use for idempotent actions  Use for actions with side effects  Use for AJAX  Potential modify or  Fast delete  Use for sharing links  Use for large data  Example  Use for sensitive data  YouTube  Example  Google  CommentsJon Tedesco 8
  9. 9. GET & POST: From PHP GET POST myserver/endpoint.php?foo=1&bar=word myserver/endpoint.php  Received as associative array in PHP  Consider characteristics of eachJon Tedesco 9
  10. 10. AJAX A high-level introductionJon Tedesco 10
  11. 11. AJAX: Overview  What is it?  Use JavaScript to send web requests after page load  Asynchronous JavaScript And XML  Why use it?  Make site more interactive  Update content without reloading  Example  Facebook TickerJon Tedesco
  12. 12. AJAX: Diagram  Client (Browser)  Submit request  No page reload  Handle response  Server (Google)  Receive request Time  Respond with some data  HTML, JSON, XML, etc.  Simply GET or POST requests  Parameter data  Receive & handle response from server  How do we do this?  JavaScriptJon Tedesco 12
  13. 13. JavaScript Key features & use with AJAXJon Tedesco 13
  14. 14. JavaScript: Introduction  Runs on user’s browser  Place in <script> … </script>  Run on page load  Basic language properties  Interpreted  Single-threadedJon Tedesco 14
  15. 15. JavaScript: Basics  Language  Basic, readable syntax  Automatic type casting  Arrays, dictionaries  Development  Console DemoJon Tedesco 15
  16. 16. JavaScript: Functions  Functions  First-class citizens  Associated with scope  Callbacks  JavaScript is built for asynchronous programming!Jon Tedesco 16
  17. 17. JavaScript: Browser ExampleJon Tedesco 17
  18. 18. JavaScript: AJAX Example  Trigger JavaScript  On page load  On user event  On a timer  …  Submit HTTP request  Handle server response  CallbacksJon Tedesco 18
  19. 19. JavaScript: AJAX Example JavaScript (triggered by event) PHP (endpoint.php)Jon Tedesco 19
  20. 20. jQuery Key features & use with AJAXJon Tedesco 20
  21. 21. jQuery: Motivation  JavaScript can be challenging  Too much code for simple tasks  Browser inconsistency  jQuery simplifies common tasks  DOM traversal & manipulation  Event handling  Animations  AJAXJon Tedesco 21
  22. 22. jQuery: Motivation  jQuery is …  Fast  Concise  Lightweight  Multi-browser compatible  Widely used  Over 55% of 10,000 most-visited sites  Over half of all websitesJon Tedesco 22
  23. 23. jQuery: Basic Selectors Without jQuery With jQuery  DOM selection differs across browsers  Using jQuery, you can easily handle element selections  Hide/show  Animate  Modify content  …Jon Tedesco 23
  24. 24. jQuery: DOM Manipulation & Animation Without jQuery With jQueryJon Tedesco 24
  25. 25. jQuery: AJAX Without jQuery With jQueryJon Tedesco 25
  26. 26. AJAX Demo  Let’s write the code…  PHP endpoint  Empty web page  Tools  jQuery  PHP  Google Chrome consoleJon Tedesco 26
  27. 27. AJAX Demo endpoint.php index.html Console / JavaScriptJon Tedesco 27
  28. 28. AJAX Demo endpoint.php index.html Console / JavaScriptJon Tedesco 28
  29. 29. Summary  Web Requests  GET &POST  AJAX Basics  JavaScript  Overview  Callbacks  AJAX  jQuery  Features  DemoJon Tedesco 29
  30. 30. Questions?Jon Tedesco 30
  31. 31. References  GET v. POST  http://blog.teamtreehouse.com/the-definitive-guide-to-get-vs-post#disqus_thread  http://stackoverflow.com/questions/46585/when-do-you-use-post-and-when-do-you-use-get  http://www.jquery4u.com/ajax/key-differences-post/#.UIoD0Gl26QY  AJAX  http://scorebig.files.wordpress.com/2011/09/feed1.jpg  http://www.w3schools.com/ajax/ajax_intro.asp  JavaScript  http://en.wikipedia.org/wiki/JavaScript  jQuery  http://en.wikipedia.org/wiki/JQuery  http://www.sitepoint.com/jquery-used-on-50-percent-of-websites/  http://www.slideshare.net/arwid/jquery-4470993Jon Tedesco 31

×