1 / 14

Chapter 16

Chapter 16. Introduction to Ajax. 16.1 Overview of Ajax. Ajax is not an API or a programming language Ajax aims to provide more responsive web applications In normal request/response HTTP cycles, the browser locks waiting for the response and an entire page must be displayed

taro
Download Presentation

Chapter 16

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. Chapter 16 Introduction to Ajax

  2. 16.1 Overview of Ajax • Ajax is not an API or a programming language • Ajax aims to provide more responsive web applications • In normal request/response HTTP cycles, the browser locks waiting for the response and an entire page must be displayed • With Ajax, asynchronous requests may be made and responses are used to update part of a page • User can continue to interact with a page while the request is in progress • Less data needs to be transmitted • Page update is quicker because only a part of a page is modified

  3. 16.1 Approaches to Ajax • The iframe element can be hidden and it allows asynchronous requests to a server • Javascript support allows updating other elements of the page from the frame response • Microsoft introduced the XmlDocument and XMLHTML objects which are used to make asynchronous requests directly from JavaScript • Other browsers followed this path • Most browsers now name the object XMLHttpRequest

  4. 16.2 The Application • The example application uses the customer information part of the popcorn application • As the user enters the zip code information, a request for the corresponding city and state will be made to the server • If successful, the information will be filled in the text widgets

  5. 16.2 The Form Document • The trigger for the request is a blur event on the zip code widget • this.value is used by the handler to get the zip code value entered • All relevant widgets have the id attribute set for easy access in the JavaScript

  6. 16.2 The Request Phase • Two functions • blur event handler • Response processor • An XMLHttpRequest object is used to create the request • A callback is a function called when a response is received • Function receivePlace is the callback • The function name is assigned to a property of XMLHttpRequest • The open method sets up the request • Method parameter, either “GET” or “POST” • URL parameter with zip code in the URL • A parameter signifying asynchronous or not • The send method sends the request • The getPlace method implements this

  7. 16.2 The Response Document • The response from the server is created by looking up the zip code • A local hash of zip codes is used for simplicity • A string with the city and state is sent as the response • The example is in PHP

  8. 16.2 The Receiver Phase • The function that parses the response must have access to the XMLHttpRequest object • This cannot be global since there may be multiple outstanding requests at any time • The callback becomes an anonymous function which is defined in the getPlace method and keeps references to the XMLHttpRequest object held in a local variable • The response handler only acts if the readyState is 4, meaning the response is complete

  9. 16.2 Cross-Browser Support • Older Microsoft browsers uses a different approach to getting the request object • Testing the existence of window.XMLHttpRequest differentiates the browsers • In the older browsers new ActiveXObject(“Microsoft.XMLHTTP”) • creates the object needed

  10. 16.3 Rails with Ajax • The prototype JavaScript library is integrated into Rails • <%= javascript_include_tag “prototype” %> • Rails and Ajax have some limitations • Not all elements can be modified, depending on the browser • The div element can be modified • Rails and Ajax process • Sequence is triggered • Data is sent asynchronously to an action handler • The action handler creates a response • JavaScript in the browser interprets the response

  11. 16.3 The Initial Form Document • The popcorn example is used here, with the zip code helper • The show_form action and document show_form.rhtml are the first contact, providing the form

  12. 16.3 Triggering Ajax • Ruby provides methods to set up triggers for Ajax processing • link_to_remote triggers when a link is activated • observe_field is triggered when a widget is changed • Method observe_field • Takes the name of the widget as a first paramater • Several ‘keyword’ parameters • :url where to post, often associated with an :action symbol definition • :update associated to the id of the elment whose value is to be changed in response • :with specifies a parameter for the HTTP request • :frequency specifies how often to check • :complete, :success, :failure associate with callbacks used depending on the outpcome of the reuqest

  13. 16.3 Example • A special tag is used to introduce JavaScript into a Rails template • A method update_city_state is defined as the :complete callback since two fields have to be changed with the response

  14. 16.3 The Controller • The fill_city_state method is added to the controller to handle the asynchronous request • The render method is used to create the content of the response since it is simple text

More Related