Your SlideShare is downloading. ×
  • Like
Fred's Simple Intro to Ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Fred's Simple Intro to Ajax

  • 291 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
291
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
13
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