Passing Variables Across Chained AJAX Requests
Initiating AJAX requests can be addicitive; you start with independent requests, and soon you need to initiate chained requests. Executing chained requests is easy, but how do you pass common variables across these requests.
I have meddled with three ways, the first two depends on the response type, and the third is my favourite. Sample codes shown using Prototype javascript library, but are applicable to other libraries too:
1. Through JSON object response
This way is only applicable if your response type is a JSON object. The common variable is passed through URL parameter from the first request, then embedded in JSON object response to be used by the next request. Example:
Client script
// first request
new Ajax.Request('/url/path', {parameters: 'common_var=hello', oncomplete: handleComplete})
// handle first request response
function handleComplete(xmlHttpReq, json) {
common_var = json.common_var
// initiate second request using common_var
new Ajax.Request('/url/path', {parameters: 'common_var=' + common_var, .... })
}
Server script
# server side JSON object response
{common_var: '<%= params[:common_var] %>', ... <other properties>}
2. Through XML response
Similar to the previous method, this way is applicable if your response type is XHML instead of JSON object. The common variable is embedded in XML response. The element will then referenced by second request using Javascript. Example:
Client script
// first request
new Ajax.Request('/url/path', {parameters: 'common_var=hello', oncomplete: handleComplete})
// handle first request response
function handleComplete(xmlHttpReq, json) {
resDoc = xmlHttpReq.responseXML
common_var = resDoc.getElementsByTagName("common_var")[0].firstChild.data
// initiate second request using common_var
new Ajax.Request('/url/path', {parameters: 'common_var=' + common_var, .... })
}
Server script
# server side XML response <response> ... other elements <common_var><%= params[:common_var] %></common_var> </response>
3. Through Prototype AJAX.Request options
This is my preferred way, because it does not involve a round-trip to the server. Initiate Ajax.Request with by adding common_var as one of the request options, and register a oncomplete global event handler through AJAX.Responders.
Note you can only do this through global event handler, because the first argument passed to the event handler is the AJAX.Request object. With it, you can easily retrieve the common_var request options. While inline event handler shown in previous example passes XMLHttpRequest object instead of Ajax.Request object. Example:
Client script
// first request
new Ajax.Request('/url', {parameters: 'id=<%= id %>', id: <%= id %>})
// register global event handler
Ajax.Responders.register({onComplete: handleComplete})
// handle first request response
function handleComplete(ajaxReq) {
common_var = ajaxReq.options.common_var
// initiate second request using common_var
new Ajax.Request('/url/path', {parameters: 'common_var=' + common_var, .... })
}

