From Learn About the Ext JavaScript Library

Contents 1 Ext.Ajax Class 1.1 Config objects 1.2 Success and Failure conditions 1.2.1 Properties for the result object 1.2.2 Properties for request object 1.3 Simple Example 1.4 Advanced Example - Converting result.responseText to JSON

Ext.Ajax Class

The Ext.Ajax class is a clean and simplified XHR wrapper allowing you to quickly and efficiently perform AJAX requests. In this tutorial we'll discuss the .request public method and how to either use clear text or encode it to JSON objects to extend its power.

Config objects

This is all documented in the Ext.Ajax Class Doc

Config	Type
url	string	required
params	JSON encoded object	optional
method	'GET' or 'POST'	optional
success	anonymous function object OR predeclared function	required
failure	anonymous function object OR predeclared function	required
timeout	number of milliseconds for the XHR to timeout	optional

Success and Failure conditions

The success and failure function objects get passed two parameter objects. For simplicity, we'll call the first result and the second request.

Properties for the result object

result.responseText is clear text that is sent back from the responding from the web server. If you have 100% control over the the response text and are expecting JSON formatted data, you may decode the object via the Ext.util.JSON.decode() function. I personally prefer returning JSON data from the server.

result.responseXML is populated with data if the server response is automatically detected by the class to contain valid XML data.

Properties for request object

Any of the following properties may be used to perform various actions. I have not had a need for them at the time of this writing.

Simple Example

The following example will execute a request and perform an Ext.MessageBox.alert

JavaScript:

Ext.Ajax.request({
	url : 'ajax.php' , 
	params : { action : 'getDate' },
	method: 'GET',
	success: function ( result, request ) { 
		Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText); 
	},
	failure: function ( result, request) { 
		Ext.MessageBox.alert('Failed', result.responseText); 
	} 
});

PHP Server Side:

// ajax.php
<?php
 
if ($_REQUEST['action'] == 'getDate') {
	echo date('l dS \of F Y h:i:s A');
}
 
?>

Advanced Example - Converting result.responseText to JSON

HTML + javascript

<div>
	Here is a simple AJAX Request.
</div>
<div id="subButton"></div>
<textarea id="log" cols="40" rows="10"></textarea>
 
<script type="text/javascript">
	function doJSON(stringData) {
		try {
			var jsonData = Ext.util.JSON.decode(stringData);
			Ext.MessageBox.alert('Success', 'Decode of stringData OK<br />jsonData.date = ' + jsonData.date);
		}
		catch (err) {
			Ext.MessageBox.alert('ERROR', 'Could not decode ' + stringData);
		}
	}
 
	function doAjax() {
		Ext.Ajax.request({
			url : 'ajax.php' , 
			params : { action : 'getDate' },
			method: 'GET',
			success: function ( result, request) { 
				var textArea = Ext.get('log').dom;
				textArea.value += result.responseText + "\n"; 
				//Ext.MessageBox.alert('Success', 'Data return from the server: '+ result.responseText); 		
				doJSON(result.responseText);
			},
			failure: function ( result, request) { 
				Ext.MessageBox.alert('Failed', 'Successfully posted form: '+result.date); 
			} 
		});
	}
 
	var button = new Ext.Button('subButton', {
		text: 'Click to submit an AJAX Request',
		handler: doAjax
	});
</script>

PHP Server Side

<?
 
if ($_REQUEST['action'] == 'getDate') {
	echo "{date: '" . date('l dS \of F Y h:i:s A') . "'}";
}
 
?>

--JGarcia@TDG-i.com 14:15, 3 August 2007 (CDT)