Your SlideShare is downloading. ×
Fred's Simple Intro to Ajax
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

Fred's Simple Intro to Ajax

305
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
305
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
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. Intro to Ajax Fred Stluka Jan 25, 2006
  • 2. What is Ajax?
    • "Asynchronous JavaScript and XML"
    • New name for an old technique:
      • JavaScript + DHTML + XMLHttpRequest
      • In use since at least 1997
      • I've used it since 2000
      • Finally someone gave it a name
      • Already enabled in your Web server and browser
    • Use JavaScript asynchronously behind the scenes to load additional data (typically XML) without discarding and reloading the entire Web page.
  • 3. Why use Ajax?
    • Your users will soon demand it
      • Not just another cool (geeky) technology
      • Very user-visible effect
      • Rich UI experience in a Web page
    • Portable across browsers
    • Plus, all advantages of zero-install Web app
      • No install done for this demo
      • No "DLL Hell"
  • 4. Why use Ajax?
    • Client/Server Apps:
      • Dynamic data
      • Static forms, controls, code, etc.
      • Efficient, but not flexible
    • Traditional Web Apps:
      • Dynamic data
      • Dynamic forms, controls, code, etc.
      • Flexible, but inefficient, and noticeably slow
    • Ajax Apps:
      • Dynamic data
      • Static or dynamic forms, controls, code, etc.
      • Best of both worlds
  • 5. Why use Ajax?
    • Geeky reasons:
      • Multithreaded data retrieval from Web servers
        • Pre-fetch data before needed
        • Progress indicators
        • Appearance of speed
        • Avoids need for setTimeout()
      • Less bandwidth required; less server load
        • Reload partial page, not entire page
        • Load data only, not even partial page
  • 6. How much to use Ajax?
    • As little or as much as you like
    • No need to abandon what you already do
    • One more item in your "bag of tricks"
    • Start by jazzing up your existing UI
  • 7. How to use Ajax?
    • Simple!
    • Use the
    • XMLHttpRequest
    • Object
  • 8. XMLHttpRequest Methods
    • open (“method”, “URL”, [async, username, password])
      • Assigns destination URL, method, etc.
    • send (params)
      • Sends request including postable string or DOM object data
    • abort ()
      • Terminates current request
    • getAllResponseHeaders ()
      • Returns headers (name/value pairs) as a string
    • getResponseHeader (“header”)
      • Returns value of a given header
    • setRequestHeader (“label”,”value”)
      • Sets Request Headers before sending
  • 9. XMLHttpRequest Properties
    • onreadystatechange
      • Event handler (your code) that fires at each state change
    • readyState
      • 0 = uninitialized 3 = interactive (some data has been returned)
      • 1 = loading (broken in IE 6.0)
      • 2 = loaded 4 = complete
    • status
      • HTTP Status returned from server: 200-299 = OK
    • responseText
      • String version of data returned from server
    • responseXML
      • XML DOM document of data returned
    • statusText
      • Status text returned from server
  • 10. Simple Example
    • var req = new XMLHttpRequest ();
    • req. onreadystatechange = myHandler;
    • req. open ("GET", "servlet", true);
    • req. send ("p1=abc");
    • ...
    • function myHandler() {
    • if (req. readyState == 4) {
    • doSomethingWith(req. responseXML );
    • }
    • else if (req. readyState == 3) {
    • showProgressIndicator();
    • }
    • }
  • 11. Demos
    • http://bristle.com/~fred/#ajax
      • Simple demo
      • More demos
      • Google Suggest
      • Google Maps
      • Language translation
      • Mouse gesture as password
      • Typing speed as password
      • Classified ads tied to map
      • "Mashups"
  • 12. Security Issues
    • Can only hit domain the Web page came from
      • Cannot access a 3rd party Web Service
      • However:
        • You can wrap those requests through your own server
        • User can allow access to specific sites via browser security settings
        • IFRAME can access any site (instead of XMLHttpRequest)
  • 13. Advanced Topics
    • http://bristle.com/~fred/#ajax
      • XSLT and XPath support (Sarissa)
      • Serializing Java Beans as XML
        • XMLBeans, JAXB, Zeus, Jbind, Castor, Betwixt
      • Serializing Java Beans as JavaScript objects
        • JSON -- JavaScript Object Notation
      • 2-way Mapping of Java Beans to JavaScript objects
        • DWR -- Direct Web Remoting
      • Ajax Component Libraries and Toolkits:
        • Dojo, Prototype, HTC, XBL
        • Implemented as JSP tag libraries or pure JavaScript
      • Ajax Frameworks
      • Ajax Patterns

×