Dan Vega: Ajax asynchronous vs synchronous request

There are times (like the one I ran into today) where you don't want an ajax request to be asynchronous. By default all ajax requests are set to asynchronous by default which can cause some strange behavior if your'e not paying attention. I am going to create a really basic example here that should outline the problem. First we have a basic template that allows the user to enter their name, click a button and somewhere we will write some output to the container div. <!DOCTYPE HTML> <html> <head> <title>jQuery Async</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ }); </script> </head> <body> <input type="text" id="name" name="name"/> <button>Get Messages</button> <div class="container"> </div> </body> </html> Next I will setup a click handler on our button. We will get the name of the user by grabbing the value of our input box. Finally we will call a get messages function that will contain the logic to get our messages. That method will return an array and we will loop over that array and print the messages to our container div. $(function(){ $('button').click(function(e){ var name = $('#name').val(); var messages = getMessages(name); for( var i=0; i<messages.length; ++i){ $('.container').append(messages[i] + "<br/>")' } }); });

Now its time to build out our get messages function. First lets just start by adding some static messages to an array and returning that. function getMessages(name){ var messages = []; // static messages messages.push("Hello " + name); messages.push("Thank you for stopping by."); return messages; } This works great so far but I forgot that one of my messages in api call somewhere else. I need to make a request to this API and it will return another message for me to add to my messages array. API.cfc
component { remote any function sayGoodBye(String name){ sleep(3000); return "Goodbye " & name; } } function getMessages(name){ var messages = []; // static messages messages.push("Hello " + name); messages.push("Thank you for stopping by."); // call our api to get another message $.ajax({ url: 'API.cfc', type: 'post', data: { method : 'sayGoodbye', name : name, returnFormat: 'JSON' }, success: function(data){ messages.push(JSON.parse(data)); } }); return messages; } So everything looks pretty good here right? The problem is our program still only prints out our first 2 static messages. If you remember to the beginning of this post I mentioned that all ajax request are asynchronous by default. So while our program is talking to our API execution is returned to our program and the 2 static messages are returned. There are a couple approaches to solving this but the easiest is making our ajax request synchronous and to do that all you have to do is set the async property of the ajax method to false. Then your request will finish, return and you can add your new messages to the messages array. Simple example but important to understand.

<!DOCTYPE HTML>
<html>
<head>
	<title>jQuery Async</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   	<script type="text/javascript">

$(function(){

$('button').click(function(e){
               var name = $('#name').val();
               var messages = getMessages(name);

for( var i=0; i<messages.length; ++i){
                  $('.container').append(messages[i] + "<br/>");
               }

});

function getMessages(name){
            var messages = [];

// static messages
            messages.push("Hello " + name);
            messages.push("Thank you for stopping by.");

// call our api to get another message
            $.ajax({
               url: 'API.cfc',
               type: 'post',
               data: {
                  method : 'sayGoodbye',
                  name : name,
                  returnFormat: 'JSON'
               },
               async: false,
               success: function(data){
                  messages.push(JSON.parse(data));
               }
            });

return messages;
         }

</script>
</head>
<body>

<input type="text" id="name" name="name"/>
   <button>Get Messages</button>

</div>

</body>
</html>

This entry was posted on August 1, 2012 at 4:47 PM and has received 4141 views. Comments 3 | Print this entry.

#1 by Ryan Anklam on 8/2/12 - 3:30 AM

Dan, just a quick note that async = false will be depreciated in jQuery 1.8.

Maybe you could move return messages to the complete callback of your ajax call. You could also wrap the getMessages in a deferred like so: https://gist.github.com/3230929. You could then wrap the logic for showing messages in a when(getMessages()).then(function(){..show your messages}) statement.

#2 by Dan Vega on 8/2/12 - 3:38 AM

I knew there were other ways to handle this but I was just keeping it simple for this post. I didn't realize it was being deprecated though, thanks for the heads up!

#3 by Dan Vega on 8/2/12 - 3:39 AM

Awesome example, thanks Ryan.

Navigation

Search

Tags

Archives by Subject

Subscribe

Recent Comments

Blog Roll

Ajax asynchronous vs synchronous request

TweetBacks

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)