Intro to AJAX

							Intro to Ajax




                Fred Stluka
                Jan 25, 2006
                   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.
 1/25/2006               Intro to Ajax Fred Stluka       2
                 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"




 1/25/2006              Intro to Ajax Fred Stluka   3
                    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

 1/25/2006                    Intro to Ajax Fred Stluka   4
                         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




1/25/2006                          Intro to Ajax Fred Stluka   5
                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




    1/25/2006          Intro to Ajax Fred Stluka   6
            How to use Ajax?

                 Simple!

                Use the
             XMLHttpRequest
                Object


1/25/2006       Intro to Ajax Fred Stluka   7
           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


    1/25/2006                         Intro to Ajax Fred Stluka         8
         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

    1/25/2006                         Intro to Ajax Fred Stluka                      9
              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();
       }
     }



1/25/2006             Intro to Ajax Fred Stluka   10
                         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"

 1/25/2006               Intro to Ajax Fred Stluka   11
                         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)




1/25/2006                          Intro to Ajax Fred Stluka                      12
                         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
 1/25/2006                               Intro to Ajax Fred Stluka   13