AJAX Synchronous Post

The final basic AJAX method we are going to look at is the Synchronous Post method. Like the Synchronous Get method, the JavaScript code execution stops until a response is received. This will cause some browsers to freeze.

This example builds on the three previous AJAX examples, so make sure you understand them first. This is the same example used in the Asynchronous Post example, but now modified to send the data synchronously.


<script type="text/javascript" src="/zxml.js"></script>
<script type="text/javascript">
function sendAJAX() {
	var oXHR = zXmlHttp.createRequest();
	oXHR.open("post", "action.cfm", false);
	oXHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	oXHR.send("String=" + document.getElementById("string").value + "&Key=" + document.getElementById("key").value);
	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>
<p>String: <input type="text" name="string" id="string" onkeyup="sendAJAX();" /><br />
Key: <input type="text" name="key" id="key" onkeyup="sendAJAX();" />
</p>
<p>I will encrypt your string with the given key: <span id="output1">Output goes here.</span></p>

oXHR.open("post", "action.cfm", false);

This is the important change between our asynchronous post and synchronous post example. If the last parameter is true, then the send method works asynchronously; false and the send method works synchronously.

The next thing to notice is that, like the Synchronous Get, the data is sent before you examine the results. Again, this method is much more straightforward than the asynchronous methods. The best way to really understand this AJAX method is to compare it with all the others.

That is the last basic AJAX example. The next example is the hidden iframe example which is required for certain situations.

See it in action

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

[AJAX index]