From Symbian Developer Community

Recipe
	Amount of time required: 5 minutes Required libraries: N/A Required header files: N/A PlatSec Capabilities: N/A Compatibility: S60 3rd Edition FP2, S60 5th Edition v1.0 Comes with Code: File:AJAXWithCancelWidget.wgz

Asynchronous JavaScript and XML (AJAX) is commonly used for data exchange with servers in Web Runtime Widgets. This exchange can sometimes take considerable time and it is preferable that the user has the ability to cancel the exchange and resume working with the widget's current data.

The key idea is using the abort() function to cancel the request. Additionally, we will make sure that:

• The user is informed of the application state
• Parsing code is aware that the request is cancelled

Let's start by issuing the request. This is fairly standard code, using WRTKit Ajax object to provide support for browser variants.

 
// XMLHttpRequest object
var ajaxRequest;
// Flag to maintain cancel status
var cancelled = false;
 
// Called when the widget is loaded.
function init()
{
	// Init menu and soft keys
	if ( window.widget ) {
		widget.setNavigationEnabled(false);
        	window.menu.showSoftkeys();
		var refreshMenuItem = new MenuItem("Refresh", 1);
        	refreshMenuItem.onSelect = issueRequest;
        	menu.append(refreshMenuItem);
		var cancelMenuItem = new MenuItem("Cancel", 2);
        	cancelMenuItem.onSelect = cancelRequest;
        	menu.append(cancelMenuItem);
	}
	// Issue the original request
	issueRequest();
}
 
// Issues the AJAX request
function issueRequest(){
	// Reset the cancelled flag
	cancelled = false;
 
	// Send AJAX request
	ajaxRequest = new Ajax();
	ajaxRequest.onreadystatechange = function(){
		ajaxCallBack();
	};
	ajaxRequest.open('GET', ajaxUrl, true);
	ajaxRequest.send(null);	
 
	// Bring up notification so the user knows something is happening
	uiManager.showNotification(-1, "wait", "Loading data...", -1);
}
 

First, we have included a minimum of initialisation code necessary to follow the example:

• The global variable cancel is used to maintain cancellation state in the application.
• The widget has two menu items - one to issue the request and one to cancel it.

When the user selects the Cancel menu item, the following function is called.

 
// Cancel an outstanding request
function cancelRequest() {
	if (!cancelled) {
		// Set the flag
		cancelled = true;
 
		// Abort the AJAX call
		ajaxRequest.abort();
 
		// Show user notification
		uiManager.showNotification(2000, "warning", "Cancelled by user");
	}
}
 

This function updates the cancel variable, calls abort() on the request and notifies the user that the request has been cancelled.

Finally, the ajaxCallBack() function handles the response.

 
function ajaxCallBack() {
    if (ajaxRequest.readyState == 4 ) {
 
	if ( cancelled ) {
		// Request has been cancelled, do not parse results
		return;
	}
 
	// Process the response
	. . .
 
	uiManager.hideNotification(3000, "warning", "Cancelled by user");
	if (window.widget) {
		menu.setRightSoftkeyLabel("IssueRequest", issueRequest);
	}
    } 
}
 

Full source is available here : File:AJAXWithCancelWidget.wgz.

Comments

Sign in to comment…