Procedure - Batching Ajax Requests
If you have to make many Ajax requests to the same URL, you can batch them using a JavaScript BatchRequest object to reduce network traffic. When you create a BatchRequest object, you pass it a configuration object telling it the maximum number of requests to send in one batch request, the URL to call to process the requests, and the callback methods for success or failure. You then add requests to the BatchRequest object. When either the maximum batch size is reached or 500 milliseconds has elapsed, the batch request will automatically be sent asynchronously to the server. In the meantime, you can continue adding requests to the BatchRequest object.
The BatchRequest object will exist for the life of the page in which it is invoked. When the user navigates away from the current page, the BatchRequest will be killed and any unprocessed requests will be deleted.
Below is an example of how to create a BatchRequest in JavaScript. See numericJSRenderer.jsfrag for the complete method.
try {
if(!jsca.columns.numericRenderer.batchRequests) {
jsca.columns.numericRenderer.batchRequests = new PTC.jca.
batch.BatchRequest({
url: getBaseHref() + "ptc1/numeric/",
maxBatchSize: 50,
successCallback: function(response) {
var result = PTC.decode(response.responseText);
for (var i=0,length=result.length; i < length; i++) {
$(jsca.columns.numericRenderer.uniqueIdPrefix +
result[i].uniqueId).innerHTML =
result[i].displayValue;
}
},
failureCallback: function(response) {
jsca.columns.numericRenderer.log.error
("ERROR in jsca.columns.numericRenderer()
getting numeric component data for displaying.");
}
});
}
} catch(e) {
// Handle error that could be thrown when creating BatchRequest
}
Once the request is created, you call its addRequest() method to add requests to it, passing it the parameters you would send to the requestHandler.doRequest() method.
jsca.columns.numericRenderer.batchRequests.addRequest({
type : data.type,
externalForm : data.rawValue,
isPercent : data.isPct,
isCurrency : data.isCurrency,
uniqueId : uniqueId
});
In this example, the batched requests are sent to a servlet engine controller class called “NumericController”. The individual requests provide information about a number value that needs to be displayed on the page. The controller loops through the individual requests, calls a Java class to create a localized display value for the number, and returns a JSONArray of JSONObjects, each of which contains a display value and a unique id corresponding to the id of a HTML div tag on the page. The success callback function replaces the contents of the div tags with the display values.
If you use a controller class to process the batch request, it should be annotated with the Spring @Controller and @RequestMapping annotations. Here is a portion of the NumericController class (see NumericController for the complete class).:
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
.
.
.
@Controller
@RequestMapping(value = "/numeric/**")
public class NumericController {
@RequestMapping(method = { RequestMethod.POST, RequestMethod.PUT })
protected void convertToString(
@RequestParam("data") final String data,
HttpServletRequest request, HttpServletResponse response) throws IOException {
JSONArray result = new JSONArray();
try {
JSONArray requests = new JSONArray(data);
for (int i = 0; i < requests.length(); i++) {
JSONObject req = requests.getJSONObject(i);
try {
String type = req.getString("type");
String externalForm = req.getString("externalForm");
String isPercent = req.optString("isPercent");
String isCurrency = req.optString("isCurrency");
String uniqueId = req.getString("uniqueId");
String displayValue = NumericFormat.formatValueForDisplay(type,
externalForm,
Boolean.valueOf(isPercent), Boolean.valueOf(isCurrency));
JSONObject singleResponse = new JSONObject();
singleResponse.put("displayValue", displayValue);
singleResponse.put("uniqueId", uniqueId);
result.put(singleResponse);
} catch (Exception e) {
.
.
.
}
}
response.setContentType("application/json; charset=UTF-8");
PrintWriter out = response.getWriter();
out.print(result.toJSONString());
} catch (Exception e) {
log.error("Problem displaying and formatting
number in NumericController.", e);
}
Parent topic