Your SlideShare is downloading. ×
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
An Introduction to Ajax Programming
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

An Introduction to Ajax Programming

6,048

Published on

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×