Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

ajax-07-08.ppt ajax-07-08.ppt Presentation Transcript

  • CSCI2404 Internet Software Development Ajax – A synchronous j avascript a nd x ml Written Ajax (not AJAX) a design style rather than simply an acronym
  • Ajax
    • An Ajax application:
      • Builds on standard web technologies to deliver a rich responsive user experience.
      • Examples
        • Google maps
          • Only a browser application BUT with a sophisticated interface
        • Netvibes
          • Configurable interface
      • “ Webification” of the desktop
  • Characteristics of Ajax applications
    • Applications (webapps) - not just web sites
    • Smooth continuous interaction - no page reload
    • Live – updates
    • Supportive – proactive
    • Visual effects – not flash but informative
    • New widgets – sliders, progress indicators
    • New styles of interaction – drag and drop
    • Standards based – just a standard browser
    View slide
  • Traditional unload/load cycle Page Page Web Server Page Page Page time After each request a new page is returned. Previoud page is unloaded , new page is loaded View slide
  • Traditional unload/load cycle Web Server time page One (xhtml) page exists. Makes requests to the server. Fragments of (XML) code returned The (xhtml) page is updated
  • Ajax in Action XHTML page javascript browser xslt processor Document Object Model transforms xml to xhtml The inbuilt XSLT processor on browsers all work except IE The Sarissa js library provides access that works on all server client initial http request xml fragment xsl document css document xhtml http request jsp pages xsl files css files updates javascript libraries uses
  • Typical Ajax server call
    • Request Ajax application – first html page
    • Browser loads initial content
      • xhtml (content), css (display) , javascript (interaction/response action)
    • User interaction – event trigger
      • Javascript responds to event
    • Event handler sends request to server
      • XMLHttpRequest object created
    • Server process request
    • Sever responds
    • Browser call-back function receives response
      • Javascript updates the DOM Document Object Model
  • The XMLHttpRequest
    • Create an XMLHttpRequestObject (xh)
      • Depends on browser – IE or Other
      • see function getXmlHttpObject()
    • Assign a function to deal with response
      • defined by user
      • assigned to xh property: onreadystatechange
    • Open xh (as either GET or POST)
    • Send xh (with any parameters)
  • The function for the response
    • get XML
      • From XML String
        • From Data Island – converted to string
      • From XML fragment
    • transform XML into XHTML using XSLT
    • insert into page via DOM
      • (Document Object Model)
        • Append or Replace
  • transform into XHTML using XSLT
    • Create XSLT processor (for IE)
    • Find node where new XHTML will go
    • Clear existing data if replacing
    • If XML is a String convert to XML Fragment
    • If XML is in a file Load into XML Fragment
    • Transform XML with XSLT and add to DOM at correct node.