Ajax Implementation

Ajax Defined

Asynchronous JavaScript and XML (coined AJAX in 2005), is a group of interrelated web development techniques used to create interactive web applications or rich Internet applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. Data is retrieved using the XHR (XMLHttpRequest) object. Because of the complexity of handling cross-browser distinctions between XHR implementations, Ajax frameworks have emerged to abstract these differences into a set of reusable programming constructs. Within Ext, performing these functions is done within the Ext.Ajax singleton object.

Ext.Ajax

Ext.Ajax extends the Ext.data.Connection class into a singleton and provides a centralized area to make Ajax requests with maximum flexibility. By using this singleton, all Ajax requests can be routed through one class and provide access to all functions, events, and parameters.

Ext.Ajax Events

Ext.Ajax exposes global Ajax events that can be handled on every request.

• beforerequest (conn, opts)
  Fires before any Ajax request is sent.
• requestcomplete (conn, response, opts)
  Fires after any Ajax request is completed successfully.
• requestexception (conn, response, opts)
  Fires if an error HTTP status was returned from the server.

// Example: show a spinner during all Ajax requests
Ext.Ajax.on('beforerequest', this.showSpinner, this);
Ext.Ajax.on('requestcomplete', this.hideSpinner, this);
Ext.Ajax.on('requestexception', this.hideSpinner, this);

Ext.Ajax Properties

Since Ext.Ajax is a singleton, you can set properties for it once and override them at the request function level only if necessary. Common properties you may want to set are:

• method: The default HTTP method to be used for requests. Note that this is case-sensitive and should be all caps (defaults to undefined; if not set but parms are present will use "POST," otherwise "GET.")
• extraParams: An object containing properties which are used as extra parameters to each request made by this object (defaults to undefined). Session information and other data that you need to pass with each request are commonly put here.
• url: The default URL to be used for requests to the server (defaults to undefined). If the server receives all requests through one URL, setting this once is easier entering it on every request.
• defaultHeaders: An object containing request headers which are added to each request made by this object (defaults to undefined).

// Default headers to pass in every request
Ext.Ajax.defaultHeaders = {
    'Powered-By': 'Ext Core'
};

Ext.Ajax.request

Ext.Ajax.request is the function called to send and receive data to the server via Ajax. Success and failure functions can also be set up to handle the response returned by the server. Note that these success/failure functions are asynchronous and will be called back when the server responds, while this is happening they webpage will continue to operate.

Ext.Ajax.request({
   url: 'ajax_demo/sample.json',
   success: function(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: function(response, opts) {
      console.log('server-side failure with status code ' + response.status);
   }
});

Ext.Updater

Another common use for Ajax is updating elements dynamically on a page without refreshing everything. The request method exposes an el configuration which will take the response from a request and set it to the innerHTML of an element. Developers can also use the Ext.TaskMgr to setup a recurring task to update the element periodically.

Posting a form with Ajax

Use the form configuration to post a form with Ext.Ajax.request

Ext.Ajax.request({
   url: 'ajax_demo/sample.json',
   form: 'myForm',
   success: function(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: function(response, opts) {
      console.log('server-side failure with status code ' + response.status);
   }
});