« Zimbra ALE, Ajax Linking and Embedding | Main | W3C Working Draft on the XMLHttpRequest Object »

Synchronous versus Asynchronous

Douglas Crockford posted on the Yahoo! User Interface Blog about Synchronous v. Asynchronous, since the Asynchronous is more complex to manage, many prefer using XMLHttpRequest in Synchronous mode which could have a negative effect specially on high load or slow website link, because the JavaScript engine is blocked until the request completes. That's why today we use AJAX and not SJAX, and the complexity of asynchronous programming is better handled today with the multitude of frameworks and techniques which make AJAX interfaces more fluid.

Many people prefer to use it synchronously. When used this way, the JavaScript engine is blocked until the interaction with the server is complete. Because it blocks, the flow of control looks a lot like an ordinary function invocation. Temporal complexity is abstracted away, leaving a very familiar and comfortable programming pattern. It works particularly well when the server is on the same machine, or nearby on the LAN. Unfortunately, it can perform very badly if the server is under heavy load, or if the browser is connected to the server over a slow link. Because the JavaScript engine is blocked until the request completes, the browser will be frozen. The user cannot cancel the request, cannot click away, cannot go to another tab. This is extremely bad behavior. Fortunately, XMLHttpRequest provides an option for asynchronous operation. When you set the asyncFlag flag to true, the JavaScript engine does not block. Instead the request returns immediately, with a potential action that will be triggered later when the result on the request is known. The Yahoo! Connection Manager provides a very nice interface for this.
Bookmark this article at these sites
Comments
1

i see

2

Thanks for the info

3

Sometimes synced calls are needed to simplify otherwise overly complex logic. However, JavaScript is so poor language that it does not allow to setup connection timeout, both for sync and async calls. If the timeout would be possible, it would be very easy to use sync calls on slow/bad connections like this:

var r = new XHR();
r.open('GET', url, false, TIMEOUT);
try {
r.send(null);
return r.responseText;
} catch(e) {
alert('Timed out!');
}

I think this is very needed option, but let's face it: JS is not a language, at least not suitable for serious development.

BTW, while trying to use setTimeout() in conjunction with sync call, the timeout is delayed till the request completes, so if you set the timeout to 1 second, but the sync call takes 10 seconds, your timeout will be executed after 10 seconds instead of 1. JS sucks :)

4

I think that yes, JS its not a serius language. Now there are many web apps that might work better with "SAJAX" and others that will behave better with "AJAX"... again its up to us to choose which one its better for our "current" solution.

5

It is not that JavaScript is a poor language. The lack of timeouts in the XMLHTTPRequest (XHR) object is because the XHR doesn't support any.

As you can see for yourself, http://www.w3.org/TR/XMLHttpRequest/ doesn't currently specify any timeout functionality, although it is considered.

Furthermore, Microsoft's original implementation of XHR didn't have any timeout functionality either. You can see this for yourself by examining the ActiveX object.

Please don't blame the innocent language.

6

It is not that JavaScript is a poor language.

JS is not a poor language; it was the first scipting language for web-pages; and has been modified thereafter. Without JS - internet would not have been what is is now.

And many so called programmers do not know how to program; neither in JS nor in other languages;

JS is ok...

7

Thanks for this very good article

8

The only problem I sometimes have with asynchronous is that the response does not come back in an effective time for me to use the response text.

how can one ensure that we get the data in an effective manner ?

9

on page load event i am trying to open xml file using javascript, read the content and populate one of the DIV tag in the page for dynamic display of a section in page. the js file is attached below...
it works fine with IE.

it doesn't work for FF,Opera or Safari.
if i change
xmlDoc.open("GET", "assets/xml/resprofile.xml", true);

to

xmlDoc.open("GET", "assets/xml/resprofile.xml", false);

it works fine, else i get error msg xmlDoc.responseXML is null

any suggestions??

THANKS,


// JavaScript Document
function profgeneration(para)
{
if(typeof window.ActiveXObject != 'undefined') //If browser is IE
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); //create xmlDoc object
xmlDoc.load("assets/xml/resprofile.xml"); //loading xml file
}

else if(window.XMLHttpRequest)//If browser is FF,Opera,Safari
{
try
{
xmlDoc = new XMLHttpRequest();
xmlDoc.open("GET", "assets/xml/resprofile.xml", true);
xmlDoc.onreadystatechange = handleResponse;
xmlDoc.send(null);
}
catch(e)
{
xmlDoc= false;
}
}
else if(document.implementation && document.implementation.createDocument) //if browser is FF / Opera
{
xmlDoc=document.implementation.createDocument("","",null); //creates xmlDoc document
}
else
{
alert("Your browser does not support this script");
return;
}

function randomprofiles(para)
{
var portalrequest;
portalrequest = '';
var img = new Array();
var title = new Array();
var txt = new Array();
var newno;
switch(para)
{
case 'res':
portalrequest = 'resrow';
break;
case 'biz':
portalrequest = 'bizrow';
break;
case 'viz':
portalrequest = 'vizrow';
break;
case 'cit':
portalrequest = 'citrow';
break;
default:
portalrequest = '';
break;
}

var divsection = document.getElementById("nbrhoods");// a div tag is defined on htm page with id='divLinks'. This is to display the links
divsection.innerHTML='';
//alert(portalrequest);
if(typeof window.ActiveXObject != 'undefined')
{
for(var i=0; i {
img[i] = xmlDoc.getElementsByTagName(portalrequest)[i].getAttribute("imageurl");
title[i] = xmlDoc.getElementsByTagName(portalrequest)[i].getAttribute("rowtitle");
txt[i] = xmlDoc.getElementsByTagName(portalrequest)[i].firstChild.nodeValue;
newno = xmlDoc.getElementsByTagName(portalrequest).length;
}
}
else if(window.XMLHttpRequest)
{
for(var i=0; i {
img[i] = xmlDoc.responseXML.getElementsByTagName(portalrequest)[i].getAttribute("imageurl");
title[i] = xmlDoc.responseXML.getElementsByTagName(portalrequest)[i].getAttribute("rowtitle");
txt[i] = xmlDoc.responseXML.getElementsByTagName(portalrequest)[i].firstChild.nodeValue;
newno = xmlDoc.responseXML.getElementsByTagName(portalrequest).length;
}
}
else
{
alert("Your browser does not support this script");
return;
}
var htmlText = '';
var finalno;
finalno = Math.floor(Math.random()*newno)
htmlText = htmlText + " " + title[finalno] + "

" + txt[finalno] + "

";
divsection.innerHTML= htmlText;
}

function handleResponse()
{
if (xmlDoc.readyState == 4)
{
if (xmlDoc.status == 200)
{
}
else
{
alert("There was a problem retrieving the XML data:\n" + xmlDoc.statusText);
}
}
}


Post a comment





(Email will remain hidden)





Please enter the security code you see here




Related entries
Email to a friend
Email this article to:


Your email address:


Message (optional):