Call a function after an asynchronous JavaScript function completes?

Instead of waiting for the response from the server to get permission to update the user interface, a popular technique is to simply assume that it's okay to just go ahead and update the UI. In most cases, the request is usually successful, so just make that assumption and then make the requests to the server.

Afterwards, when the response comes back, instead of updating the UI, check to see if the request was indeed successful. If it was, great! You can either do nothing, since you've already updated your UI, or you could check to make sure your fast update matches what the server sent. It should, but if it doesn't, you can fix it.

Additionally, you can also check the status code in the response. If it's a 500, 404, or any non-200 status code that indicates that there is an exceptional case, you can then act on it by reverting your like button back to it's previous state and then displaying a nice error message to your user.

Not only does this make your UI extremely snappy, but you're still able to handle error conditions when they do occur.

Here is your code, modified slightly to facilitate this technique. Since I don't have all your code, this is not to be construed as a working example and is intended to simply get you started:

function foo()
{ 
   // call liked immediately. Don't wait for the server to respond
      // think "update the UI immediately"
   liked( function() {
       xmlhttp2.open("POST", "async/async_likeEmail.php",true)
       xmlhttp2.setRequestHeader(...
       ...
       xmlhttp2.send(parameters);
   });

  // this is a handler where you just check to make sure the request succeeded
    // if it does, great, do nothing. If it fails, change the like button back!
  xmlhttp1.onreadystatechange = function() {
      if(xmlhttp1.status == 404 || xmlhttp1.status == 503) {
          alert("problem!");
          // put the like button back to the previous state
      }
  };

  xmlhttp1.open("POST", "async/async_likeUpdateDB.php", true)
  xmlhttp1.setRequestHeader(...
  ...
  xmlhttp1.send(parameters);
}

function liked(callback) {

  /* insert code to render the liked result
   *  show what the button would look like if successful.
   */

  // you don't really need to do this part. You know what a liked button looks like
   // so just render it without waiting for the response.
    // however, leaving this here acts as a failsafe in case your  
     // code that updates it immediately does something wrong
  if (xmlhttp1.readyState == 4)
  {
    xmlhttp1.responseText;
    someElement.innerHTML = xmlhttp1.responseText; // render the "liked" button

    // call the callback to make the 2nd Ajax request
    callback();
  }
}

UPDATE:

The reason your first AJAX call was not firing properly is because you were assigning the result of thh function "liked" to the onreadystatechange handler instead of assigning the actual function object to the onreadystatechange handler:

xmlhttp1.onreadystatechange = liked( function() {
    xmlhttp2.open("POST", "async/async_likeEmail.php",true)
    xmlhttp2.setRequestHeader(...
    ...
    xmlhttp2.send(parameters);
}

Instead, this would have worked:

xmlhttp1.onreadystatechange = function() { 
    liked( function() {
        xmlhttp2.open("POST", "async/async_likeEmail.php",true)
        xmlhttp2.setRequestHeader(...
        ...
        xmlhttp2.send(parameters);
    }
}

To make it more clear, consider the following:

xmlhttp1.onreadystatechange = someFunct();   // assign the result to the handler

xmlhttp1.onreadystatechange = someFunct;    // assign the function to the handler

// also assigns function to handler, but wrapped in anonymous function
xmlhttp1.onreadystatechange = function() {   
    someFunct();
}