Ajax
Download
1 / 7

Ajax - PowerPoint PPT Presentation


  • 97 Views
  • Uploaded on

Ajax. Section led by Ivan Lee. Reachable at ivan period lee at cs period stanford period edu. Basic AJAX Flow. User types a character Javascript invoked (hint: use a JS class) Create and set a function that will be called when an HTTP status 200 is returned

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Ajax' - milla


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Ajax

Section led by Ivan Lee

Reachable at ivan period lee at cs period stanford period edu


Basic ajax flow
Basic AJAX Flow

  • User types a character

  • Javascript invoked (hint: use a JS class)

    • Create and set a function that will be called when an HTTP status 200 is returned

    • Construct a POST url to a specific method of a Rails controller, incorporating any necessary parameters

    • Send the xmlhttp request


Basic ajax flow part 2
Basic AJAX Flow (part 2)

  • Rails method invoked

    • Perform any database queries that need to be done server-side

    • Render a partial – this creates full HTML, which is treated as the xmlhttp response!

      • What happens if you return a JSON object instead?

    • Set the innerhtml of the appropriate object


Xmlhttp
XMLHTTP

  • if (window.XMLHttpRequest) { this.xmlhttp = new XMLHttpRequest(); }

  • this.xmlhttp.onreadystatechange = function()…

  • this.xmlhttp.open(sMethod, sUrl)

  • this.xmlhttp.setRequestHeader(sName, sValue)

  • this.xmlhttp.send(varBody)

  • this.xmlhttp.responseText


Reminders
Reminders

  • Make sure you think about how to make your classes and AJAX code reusable

  • Make sure you pass along an authenticity token! (see assignment hints section)

  • Encode your parameters (see assignment hints section)

  • Make sure thumbnails redirect to the appropriate link. If the user has a large photo collection, make sure that the selected photo is visible.

  • No using any other JS frameworks, or built-in Rails Ajax Helpers

  • Test in Firefox

  • Validate your HTML


Reminders part 2
Reminders (part 2)

  • This is the last project!If you want to strut your stuff, this is the time to do it. You have all these tools at your disposal.



ad