An Introduction to  Ajax Programming Dr. Harry Chen CMSC 491S/691S March 5, 2008
Agenda <ul><li>What’s Ajax? (revisit) </li></ul><ul><li>JavaScript in 10 minutes </li></ul><ul><li>DOM and XMLHttpRequest ...
Ajax <ul><li>A synchronous  J avaScript  A nd  X ML </li></ul><ul><li>The idea is to enable interactive Web pages without ...
Ajax vs. tradition HTTP paradigm  <ul><li>In the tradition HTTP world </li></ul><ul><ul><li>Every request results in a new...
Ajax is a 3-Legged Stool XHTML JavaScript CSS Ajax Adopted from Simon Wilson: http://www.slideshare.net/simon/how-to-make-...
JavaScript in 10 minutes Examples adopted from http://www.w3schools.com/js/js_examples.asp
Say “hello world” What’s ‘document’?
Write into HTML <body/> ‘ document ’ is a predefined JavaScript variable that represents the entire HTML document.  You ca...
Loading JavaScript code <ul><li>Two ways to load your JS code </li></ul><ul><ul><li>Inline within the same HTML document <...
Define variables
Define Array and Associative Array
Function
Assign Function to a Variable <ul><li>In JavaScript, you can assign function to a variable.  </li></ul>
Additional Resource <ul><li>JavaScript Tutorial </li></ul><ul><ul><li>http://www.w3schools.com/js/ </li></ul></ul><ul><li>...
DOM and XMLHttpRequest
DOM <ul><li>Document Object Model </li></ul><ul><li>All XHTML doc are XML doc </li></ul><ul><li>DOM is a process-model for...
DOM Tree http://flickr.com/photos/13571173@N00/411653343/
An XML DOM (not XHTML) <bookstore> <book category=“c1”> <title lang=“en”>Everyday Italian</title> <author>Giada De Laurent...
HTML DOM Tree – an example
JavaScript DOM <ul><li>Browser’s JS engines provides predefine HTML DOM objects </li></ul>
‘Document’ DOM <ul><li>Predefined objects come with predefined properties and methods </li></ul>http://www.w3schools.com/h...
DOM Manipulation <ul><li>Operations for manipulating DOM objects are similar in different programming langauges – e.g., Ja...
XMLHttpRequest <ul><li>Is a specification (see W3C doc) </li></ul><ul><li>Defines an API that provides scripted client fun...
Clarification <ul><li>Use XMLHttpRequest to  send  and  receive  data from servers via HTTP </li></ul><ul><li>Data sent an...
Fetch XML Data from the Server http://www.w3.org/TR/XMLHttpRequest/
Send data using XMLHttpRequest http://www.w3.org/TR/XMLHttpRequest/
Common Problems with  DOM and XMLHttpRequest
XMLHttpRequest Cross-browser Issues <ul><li>Most browsers support the standard implementation, but some provide extra supp...
XMLHttpRequest Creation <ul><li>Creating an XMLHttpRequest object is done differently depending on the browser. </li></ul>...
DOM Cross-browser issues <ul><li>DOM API differs from browser to brower. </li></ul>Remember this chart?
Get Node Value – FF vs. IE
Additional Reading <ul><li>AJAX - Common Pitfalls </li></ul><ul><ul><li>http://grover.open2space.com/node/92 </li></ul></ul>
Ajax Programming with Mochikit
JavaScript Libraries <ul><li>To make JavaScript developer more productive, many JS libraries have been created. </li></ul>...
MochiKit <ul><li>A collection API that simplify JavaScript programming </li></ul><ul><ul><li>“Makes JavaScript suck a bit ...
Load MochiKit <ul><li>All API can be loaded from a single file </li></ul><script type=&quot;text/javascript&quot; src=&quo...
What does MochiKit provide?  Ajax programmers look here!
Fetch JSON Data from the Server The location of the data. Instantiate a function for making the call. Define how we want t...
What we didn’t do! <ul><li>We didn’t have to create the XMLHttpRequest object ourselves. </li></ul><ul><li>Don’t have to w...
Additional Reading <ul><li>Reading MochiKit’s doc for </li></ul><ul><ul><li>How to manipulate DOM  </li></ul></ul><ul><ul>...
Ajax Pitfalls
Ajax Programming Issues <ul><li>Breaking the back button </li></ul><ul><li>Not giving immediate visual cues for clicking w...
Data loading issues <ul><li>Loading… Please wait… (after 3 secs) </li></ul><ul><li>I’m still loading. Please wait… (after ...
JavaScript Code Loading Issue  <ul><li>Too much JavaScript code can slow down the performance the client browser.  </li></...
Search Crawler Issue <ul><li>Text content rendered by JavaScript is not accessible to search crawler. </li></ul>Empty page?
Accessibility  <ul><li>Not all screenreaders are built to work with Ajax applications. </li></ul>http://www.sitepoint.com/...
Summary <ul><li>Ajax programming can make Web pages to be more interactive and responsive.  </li></ul><ul><li>XHTML, CSS a...
Ajax Programming in gnizr
Upcoming SlideShare
Loading in …5
×

An Introduction to Ajax Programming

6,747
-1

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,747
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
303
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

An Introduction to Ajax Programming

  1. 1. An Introduction to Ajax Programming Dr. Harry Chen CMSC 491S/691S March 5, 2008
  2. 2. Agenda <ul><li>What’s Ajax? (revisit) </li></ul><ul><li>JavaScript in 10 minutes </li></ul><ul><li>DOM and XMLHttpRequest </li></ul><ul><li>Programming Ajax with Mochikit </li></ul><ul><li>Ajax Pitfalls </li></ul><ul><li>Ajax in gnizr </li></ul>
  3. 3. Ajax <ul><li>A synchronous J avaScript A nd X ML </li></ul><ul><li>The idea is to enable interactive Web pages without requiring the browser to refresh. </li></ul>Browser JavaScript code Web Server “ Give me some data” “ Here, data” Modify the page content, without refreshing the page
  4. 4. Ajax vs. tradition HTTP paradigm <ul><li>In the tradition HTTP world </li></ul><ul><ul><li>Every request results in a new page loading </li></ul></ul><ul><ul><li>Dynamic pages are created on the server-side </li></ul></ul><ul><ul><li>Data, format and styling are done on the server </li></ul></ul><ul><li>In the Ajax world </li></ul><ul><ul><li>The result of an Ajax call may only change a small parts of an existing HTML page </li></ul></ul><ul><ul><li>Server sets up the page structure, JavaScript code performs the content creation </li></ul></ul><ul><ul><li>Data, format and styling are done via JavaScript (CSS and XHTML) </li></ul></ul>
  5. 5. Ajax is a 3-Legged Stool XHTML JavaScript CSS Ajax Adopted from Simon Wilson: http://www.slideshare.net/simon/how-to-make-ajax-work-for-you
  6. 6. JavaScript in 10 minutes Examples adopted from http://www.w3schools.com/js/js_examples.asp
  7. 7. Say “hello world” What’s ‘document’?
  8. 8. Write into HTML <body/> ‘ document ’ is a predefined JavaScript variable that represents the entire HTML document. You can read from and write to the current document via this ‘ document ’ variable.
  9. 9. Loading JavaScript code <ul><li>Two ways to load your JS code </li></ul><ul><ul><li>Inline within the same HTML document </li></ul></ul><ul><ul><li>From a separate file on the server </li></ul></ul>e.g., Replace ‘xxx.js’ with http://path/to/myprogram.js
  10. 10. Define variables
  11. 11. Define Array and Associative Array
  12. 12. Function
  13. 13. Assign Function to a Variable <ul><li>In JavaScript, you can assign function to a variable. </li></ul>
  14. 14. Additional Resource <ul><li>JavaScript Tutorial </li></ul><ul><ul><li>http://www.w3schools.com/js/ </li></ul></ul><ul><li>PPK on JavaScript </li></ul><ul><ul><li>http://www.quirksmode.org/ </li></ul></ul>I love it!
  15. 15. DOM and XMLHttpRequest
  16. 16. DOM <ul><li>Document Object Model </li></ul><ul><li>All XHTML doc are XML doc </li></ul><ul><li>DOM is a process-model for XML </li></ul><ul><ul><li>For reading and writing XML doc </li></ul></ul><ul><li>We can use DOM to manipulate XHTML </li></ul>
  17. 17. DOM Tree http://flickr.com/photos/13571173@N00/411653343/
  18. 18. An XML DOM (not XHTML) <bookstore> <book category=“c1”> <title lang=“en”>Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> </bookstore>
  19. 19. HTML DOM Tree – an example
  20. 20. JavaScript DOM <ul><li>Browser’s JS engines provides predefine HTML DOM objects </li></ul>
  21. 21. ‘Document’ DOM <ul><li>Predefined objects come with predefined properties and methods </li></ul>http://www.w3schools.com/htmldom/dom_obj_document.asp Watch out for browser support!
  22. 22. DOM Manipulation <ul><li>Operations for manipulating DOM objects are similar in different programming langauges – e.g., Java, PHP and JavaScript. </li></ul><ul><li>Tutorial </li></ul><ul><ul><li>http://www.w3schools.com/dom/default.asp </li></ul></ul>
  23. 23. XMLHttpRequest <ul><li>Is a specification (see W3C doc) </li></ul><ul><li>Defines an API that provides scripted client functionality for transferring data between a client and a server </li></ul>Browser JavaScript code Web Server “ Give me some data” “ Here, data.” Modify the page content, without refreshing the page Done via XMLHttpRequest
  24. 24. Clarification <ul><li>Use XMLHttpRequest to send and receive data from servers via HTTP </li></ul><ul><li>Data sent and received can be any text format, not just XML. </li></ul><ul><li>Works over HTTP and HTTPS </li></ul>http://www.w3.org/TR/XMLHttpRequest/
  25. 25. Fetch XML Data from the Server http://www.w3.org/TR/XMLHttpRequest/
  26. 26. Send data using XMLHttpRequest http://www.w3.org/TR/XMLHttpRequest/
  27. 27. Common Problems with DOM and XMLHttpRequest
  28. 28. XMLHttpRequest Cross-browser Issues <ul><li>Most browsers support the standard implementation, but some provide extra support that others don’t. </li></ul><ul><ul><li>Firefox implements standard and more </li></ul></ul><ul><ul><li>IE implements just the standard </li></ul></ul>
  29. 29. XMLHttpRequest Creation <ul><li>Creating an XMLHttpRequest object is done differently depending on the browser. </li></ul>Checks which browser the client is using! Crazy!
  30. 30. DOM Cross-browser issues <ul><li>DOM API differs from browser to brower. </li></ul>Remember this chart?
  31. 31. Get Node Value – FF vs. IE
  32. 32. Additional Reading <ul><li>AJAX - Common Pitfalls </li></ul><ul><ul><li>http://grover.open2space.com/node/92 </li></ul></ul>
  33. 33. Ajax Programming with Mochikit
  34. 34. JavaScript Libraries <ul><li>To make JavaScript developer more productive, many JS libraries have been created. </li></ul><ul><ul><li>MochiKit  I prefer; light-weight and simple </li></ul></ul><ul><ul><li>jQuery </li></ul></ul><ul><ul><li>Yahoo! UI library </li></ul></ul><ul><ul><li>Prototype </li></ul></ul><ul><ul><li>Script.aculo.us </li></ul></ul>
  35. 35. MochiKit <ul><li>A collection API that simplify JavaScript programming </li></ul><ul><ul><li>“Makes JavaScript suck a bit less” </li></ul></ul>http://www.mochikit.com
  36. 36. Load MochiKit <ul><li>All API can be loaded from a single file </li></ul><script type=&quot;text/javascript&quot; src=&quot;MochiKit.js&quot;></script> 
  37. 37. What does MochiKit provide? Ajax programmers look here!
  38. 38. Fetch JSON Data from the Server The location of the data. Instantiate a function for making the call. Define how we want to handle the “response”. Actually makes the call.
  39. 39. What we didn’t do! <ul><li>We didn’t have to create the XMLHttpRequest object ourselves. </li></ul><ul><li>Don’t have to worry about those cross-browser issues. </li></ul><ul><li>We don’t have to deal with HTTP methods -- “PUT”, “GET” etc. </li></ul>
  40. 40. Additional Reading <ul><li>Reading MochiKit’s doc for </li></ul><ul><ul><li>How to manipulate DOM </li></ul></ul><ul><ul><li>How to change CSS style </li></ul></ul><ul><ul><li>How to deal with asynchronous events </li></ul></ul><ul><ul><li>How to enable Drag and Drop </li></ul></ul><ul><ul><li>How to exploit JavaScript functional and OO programming </li></ul></ul>
  41. 41. Ajax Pitfalls
  42. 42. Ajax Programming Issues <ul><li>Breaking the back button </li></ul><ul><li>Not giving immediate visual cues for clicking widgets </li></ul><ul><ul><li>“Did I click?”, “I thought I have clicked” </li></ul></ul>
  43. 43. Data loading issues <ul><li>Loading… Please wait… (after 3 secs) </li></ul><ul><li>I’m still loading. Please wait… (after 5 secs) </li></ul><ul><li>I’m still loading. Please wait.. (after 30 secs) </li></ul><ul><li>User: forget you. I’m leaving. </li></ul>
  44. 44. JavaScript Code Loading Issue <ul><li>Too much JavaScript code can slow down the performance the client browser. </li></ul><ul><li>Only use JavaScript and Ajax when it is necessary. </li></ul>More code != Better program
  45. 45. Search Crawler Issue <ul><li>Text content rendered by JavaScript is not accessible to search crawler. </li></ul>Empty page?
  46. 46. Accessibility <ul><li>Not all screenreaders are built to work with Ajax applications. </li></ul>http://www.sitepoint.com/article/ajax-screenreaders-work
  47. 47. Summary <ul><li>Ajax programming can make Web pages to be more interactive and responsive. </li></ul><ul><li>XHTML, CSS and JavaScript are the key components Ajax </li></ul><ul><li>Ajax uses XMLHttpRequest object to send and receive data </li></ul><ul><li>Study Ajax Pitfalls can help you to build more effective Mashup and Web 2.0 apps. </li></ul>
  48. 48. Ajax Programming in gnizr
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×