AJAX Request For Text

 

A Working AJAX Request

The HTML / Javascript

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">

<script>
//***********************************
//***********************************
//********** AJAX HANDLERS **********
//***********************************
//***********************************

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

//Setup to make an HTTP POST Ajax request
AjaxRequest1Parameters = "request_type=get_image_to_show";			//<<<<<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.responseText != null)	//Check we got some response data (this.responseText or this.responseXML)
			{
				//----- PROCESS THE RESPONSE -----
				document.getElementById('ajax_area1').innerHTML = this.responseText
			}
			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


//************************************************
//************************************************
//********** CREATE AJAX REQUEST OBJECT **********
//************************************************
//************************************************
function ajaxRequest()
{
	//Cross browser - deal with IE varients
	try
	{
		//Non IE Browser
		var request = new XMLHttpRequest();
	}
	catch(e1)
	{
		try
		{
			//IE6?
			request = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e2)
		{
			try
			{
				//IE5?
				request = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e3)
			{
				//There is no Ajax support in this browser
				request = false;
			}
		}
	}
	return request;
}
</script>


</head> 
<body> 
<div id='ajax_area1'>THIS WILL BE REPLACED</div>
</body>
</html>

 

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_image_to_show")
	{
		//--------------------------------------------
		//----- AJAX REQUEST - GET IMAGE TO SHOW -----
		//--------------------------------------------
		echo "WITH THIS!";
	}
}

?>

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.