ExtJS - Ajax

extjs

Ext.Ajax.request() invokes the failure callback function upon successful request
Forcing ExtJS to support synchronous XMLHttpRequest
How to increase the timeout value for ExtJS AJAX

How can we globally control behavior of AJAX calls?

Ext.Ajax provides ability to globally control the behavior of all AJAX calls:

Ext.Ajax.on('beforerequest', this.showSpinner, this);
Ext.Ajax.on('requestcomplete', this.hideSpinner, this);
Ext.Ajax.on('requestexception', this.hideSpinner, this);
  • beforerequest (conn, opts): Fired before any Ajax request is sent.
  • requestcomplete (conn, response, opts): Fired after any Ajax request is completed successfully.
  • requestexception (conn, response, opts): Fires if an error HTTP status was returned from the server.

Ext.Ajax is a singleton, therefore you can set properties for it once and override them at the request function level only if necessary.

What are common properties that you may want to set?

  • 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).

How can we add an HTTP header to an AJAX call?

Ext.Ajax.defaultHeaders = {
    'Powered-By': 'Ext Core'
};

How can we specify a timeout limit for an AJAX request?

If you do not specify a timeout configuration setting, by default, ExtJS AJAX request will timeout after 60 seconds. The value specified for the timeout configuration setting is in milliseconds. See the next question below.

How can we make an AJAX request?

Ext.Ajax.request({
    url: 'ajax_demo/sample.json',
    params: { foo: 'bar' },
    timeout: 300000, 
    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.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.

How can we make an AJAX request and automatically use the response to update the content of an element without using the load method from Element?

The request method exposes an el configuration which will take the response from a request and set it to the innerHTML of an element.

How can we submit a form using AJAX?

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);
   }
});

How can we update the content of an element using the load method from Element?

var msg = Ext.get('msg');
msg.load({
    url: 'ajax-example.php',
    params: 'name=' + Ext.get('name').dom.value,
    text: 'Updating...'
});
msg.show();

When Element.load method is used, the server's response automatically replace the innerHTML of the element.

// Basic request

Ext.Ajax.request({
   url: 'foo.php',
   success: someFn,
   failure: otherFn,
   headers: {
       'my-header': 'foo'
   },
   params: { foo: 'bar' }
});

// 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.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);
   }
});
// Basic request

Ext.Ajax.request({
   url: 'foo.php',
   success: someFn,
   failure: otherFn,
   headers: {
       'my-header': 'foo'
   },
   params: { foo: 'bar' }
});

// Simple ajax form submission

Ext.Ajax.request({
    form: 'some-form',
    params: 'foo=bar'
});

// 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.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);
   }
});

**Posting a form with Ajax:**

[[code]]
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);
   }
});
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License