Javascript AJAX Get and Post

When you need to send some data to a page on a web server from javascript, you can use AJAX and Get/Post. The two examples below show how to use each:

AJAX GET Request:

<script language="javascript" type="text/javascript">
var ajax_request;
function sendAjaxRequest() {
/* Name/Value data to send */
var field1 = "a";
var field2 = "b";
var field3 = "c";
/* Build the data to send */
var builtURL = "/somepageonwebsite.php?field1=" + ajaxFilter(field1) + "&field2=" + ajaxFilter(field2) + "&field3=" + ajaxFilter(field3);
	try { ajax_request = new XMLHttpRequest(); }
	catch (trymicrosoft) {
			      try { ajax_request = new ActiveXObject("Msxml2.XMLHTTP"); }
			      catch (othermicrosoft) {
						      try { ajax_request = new ActiveXObject("Microsoft.XMLHTTP"); }
						      catch (failed) { ajax_request = false; }
			       			     }
			     }
	/* Send the data */
	ajax_request.open("GET", builtURL, true);
	ajax_request.onreadystatechange = getAjaxResponse;
	ajax_request.send();
}
function getAjaxResponse() { /* Server script/page response */ var respData = ajax_request.responseXML; }
function ajaxFilter(data) { data = escape(data); data = data.replace("+", "%2B"); data = data.replace("/", "%2F"); return data; }
</script>

<input type="button" onclick="sendAjaxRequest();" value="Send Data to Server" />

AJAX POST Request:

<script language="javascript" type="text/javascript">
var ajax_request;
function sendAjaxRequest() {
/* Name/Value data to send */
var field1 = "a";
var field2 = "b";
var field3 = "c";
/* Build the data to send */
var url = "/somepageonwebsite.php";
var parameters = "field1=" + ajaxFilter(field1);
parameters = parameters + "&field2=" + ajaxFilter(field2);
parameters = parameters + "&field3=" + ajaxFilter(field3);
	try { ajax_request = new XMLHttpRequest(); }
	catch (trymicrosoft) {
			      try { ajax_request = new ActiveXObject("Msxml2.XMLHTTP"); }
			      catch (othermicrosoft) {
						      try { ajax_request = new ActiveXObject("Microsoft.XMLHTTP"); }
						      catch (failed) { ajax_request = false; }
			       			     }
			     }
	/* Send the data */
ajax_request.open("POST", url, true);
ajax_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); /* If sending XML -> text/xml;charset=utf-8 */
ajax_request.setRequestHeader("Content-Length", parameters.length);
ajax_request.setRequestHeader("Connection", "close");
ajax_request.onreadystatechange = getAjaxResponse;
ajax_request.send(parameters); /* If not using new FormData() method (IE9- no support), data must be manually encoded like is done in this example */
}
function getAjaxResponse() { /* Server script/page response */ var respData = ajax_request.responseXML; }
function ajaxFilter(data) { data = escape(data); data = data.replace("+", "%2B"); data = data.replace("/", "%2F"); return data; }
</script>

<input type="button" onclick="sendAjaxRequest();" value="Send Data to Server" />

Expanding upon "getAjaxResponse":
The function "getAjaxResponse" is a little generic in terms of how it handles an XML response; so let's expand on it a little bit.

Assume the XML Response Takes The Form:

<xml>
<data>
	<block>
		<id>123</id>
		<value>Over 4KB of text</value>
	</block>
</data>

Reading the XML Response (above):
var occurrances = respData.getElementsByTagName("block").length;
for (var i = 0; i < occurrances; i++) {
var tmp_id = 0, tmp_value = "";
datablock = respData.getElementsByTagName("block")[i];
if (datablock.getElementsByTagName("id")[0].childNodes[0]) { tmp_id = ajaxResponseFilter(datablock.getElementsByTagName("id")[0].childNodes[0].nodeValue); }
/* Firefox automatically splits the node into 4kb segments, so make special case for Firefox to compensate. */
if (typeof(datablock.getElementsByTagName("value")[0].textContent) != "undefined") {
	tmp_value = ajaxResponseFilter(datablock.getElementsByTagName("value")[0].textContent);
}
else {
	tmp_value = ajaxResponseFilter(datablock.getElementsByTagName("value")[0].childNodes[0].nodeValue);
}
}
function ajaxResponseFilter(data) {
	/* The filtering employed on the returned data will vary, but this is an example */
	data = data.replace(/&lt;/g, "<"); data = data.replace(/&gt;/g, ">"); data = data.replace(/&quot;/g, '"'); data = data.replace(/&amp;/g, "&");
	return data;
}

Additional Encoding:
You may also need to perform additional encoding (ajaxFilter) on data that is being passed. In that regard, depending on what you are doing, the function below may be of valuable reference:

function ajaxFilter(data) {
data = escape(data);
data = data.replace("+", "%2B");
data = data.replace("/", "%2F");
data = data.replace("!", "%21");
data = data.replace("\"", "%22");
data = data.replace("#", "%23");
data = data.replace("$", "%24");
data = data.replace("%", "%25");
data = data.replace("&", "%26");
data = data.replace("'", "%27");
data = data.replace("(", "%28");
data = data.replace(")", "%29");
data = data.replace("*", "%2A");
data = data.replace(",", "%2C");
data = data.replace("-", "%2D");
data = data.replace(".", "%2E");
data = data.replace(":", "%3A");
data = data.replace(";", "%3B");
data = data.replace("<", "%3C");
data = data.replace("=", "%3D");
data = data.replace(">", "%3E");
data = data.replace("?", "%3F");
data = data.replace("@", "%40");
data = data.replace("[", "%5B");
data = data.replace("\\", "%5C");
data = data.replace("]", "%5D");
data = data.replace("^", "%5E");
data = data.replace("_", "%5F");
data = data.replace("`", "%60");
data = data.replace("{", "%7B");
data = data.replace("|", "%7C");
data = data.replace("}", "%7D");
data = data.replace("~", "%7E");
return data;
}