Synchronous "ajax" with Prototype library

[keyofdminor]

Folks,

Short version:

Has anyone tried a synchronous call ("SJAX") to a server with the
Prototype library? I'm curious if there is a bug in the library
(possible) or if I am making mistake (probable).

Longer version:

I am updating a tree structure by using an Ajax call with Prototype.
The response handler adds nodes to the DOM (w3c-style -- not
innerHTML). However, other Javascript does not "see" the new nodes.
The logging suggests that the handler is being fired off in the
background asynchronously.

Here's a snippet:

var myAjax = new Ajax.Request( myUrl ,
{
method: 'get',
parameters: '',
options: { asynchronous: false }, // ??
onComplete: function(response) {
var text = response.responseText;
treeData = eval('(' + text + ')');
myPopulate(treeData);
}
});

checkForNodes(); // this should not execute until after the myPopulate
handler completes

I'm a Java guy who does not work with Javascript often. Is there an
inherent problem with this setup?

Any help is greatly appreciated... crunch time here.

thanks,
Mike
(e-mail address removed)

 

[keyofdminor]

ps. Note that my concern here is timing... The nodes are indeed created
so the data from the server is fine etc. It's just that the
checkForNodes() code asks for the children of a div and it doesn't work
until the 2nd or 3rd click.

 

[Jeremy]

Folks,

Short version:

Has anyone tried a synchronous call ("SJAX") to a server with the
Prototype library? I'm curious if there is a bug in the library
(possible) or if I am making mistake (probable).

Longer version:

I am updating a tree structure by using an Ajax call with Prototype.
The response handler adds nodes to the DOM (w3c-style -- not
innerHTML). However, other Javascript does not "see" the new nodes.
The logging suggests that the handler is being fired off in the
background asynchronously.

Here's a snippet:

var myAjax = new Ajax.Request( myUrl ,
{
method: 'get',
parameters: '',
options: { asynchronous: false }, // ??
onComplete: function(response) {
var text = response.responseText;
treeData = eval('(' + text + ')');
myPopulate(treeData);
}
});

checkForNodes(); // this should not execute until after the myPopulate
handler completes

I'm a Java guy who does not work with Javascript often. Is there an
inherent problem with this setup?

Any help is greatly appreciated... crunch time here.

thanks,
Mike
(e-mail address removed)

Synchronous server calls are generally considered a Bad Idea. I know it
seems easier to not have to mess with the callback, but the problem is
that while the call is blocking, the browser typically locks up. This
could be seen as an implementation problem with the browsers, but AFAIK,
every browser that implements javascript HTTP Requests behaves this way.

The consequence of this is that if your server is slow or not
responding, the browser can lock up for a long time or even permanently.

Try porting your code to the callback model - it's actually pretty easy,
although it might seem like a pain at first.

Jeremy

 

[keyofdminor]

thanks, Jeremy... Your post helped me realize, with stunning insight,
that with some refactoring it doesn't matter if the call is
asynchronous.

For any one else reading this, the gist of the idea is if

function checkNodes() {
doStuff1();
doStuff2();
}

then by breaking out doStuff2() into its own function I can do:

var myAjax = new Ajax.Request( url, function() {
// as before
doStuff2();
}
);

 

[Alexis Nikichine]

thanks, Jeremy... Your post helped me realize, with stunning insight,
that with some refactoring it doesn't matter if the call is
asynchronous.

Yes, that's a great thing to realize. However, in order to automate the
refactoring you describe, did anyone have some experience with Narrative
Javascript (http://neilmix.com/narrativejs/doc/index.html ) ? If I
understand correctly, it is a javascript preprocessor that should allow
you to write your checkNodes function as follows:

function checkNodes() {
doStuff1->(); // This operation will block, so please
// resume execution only after its complete
doStuff2();
}


Cheers,

Alexis