Results 1 to 10 of 53

Thread: Synchronous Ajax Call

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    186
    Vote Rating
    0
      0  

    Default Synchronous Ajax Call

    This is in response to this thread.

    I agree that it is ideal to use async requests as much as possible, even if it requires refactoring much of your other code to make it work that way. However, there is value in having the option to make a synchronous call if one should wish, and there are situations where it may be desired. Not to mention that many people have requested this functionality.

    Anyway, here it is:
    Code:
    Ext.lib.Ajax.request = function(method, uri, cb, data, options) {
    	if (options) {
    		var hs = options.headers;
    		if (hs) {
    			for (var h in hs) {
    				if (hs.hasOwnProperty(h)) {
    					this.initHeader(h, hs[h], false);
    				}
    			}
    		}
    		if (options.xmlData) {
    			this.initHeader('Content-Type', 'text/xml', false);
    			method = 'POST';
    			data = options.xmlData;
    		}
    		var async = (options.async === false) ? false : true;
    	}
    
    	return this.asyncRequest(method, uri, cb, data, async);
    };
    
    Ext.lib.Ajax.asyncRequest = function(method, uri, callback, postData, async) {
    	var o = this.getConnectionObject();
    
    	if (!o) {
    		return null;
    	}
    	else {
    		o.conn.open(method, uri, async);
    	
    		if (this.useDefaultXhrHeader) {
    			if (!this.defaultHeaders['X-Requested-With']) {
    				this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
    			}
    		}
    	
    		if (postData && this.useDefaultHeader) {
    			this.initHeader('Content-Type', this.defaultPostHeader);
    		}
    	
    		if (this.hasDefaultHeaders || this.hasHeaders) {
    			this.setHeader(o);
    		}
    	
    		this.handleReadyState(o, callback);
    		o.conn.send(postData || null);
    	
    		return o;
    	}
    };
    Example:
    Code:
    Ext.Ajax.request({
    	url: 'some_page.php',
    	method: 'POST',
    	success: success,
    	failure: failure,
    	scope: this,
    	params: {foo: 'bar'},
    	async: false
    });
    
    
    // or directly ...
    Ext.lib.Ajax.request('POST', url, callback, params, {async: false});

    DISCLAIMER: This is ONLY for use with ext-base.js.

  2. #2
    Ext User
    Join Date
    Apr 2008
    Posts
    2
    Vote Rating
    0
      0  

    Default Update

    Hi, I needed to make some synchronous requests using ExtJS and tried the solution posted in the previous post, however it didn't work for me, even thought the XMLHttpRequest was synchronous, Ext.lib.Ajax was handling the response as if it were async (using setInterval), that caused the Ext.lib.Ajax.request function to return just before the XMLHttpRequest was performed, giving an async feeling. So I just updated the code previously posted here that creates a syncRequest function on Ext.lib.Ajax to handle synchronous requests.

    Usage is the same as described on previous post.

    Code:
    /* -*-js2-*- */
    Ext.lib.Ajax.request = function(method, uri, cb, data, options) {
        if(options){
            var hs = options.headers;
            if(hs){
                for(var h in hs){
                    if(hs.hasOwnProperty(h)){
                        this.initHeader(h, hs[h], false);
                    }
                }
            }
            if(options.xmlData){
                this.initHeader('Content-Type', 'text/xml', false);
                method = 'POST';
                data = options.xmlData;
            }else if(options.jsonData){
                this.initHeader('Content-Type', 'text/javascript', false);
                method = 'POST';
                data = typeof options.jsonData == 'object' ? Ext.encode(options.jsonData) : options.jsonData;
            }
            if (options.async == false) {
                return this.syncRequest(method, uri, cb, data);
            }
        }
        return this.asyncRequest(method, uri, cb, data);
    };
    
    
    Ext.lib.Ajax.syncRequest = function(method, uri, callback, postData)
    {
        var o = this.getConnectionObject();
    
        if (!o) {
            return null;
        }
        else {
            o.conn.open(method, uri, false);
    
            if (this.useDefaultXhrHeader) {
                if (!this.defaultHeaders['X-Requested-With']) {
                    this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
                }
            }
    
            if(postData && this.useDefaultHeader){
                this.initHeader('Content-Type', this.defaultPostHeader);
            }
    
            if (this.hasDefaultHeaders || this.hasHeaders) {
                this.setHeader(o);
            }
    
            o.conn.send(postData || null);
            this.handleTransactionResponse(o, callback);
            return o;
        }
    };

  3. #3
    Ext User
    Join Date
    Nov 2007
    Posts
    23
    Vote Rating
    0
      0  

    Default

    Hi,

    I a mvery interested by this code, but i would like to know where i have to paste these methods in the extjs code ?

    Thanks

  4. #4
    Ext User
    Join Date
    Apr 2008
    Posts
    2
    Vote Rating
    0
      0  

    Default

    You don't have to patch the source to use it, just place the code on a sync.js file, and load it in your page just after loading ext.

  5. #5
    Sencha User
    Join Date
    May 2007
    Posts
    6
    Vote Rating
    0
      0  

    Default

    There is a less-intrusive way to do this too:

    Code:
    Ext.lib.Ajax.originalRequest = Ext.lib.Ajax.request;
    Ext.lib.Ajax.originalAsyncRequest = Ext.lib.Ajax.asyncRequest;
    Ext.lib.Ajax.request = function(method, uri, cb, data, options) {
        if ( options.sync === true )
        {
          this.asyncRequest = function() {
            this.asyncRequest = Ext.lib.Ajax.originalAsyncRequest; // we don't really need this ...
            this.syncRequest.apply(this,arguments); // refer to previous posts for code to this
          }
        }
        else
        {
          this.asyncRequest = Ext.lib.Ajax.originalAsyncRequest; // reset this - just in case we had some errors executing the body of request()
        }
        this.originalRequest.apply(this, arguments);
    };

  6. #6
    Sencha User
    Join Date
    Mar 2008
    Posts
    27
    Vote Rating
    0
      0  

    Default

    Dear All:
    Thanks for all of your contribution,it matches my requirement
    But I don't know if you found another problem caused by this "patch" that:
    in IE,the "Ext.MessageBox.show" no longer showen when I add faisalv's & Victor Hugo Borja 's js code ,but "Ext.MessageBox.show" shows in firefox.
    Did anyone also had such problem? and how to solve it?
    Thanks for any reply

    Regards
    john

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •