Synchronous Ajax Call

[Nullity]

This is in response to this (http://extjs.com/forum/showthread.php?t=7376) 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:

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:

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.

[Victor Hugo Borja]

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.



/* -*-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;
}
};

[DomZ]

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

[Victor Hugo Borja]

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.

[faisalv]

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



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

[neoart]

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

[MaxT]

I've had a go at updating this to match the Ext2.2 code.

The only bit I wasn't too sure about was the setting of headers.
E.g. the code...


hs['Content-Type']

This doesn't look right to me. I always thought that a hyphen was an invalid character for property names because it gets interpreted as a subtraction sign.
i.e.
hs.Content-Type is the same as
(hs.Content)-Type which is obvioulsy wrong. Maybe you can always get away with it if you only access the property via the square bracket notation?

Anyway, here is the code.

Max




/**
Adding a synchronous request to the Ext asynchronous only mode of operation.

History: coded from Ext 2.2.

Additional configs.

@param {Object} options
@config {Mixed} [sync] include this for a synchronous request
*/
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){
if (!hs || !hs['Content-Type']){
this.initHeader('Content-Type', 'text/xml', false);
}
method = (method ? method : (options.method ? options.method : 'POST'));
data = options.xmlData;
}else if(options.jsonData){
if (!hs || !hs['Content-Type']){
this.initHeader('Content-Type', 'application/json', false);
}
method = (method ? method : (options.method ? options.method : 'POST'));
data = typeof options.jsonData == 'object' ? Ext.encode(options.jsonData) : options.jsonData;
}
}

return this["sync" in options ? "syncRequest" : "asyncRequest"](method, uri, cb, data);

};


/**
Synchronous request.

@param {Object} method
@param {Object} uri
@param {Object} callback
@param {Object} postData
*/
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.hasHeaders || !this.headers['Content-Type'])){
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;
}
};

[Condor]

