1 / 7

Ajax

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

milla
Download Presentation

Ajax

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ajax Section led by Ivan Lee Reachable at ivan period lee at cs period stanford period edu

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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.

  7. <Questions…? />

More Related