A Working AJAX Request

The HTML / Javascript

<script>
//Setup to make an HTTP POST Ajax request
AjaxRequest1Parameters = "request_type=get_xml_values";			//<<<<<SET PARAMETER TO POST  (id1=val1&id2=val2 for multiple parameters)
AjaxRequest1 = new ajaxRequest();
AjaxRequest1.open("POST", "ajax.php", true);										//<<<<<SET THE FILE TO POST THE REQUEST TO
AjaxRequest1.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
AjaxRequest1.setRequestHeader("Content-length", AjaxRequest1Parameters.length);
AjaxRequest1.setRequestHeader("Connection", "close");
AjaxRequest1.onreadystatechange = function()
{
	//-----------------------------------------------
	//----- RESPONSE RECEIVED FROM AJAX REQUEST -----
	//-----------------------------------------------
	if (this.readyState == 4)				//4=Completed Ajax request
	{
		if (this.status == 200)				//200=Call succeeded
		{
			if (this.responseXML != null)	//Check we got some response data (this.responseText or this.responseXML)
			{
				//----- PROCESS THE RESPONSE -----
				var xmlDoc = AjaxRequest1.responseXML.documentElement;
				document.getElementById("ajax_area1").innerHTML = xmlDoc.getElementsByTagName("ajax_area1")[0].childNodes[0].nodeValue;
				document.getElementById("ajax_area2").innerHTML = xmlDoc.getElementsByTagName("ajax_area2")[0].childNodes[0].nodeValue;
			}
			else
			{
				alert("Ajax error: No data received");
			}
		}
		else
		{
			alert( "Ajax error: " + this.statusText);
		}
	}
}

//SEND THE AJAX REQUEST
AjaxRequest1.send(AjaxRequest1Parameters);			//Use (null) if there are no parameters to send

</script>

<div id='ajax_area1'>THIS WILL BE REPLACED</div><br />
<div id='ajax_area2'>THIS WILL ALSO BE REPLACED</div><br />

 

The PHP File

<?php
header('Content-Type: text/xml');											//Include these headers at the very start - they are essential to stop some browsers caching the ajax response
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");			//A date in the past


if (isset($_POST['request_type']))
{
	if ($_POST['request_type'] == "get_xml_values")
	{
		//-----------------------------------------
		//----- AJAX REQUEST - GET XML VALUES -----
		//-----------------------------------------
		//echo "<img src=\"images/slider_led_red.png\" width=\"22\" height=\"8\">";
		//echo "WITH THIS!";
		
		echo "<?xml version='1.0' encoding='ISO-8859-1'?>";
		echo "<group>";
		echo "	<ajax_area1>WITH THIS</ajax_area1> ";
		echo "	<ajax_area2>AND THIS</ajax_area2> ";
		echo "</group>";
	}
}

?>

Note – you can't just use "AjaxRequest1.send(AjaxRequest1Parameters);" again after first setting it up, but you can put the whole thing (including the onreadystatechange function) inside a function and call it whenever you want to send the same ajax request.