AJAX Synchronous Get

The first example was asynchronous get, where the page is not delayed while waiting for a response from the AJAX page. This example is synchronous get. To be sure, synchronous get is easier to program for. However, it has a major difference: The JavaScript code execution for this request stops until a response is received. The whole page and thus your whole browser may be frozen while waiting for a response. If you know the wait time to be unimportant, then you may wish to use synchronous get.

There are certain times when you must use a synchronous method. Suppose you needed to perform some action in increments. You cannot perform incremental actions asynchronously. The AJAX code will do all the incremental actions at virtually the same time, overwhelming the database or web server which will result in most of your actions not be executed. Doing it synchronously will ensure the next action will only be performed when the last action is complete.

As in the previous example, here is an example page to create. Be sure you understand the asynchronous get method before going on. This example will highlight the differences, but will not explain the things that are the same.

A word of caution: Some browsers, such as FireFox version 3, do not wait for a reply like other browsers do. Only the JavaScript code execution stops, everything else continues on like normal. As such, the output may not be what you expect. Therefore, when using synchronous AJAX, you may have to disable all form elements until the processing is finished to ensure you get the desired output.


<script type="text/javascript" src="/zxml.js"></script>
<script type="text/javascript">
function sendAJAX() {
	var oXHR = zXmlHttp.createRequest();
	oXHR.open("get", "action.cfm?MyNumber=" + document.getElementById("input1").value, false);
	oXHR.send(null);

	if (oXHR.status == 200 || oXHR.status == 304) {
		document.getElementById("output1").innerHTML = oXHR.responseText;
	}
	else if (oXHR.status == 404 || oXHR.status == 500) {
		alert("An error has occured.");
	}
}
</script>
<input type="text" name="input1" id="input1" onkeyup="sendAJAX();" />
<p>I will double your number: <span id="output1">Output goes here.</span></p>

oXHR.open("get", "/action.cfm?MyNumber=" + document.getElementById("input1").value, false);
oXHR.send(null);

The previous example had true for the last variable. But this time it is set to false. The request will thus be carried out synchronously. And notice that the send() method in the object is called before the code to execute once it is done, not after as in the previous example. Furthermore, there are no checks to see when it begins and ends. That is because the code is delayed until it ends, and then continues on with the next line after send(). So, if you want to display a loading message, it would go before send().

You check the status code after the send() method. A simple word of caution. You must remember that our oXHR variable is defined within the functin sendAjax(). If you put the status check code in another function, you must pass the variable to the function. The check function will not know the oXHR variable because oXHR was not defined in the global scope. Unless you have a good reason, it is best practice to avoid globally defined variables.

See it in action

Manual test of the AJAX page: http://www.techs-on-call.biz/ajax/synchronous-get/action/action.cfm?MyNumber=2 - http://www.techs-on-call.biz/ajax/synchronous-get/action/action.cfm?MyNumber=Not-A-Number

The whole page in action: http://www.techs-on-call.biz/ajax/synchronous-get/action/

[AJAX index]