AJAX
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

AJAX

on

  • 1,103 views

 

Statistics

Views

Total Views
1,103
Views on SlideShare
1,103
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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.

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

AJAX Presentation Transcript

  • 1. AJAX CS-422 Dick Steflik
  • 2. What is AJAX
    • Asynchronous Javascript And XML
      • allows the updating of a web page without doing a page reload
        • creates much nicer user experience
    • AJAX is not really a technology by itself
      • combination of Javascript, XML and some server-side scripting to create the XML
        • server-side scripting could be done in PHP, .NET, Java Servlet or Java Server Page (JSP)
  • 3. General Technique Web Page Server-side Script requests server-side script to be run script run, XML created XML document returned info parsed from XML and used to update DOM by Javascript
  • 4. Sending a request for a URL
    • xmlHttpRequest Object
      • mozilla
        • objXMLHttp=new XMLHttpRequest()
      • IE
        • objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
    • create the URL
    • tell the browser the name of the function to handle the response
    • send the url to the server
  • 5. example var url="servertime.php" xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null)
  • 6. The server-side script
    • creates a “well formed XML document”
    • sets the content type to text/xml
    • can be written in any language
      • PHP
      • ASP
      • .NET
      • Java
      • JSP
  • 7. sample PHP script <? // a time document header(&quot;Content-type: text/xml&quot;); print(&quot;<time>&quot;); print(&quot;<currtime>&quot;.time().&quot;</currtime>&quot;); print(&quot;</time>&quot;); ?>
  • 8. stateChange
    • when the document is received by the browser control is transferred to where ever we told it to
      • xmlHttp.onreadystatechange=stateChanged
      • in this case the function named stateChanged
  • 9. stateChanged function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState==&quot;complete&quot;) { //update the DOM with the data document.getElementById(&quot;time&quot;).innerHTML=xmlHttp.responseText } }
  • 10. XMLHttpRequest Object
    • Methods:
      • abort() - stop the current request
      • getAllResponseHeaders - Returns complete set of headers (labels and values) as a string
      • getResponseHeader(:headerLabel”) – returns the string value of the requested header field
      • open(“method”,”URL”) sets a pending request
      • send(content) – transmits the request
      • setRequestHeader(“label”,”value”) – sets label/value in the header
  • 11. (continued)
    • Properties
      • onreadystatechange - event handler to use
      • readyState (0-uninitialized, 1-loading, 2-loaded, 3-interactive, 4- complete)
      • responseText – string version of the data returned
      • responseXML – DOM compatible document object returned by server
      • status – http response header code (200 – good)
      • statusText – string message of status code
  • 12. Popular Ajax Frameworks
    • Prototype
      • http://www.prototypejs.org/
      • free
    • Script.aculo.us
      • http://script.aculo.us/
      • Used with the Prototype Framework, mainly for animations and interface development
      • free
    • Backbase
      • Enterprise Ajax Framework
      • not free