AJAX Asynchronous Post
Sometimes, you just need to Post data to your AJAX page. This could be you have a lot of data that is too long for the URL. Well, it actually is fairly simple. Look back over the Asynchronous Get example. There are only a few things to change. First, your AJAX page must now change from processing the GET to POST. You will have to get a little creative if you wish to diagnose your output, but that is beyond the scope of this article.
We are going to make a few modifications. For this example, we are going to have two input strings. One string is going to be returned encrypted. The second string is going to be the encryption key for that string.
<script type="text/javascript" src="/zxml.js"></script>
<script type="text/javascript">
function sendAJAX() {
var oXHR = zXmlHttp.createRequest();
oXHR.open("post", "action.cfm", true);
oXHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
oXHR.onreadystatechange = function() {
if (oXHR.readyState == 1) {
// checking ...
}
if (oXHR.readyState == 4) {
if (oXHR.status == 200 || oXHR.status == 304) {
document.getElementById("output1").innerHTML = oXHR.responseText;
}
if (oXHR.status == 404 || oXHR.status == 500) {
alert("An error has occured.");
}
}
};
oXHR.send("String=" + document.getElementById("string").value + "&Key=" + document.getElementById("key").value);
}
</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>
Not much has changed since our asynchronous get example. The first thing to notice is the first variable in the open method has gone from "get" to "post". We also removed the ?MyNumber= part after the file name. That is because we are now sending by Post. However, if you wish to send some Get variables still, you can do that. What is of interest now is the next line.
This line is very important. Without it, your Post request will not work. If basically puts in the header information telling the server you are sending a form.
In the asynchronous get, the send method was given null as the parameter. When you are posting, you send the variables here. The format in which you send the post variables looks exactly like the fomat you send a get variable in the URL. That is to say, in the format of A=1&B=2&C=3....
And that is it. Sending a variable by post is not much different than sending by get. One word of caution. For many browsers,
JavaScript string concatenation has a high overhead. If you are going to be sending many variables by post, you should put all
the form element values into an array and use JavaScript's array join function to create the long string. That function would
something like this:
my_array.join("&");
See it in action
The whole page in action: http://www.techs-on-call.biz/ajax/asynchronous-post/action/
