Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

Chapter 16Introduction to

Ajax

16-2Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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

16-3Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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

16-4Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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

16-5Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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

16-6Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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

16-7Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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

16-8Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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

16-9Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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

16-10Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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

16-11Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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

16-12Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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

16-13Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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

16-14Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

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