Sencha Inc. | HTML5 Apps

AJAX FAQ

Published Sep 17, 2010 | The Sencha Dev Team | FAQ | Medium
Last Updated Jul 11, 2011

This FAQ is most relevant to Ext JS, 2.x, 3.x.

This article is currently due for review
We suspect that this article may be out-of-date or contain incorrect information.
But we are constantly editing articles, so we promise we will get to this one soon.

How do I make a simple Ajax request?

Use the Ext.Ajax.request method:

Ext.Ajax.request({
    url: 'myScript.php',
    params: {
        paramName: 'paramValue'
    },
    timeout: 3000,
    method: 'GET',
    success: function(xhr) {
        alert('Response is "' + xhr.responseText + '"');
    }
});

Add listeners to an Ext.Ajax.request object

Ext.Ajax is a singleton instance of Ext.data.Connection. Create your own instance of Ext.data.Connection:

var maskingAjax = new Ext.data.Connection({
    listeners: {
        'beforerequest': {
            fn: function(con, opt){
                Ext.get(document.body).mask('Loading...');
            },
            scope: this
        },
        'requestcomplete': {
            fn: function(con, res, opt){
                Ext.get(document.body).unmask();
            },
            scope: this
        },
        'requestexception': {
            fn: function(con, res, opt){
                Ext.get(document.body).unmask();
            },
            scope: this
        }
    }
});
maskingAjax.request({
    url: urlViewModify,
    success: function(r, o){
        reloadDRStore();
    },
    failure: submitFailed,
    params: {
        reviewed: '1'
    },
});

Aborting a request

Example of aborting a request for grid loading:

//abort the request
Ext.Ajax.abort(searchStore.proxy.activeRequest);                                
//hide any masks
var gMask = Ext.getCmp('searchGrid').loadMask;
if(gMask && gMask.hide){  gMask.hide();  }
}

"Permission denied to call method XMLHttpRequest.open" or "Access to restricted URI denied (NS_ERROR_DOM_BAD_URI)"

Ajax requests using the regular XMLHttpRequest mechanism can only be sent to a server in the same domain as the page was served from.

This is known as the Same Origin Policy

Scripts in my Ajax-loaded markup are not executed

Script execution in Ajax-loaded markup is not enabled by default for performance reasons. Script elements are extracted and executed optionally based upon either the global configuration option Ext.Updater.defaults.loadScripts, or options passed into the Updater.update method and the Element.update method.

Share this post:
Leave a reply

Written by The Sencha Dev Team

Commenting is not available in this channel entry.