I thought everybody used the ext-basex user extension (http://extjs.com/forum/showthread.php?t=21681) for synchronous AJAX requests.

[Animal]

Can anyone provide a use case for synchronous requests?

[MaxT]

Ext-basex requires a Commercial licence. I don't see the point in buying one just to be able to do a synchronous request which can be coded in a few lines.

Max

[Animal]

I think forum poster hendricd does not charge people for using his user Ext-basex user extension...

[MaxT]

http://code.google.com/p/ext-basex/

I can't access the commercial licence page at the moment, but the last time I looked (several months ago) it quoted a price for the licence.

Max

[Condor]

ext-basex v2.3 is LGPL
ext-basex v3.0 is GPL/Commercial licence

[hendricd]

I've had a go at updating this to match the Ext2.2 code.

The only bit I wasn't too sure about was the setting of headers.
E.g. the code...


hs['Content-Type']This doesn't look right to me. I always thought that a hyphen was an invalid character for property names because it gets interpreted as a subtraction sign.
i.e.
hs.Content-Type is the same as
(hs.Content)-Type which is obvioulsy wrong. Maybe you can always get away with it if you only access the property via the square bracket notation?

Anyway, here is the code.

Max

@MaxT -- Javascript does not permit dashes in direct object-member references:
obj.Content-type

Must be done this way: obj['Content-type'] = something;

...which is why most JSON encoders force quotes around member names.



I thought everybody used the ext-basex user extension (http://extjs.com/forum/showthread.php?t=21681) for synchronous AJAX requests.

Many do, but for other reasons as well:
Built-in JSONP support (text, Object, JSON, XML ) -> to a native Ext response Object.
Request Queues
responseJSON support
Basic Auth
File system support.other goodies, yada, yada...



Can anyone provide a use case for synchronous requests?

@Animal -- Use cases:

Sequential (transactional) loading of a resource (JS, etc)
Realtime form validation server-side (intranets only recommended)
Ext-basex requires a Commercial licence. I don't see the point in buying one just to be able to do a synchronous request which can be coded in a few lines.

Max
@MaxT -- It's called dual-licensing: GPL 3.0/Commercial

[MaxT]

I still think hs['Content-Type'] is a weak implementation because the string "Content-Type" is case insensitive with HTTP. This forces you to use ['Content-Type'] and not any other valid string for the name component of the header field.

Whilst ext-basex has a dual licence, in my case I can't use GPL 3 for my code. As I have no use at the present time for the other features of the extension it is not worth buying it just to be able to add a synchronous Ajax request. No doubt there are other Ext users, with a commercial Ext licence, in a similar situation and the above patch may help.

Max

[ryounes]

A possible use case: in TreePanel.beforeNodeDrop(), I want to perform server-side rather than client-side validation of the drop so that the logic about valid drop locations doesn't have to reside in the client. beforeNodeDrop() must return false to stop the drop, but it returns without receiving a response from the server. The server response can only be captured in the callback, but from there you can't control what beforeNodeDrop() returns. Is there a way to do this other than using a synchronous call?

[wasp]

A possible use case: in TreePanel.beforeNodeDrop(), I want to perform server-side rather than client-side validation of the drop so that the logic about valid drop locations doesn't have to reside in the client. beforeNodeDrop() must return false to stop the drop, but it returns without receiving a response from the server. The server response can only be captured in the callback, but from there you can't control what beforeNodeDrop() returns. Is there a way to do this other than using a synchronous call?

True, you cannot do async call in a beforeNodeDrop, but you could do it ( I do it that way ) easily with just adding additional attribute to the node data, that's returned initially from your server, and then use it like node.attributes.can_drop or so, with simple calculations inside JavaScript. This will save you a LOT of calls to your server, as you move over your nodes, there will be a lot of them.

[mxu]

Arrow
a few question about the syn ajax :
* it should be Ext.Ajax.request({ or Ext.lib.Ajax.request for the sample to call
Ext.Ajax.request({
url: 'some_page.php',
method: 'POST',
success: success,
failure: failure,
scope: this,
params: {foo: 'bar'},
async: false
});

* there are, extjs/ext-2.2/adapter/ext/ext-base.js and extjs/ext-2.2/ext-all.js,
you mentioned "This is ONLY for use with ext-base.js", does it means there will be a conflicting
at using ext-all.js ?

[ryounes]

True, you cannot do async call in a beforeNodeDrop, but you could do it ( I do it that way ) easily with just adding additional attribute to the node data, that's returned initially from your server, and then use it like node.attributes.can_drop or so, with simple calculations inside JavaScript. This will save you a LOT of calls to your server, as you move over your nodes, there will be a lot of them.

In this case, the validity of the drop depends on properties of both the source and target, so it's not as simple as adding attributes to the nodes. Note that beforeNodeDrop is only called right before an actual drop, not as the node is dragged around, so the concern over lots of server calls is not valid.

[jemptymethod]

Can anyone provide a use case for synchronous requests?

A use case should not be necessary. If the underlying functionality that ExtJS is abstracting away allow synchronous requests, then so should ExtJS. To not do so would be like an ORM framework that does not allow you to issue raw SQL queries. Certainly 98+% of the time you just want to let the framework do the work for you, but when the framework disallows you from doing work you could do, but for the framework, then the framework has just become less valuable, and possibly a hindrance.

[jemptymethod]

A possible use case: in TreePanel.beforeNodeDrop(), I want to perform server-side rather than client-side validation of the drop so that the logic about valid drop locations doesn't have to reside in the client. beforeNodeDrop() must return false to stop the drop, but it returns without receiving a response from the server. The server response can only be captured in the callback, but from there you can't control what beforeNodeDrop() returns. Is there a way to do this other than using a synchronous call?

This was just the sort of use case I was going to post: server side validation of some data before proceeding: thats precisely the situation I find myself in today (albeit having nothing to do with TreePanel, because I get the impression from grepping the ExtJS 3 source code this may have been addressed though I'm not positive).

But just being asked to provide a use case in such a terse way is bad customer relations in my opinion.

[saicextsupport]

Unit test with JSUnit, as I run a scenario, I need to open a file and parse it.. This is one example where it would be useful to have sync: option.

What's the best way for Ext JS 2.3?

[Animal]

There's no reason why the drop has to be performed inline.

It can be performed in the Ajax response handler.

I've actually done this for a customer.

[Animal]

Unit test with JSUnit, as I run a scenario, I need to open a file and parse it.. This is one example where it would be useful to have sync: option.

What's the best way for Ext JS 2.3?

Parse it in the Ajax success handler.

[Animal]

But just being asked to provide a use case in such a terse way is bad customer relations in my opinion.

What supplier is talking to what customer?

[csbubbles]

We have some tree. Each node of this tree corresponds to some data record in database table on server. For example we have table that contains hierarchy of product categories of internet-shop (task list in project management system, groups and users in instant messenger store, ...) - in any real project tree data structure is used.

Now... We have UI built on ExtJS library. TreePanel, TreeNode, ... and TreeEditor. Some user (admin, project manager, IM user, ...) tries to rename node of tree. What do we need? We have to send request to web server where some server application should save changed data to database. And this request can be whether successful or not. And we must not do something with tree node before we get response (success or failure) from server.

ExtJS. TreeEditor. What can we do during renaming node? We can subscribe on 'beforecomplete' event and create request there. But we have to cancel or submit edit at once. So user will see whether renamed node or old name in incorrect way. Because maybe renaming won't be done in the database.

And there are many cases when UI mustn't be changed before response from server comes. Because if we can't use UI library bound to real data it's meaningless.

I think I've described use case in depth. So, if somebody can explain me how I should realize it with ExtJS I will be very thankful. Because I decided to try using ExtJS in some project about two months ago and if to be honest I am very disappointed so far...

PS And this issue happens when any update (data changes) takes place... For more example - drag'n'drop functionality...


Can anyone provide a use case for synchronous requests?

[Animal]

I don't understand the difficulty.

Veto the node edit, and set the node's text on return from Ajax. This is a common use case, I've had to do that a few times.

[csbubbles]

Ok. Try one more time...

User tried to change some tree node name.
He clicked at selected node.
He typed some 'new' name.
He pressed 'enter'.

What does he have see during 5 seconds for example while the request goes?

Your callback method (beforecomplete) has finished. At once. AJAX request can last non-determined time. We have to say your library what it should do.

editor.on('beforecomplete', function(editor, newValue, originalValue) {
conn = new Ext.data.Connection();
conn.request({
//...
success: function(responseObject) {
// everything's fine, we can update tree...
},
failure: function() {
// something's wrong...
}
});

!!!
What can we do here?!
editor.cancelEdit(false); - ?
of just leave as it's all ok and change name to new?

});

PS success or failure can be executed the-god-knows-how-long.... But callback function will be finished at once. I really don't understand what I can do in this case.

PPS The actually SAME case if I drop some item to some place. I need to say your library what should be done but actually I can get real information about that only afrer getting response from server.

[Animal]

You could show the spinning indicator, and show some temporary text in place of the changed text. Anything you like.

You have the same problem if you go synchronous. Except that you have locked the entire browser up.

[csbubbles]

I do not like to show user anything.
I must show user correct information in right way like he wants.

The tree shows some data. And it hasn't to show anything else.
When we do something there (renaming, dragging, ...) some result of this action is.
And we need to show there something. Submitted, canceled, somethings else...
But we don't want it.

What should I show in tree you think? "I'm sorry, this item is being loaded".
Do I need to submit changing? Or cancel?
It's ridiculous... Really...

PS Of cause I can hack ExtJS as I'd like and do anything what I want. And maybe nothing will remain from original one. And now I'm doing it unfortunately. Of cause anything can be done.
But we are living in 21st century. And it's very strange to have API that does not decide typical use cases by two lines of code. It seems sort of WinAPI... When I saw for example that I needed to override 'renderElements' method (TreeNodeUI) to show shomething esle in tree and needed to repeat there all activities from parent method... Really, I just thought about MFC and smiled...

By the way... ExtJS customers are people all around the world. They ('customers') wants to have solution for some use cases. It will be suitable to use sync AJAX they suppose. Why doesn't ExtJS want to satisfy their wishes but offers some solutions that can not satisfy them?

PPS One more use case. About drag'n'drop. I drag node from one tree to other one. When I drop item there are only two ways - whether to commit drop or cancel. When I drop item also I send request on server and must not insert new item in target tree as I must not show flying node to source tree if I cancel drop. I should do it only when response comes.

[Animal]

I really do not get you. What is the problem that you have?

[csbubbles]

Two trees.

We drag node from first one to second.
When we drop item to target tree we need to call request to change data model on the server (in database). And only after getting response we need to do some changes in target tree.

But when we dropped item to target tree, ExtJS whether adds new node to target or shows animated flight of item to source tree (if we said 'cancel drop'). The both cases is not convenient. Nothing has to happen with trees until we get response from server (e. g. after 10 seconds).

[Animal]

You can ask it not to do that.

http://www.extjs.com/deploy/dev/docs/?class=Ext.tree.TreePanel&member=beforenodedrop

[csbubbles]

Who can I ask not to do what?

[Animal]

Did you read the link? You complained about something, and I showed you how to fix it.

[csbubbles]

I told you about the same in all posts. In this handler I call request. But this method life cycle is finished before response comes from server. Dropping finished. And whether new node is created in target tree (if I don't cancel drop) or drop is canceled (if I do).

[Animal]

Yes. You cancel the drop and perform addition of the node in the Ajax success handler.

[csbubbles]

Can't you understand that it looks ridiculous?

User drops node.
Request created but dropping canceled.
User sees how node is flying to source tree.
User thinks that some error happened (his drop canceled).

After some time new node is created in target tree.

No one wants this behavior. It's just silly...

[Animal]

AND I SHOWED YOU HOW TO STOP IT.

[csbubbles]

STOP WHAT?!

I DO NOT WANT STOP DROP!
UNTIL I GET RESPONSE FROM SERVER!

I DO NOT WANT TO CANCEL DROP AND SEE HOW NODE RETURNS TO SOURCE TREE.
ALSO I DO NOT WANT TO SUBMIT DROP AND SEE ADDED NODE IN TARGET TREE.

Only when I get results from server some changes must take place!

PS Actually you didn't show anything. You just gave link to API that I've seen many times earlier.

[Condor]

1. Use the following line to disable invalid drop animation:

treePanel.dragZone.proxy.animRepair = false;
2. Return false from beforenodedrop and do your Ajax request (optionally show some kind of waiting indicator).
3. When the response is received, move the node in code.

[csbubbles]

Great thanks, Condor.

I've decided this issue in similar but static way:
Ext.dd.StatusProxy.prototype.animRepair = false;

PS Wouldn't you explain also how can problem with renaming nodes be resolved in more correct way?

[Condor]

Great thanks, Condor.

I've decided this issue in similar but static way:
Ext.dd.StatusProxy.prototype.animRepair = false;

PS Wouldn't you explain also how can problem with renaming nodes be resolved in more correct way?

Unfortunately, there is no beforetextchange that you could use to stop the node text being changed.
The easiest method is probably to override TreeEditor.updateNode to send a server request instead of changing the node text.

[csbubbles]

Ok, thanks, I'll try this way.

[Condor]

I created a feature request (http://www.extjs.com/forum/showthread.php?t=94297) on the subject.

[UltimateCodeWarrior]

How about this: Minimalistic / Least Invasive Surgery. Rather than cut a scar across your gut to take out an appendix, make a small incision and use some tweazers and a fiber optic camera and a lazer to remove it.

So your tieing into a framework that was already done synchronously and you don't want to spend the time or money to re-write things. The client you are working with wants to see the job done ASAP, they are on a shoe string budget.

You want to use a package such as Joomla and VirtueMart on your E-Commerce Site.
You need to validate input against a database.
You want to do bare-minimal code tweaks so as to sniper the specific validation issue rather than re-write the whole validation function to work asynchronously.
You just want to insert a few lines of code in dynamically generated javascript from PHP code.

// Up here's a bunch of virtuemart/joomla dynamic javascript stuff, perhaps regular expression to make sure there are no
// blank fields, etc.. You don't want to tug on this ball of spaghetti....because the fields are dynamically generated from a database // of fields and rules.

// Synchronous call right here baby to not disturb the rest of the system. I don't want to re-route arteries, quadroople bypass, zombie anesthesia.
// Put a timeout in there after 5 seconds it returns false; to stop the dreaded hang.
if (notGood(inputa,inputb)) {
alert('Failed DB Validation!');
return false; // stop the form.submit()
}

// If we get here, we will continue with the rest of the validation, submit


// Down here is a bunch of PHP joomla/virtuemart dynamically generated javascript code that I have no interest in re-writing or putting in a completion block because I would have to re-write the final form.submit() in the completion block.

So if I did this synchronously, I would have hack up the existing virtuemart/joomla code and I really really don't want to get into all that. I just want a simple function notGood()

[mxu]

Can anyone provide a use case for synchronous requests?

Yes, see my app, a vey complicated genome-wdie association app using ExtJS, backend supporting data
are over tens or even hundreds of Gbyte.
http://www.ncbi.nlm.nih.gov/projects/SNP/GaPBrowser_prod/callGaPBrowser2.cgi?aid=1,2843&chr=1&from=189000001&to=191000001
before any asynch data querying , I need to grab query parameters, like genome build version, snp build version, chromosome length, etc that chage or update very often. Ajax asynch calls grab the jsons for all the analysis tracks (un limited), but a syn ch call come first to grab all asynch call's query parameters.

Use of the EXTJS ajax call w/ sync flag on/off will make design and coding and update analysis track loading order logically elegant.

mxu

mxu

[steffenk]

this can be done using simple callback - what's wrong with callback? It does exactly what you want, a queue of actions which are done when prior task is finished.

[mxu]

the order of grabbing parameters before data and the order of data display change often, I use ajax call order w/
synch flag to achieve this. Implementation of callback won't do this unless I change codes evry time.

[brokenwren]

My main use case for this is in a before unload event. If you need to do something before the page is unloaded, it must be done synchronously. Once the page is unloaded, all JavaScript processing on that page is stopped. Therefore, if you start an AJAX request in the beforeunload handler, it is most likely that it will not get run before the browser window is destroyed.

In fact, I think this is one of the main reasons that the XMLHttpRequest specification supports a synchronous flag.

[mitchellsimoens]

Just a note for the Ext JS 4.x users... Ext.Ajax.request support synchronous calls natively:


Ext.Ajax.request({
url : 'something.php',
async : false,
callback : function(opts, success, response) {...}
});