Ajax Implementation

Hello Guest

Links

Google Search

Ajax Implementation

+ Share and Enjoy

Author: Cristea Iulian

1 from 11 vots

Vote this article

In our days we need much more interactivity, navigation speed and allot of space in our pages from the internet.

The fastest way but not easily to secure is using Ajax.

How it works

The process is very simple and very fast.

You pass your informations to javascript from inputs or other controls, this passes to Ajax and this one sends informations to server. Server is processing your desired code and if you need to show something in page, you simply write your text or html code that you want. This will be sent back to Ajax, then to JavaScript which will put your resulted content wherever you want.

Here will appear the result from server

Still, Ajax can transport only up to 10 KB of data. For sending more then that, break your data into packets and send them step by step (I wont give more details here because this tutorial is not for sending data using complex ways).

Let's see now how everything works. The first part is the JavaScript and Ajax code:
Functions are actually JavaScript functions which calls Ajax support.

The "sendToServer" function initiate the Ajax object calling the "GetXmlHttpObjectByBrowser" function. If it doesn't work, will return an alert which tell us that our browser doesn't support http requests.

If everything its ok, we create an "url" variable which will contain the string with the server file that will call later.

At this variable we need to add another variable "sid". This is a random variable for assuring that we don't have the same url string every time so the page don't load from any cache.

Next we call the "checkState" function to verify in which state is our object. It has 4 states which determines if the object has sent the data, if its waiting for server, if fails communicate with the server or if the communication has been completed.

We need the last state to verify if the communication with server has been complete. If so this means that we already finish with Ajax part and can go back to JavaScript and show a message or the result from server.

<script type="text/javascript" language="javascript">

var xmlHttpAjax
var containerAjax = "";
function sendToServer(str, loadingPlace)
{
	xmlHttpAjax = GetXmlHttpObjectByBrowser()
	if (xmlHttpAjax==null)
	{
		alert ("Browser does not support HTTP Request")
		return;
	}
	
	url    = str;
	url    += "&sid="+Math.random()
	xmlHttpAjax.onreadystatechange = checkState
	xmlHttpAjax.open("GET",url,true)
	xmlHttpAjax.send(null)
	containerAjax = loadingPlace
	
} 

function checkState()
{ 
	if (xmlHttpAjax.readyState==4 || xmlHttpAjax.readyState=="complete")
	{
		document.getElementById(containerAjax).innerHTML = xmlHttpAjax.responseText;
	}
}

function GetXmlHttpObjectByBrowser()
{ 
	var objXMLHttp = null
	if (window.XMLHttpRequest)
		objXMLHttp = new XMLHttpRequest()
	else if (window.ActiveXObject)
		objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
	return objXMLHttp
}

</script>

Next will need the HTML code:
In the "resultControl" div will show the result from browser. It is recommended for font color to be a strong one because peoples might not see the results. They will not know if their informations has been saved.

The rest is an input text where they'll write their data and a button or link which will call the "sendToServer" function to which we'll give two parameters: the url string and the place where we want to show the result.

<div id="resultControl">

</div>
<input type="text" id="infoToSend" />
<input type="button" value="Send to server" onclick="sendToServer('sample.php?content='+document.getElementById('infoToSend').value, 'resultControl')" />

In the last don't forget that we have to create the server side page, in our sample the php page. This will retrieve data from Ajax like a normal page, calling the "$_GET" variable. So we know that we've sent a variable "content". Now we can process its value, saving it to database or anything else because this is a server side page.
To send back content to Ajax, simply write whatever we want, either as HTML or as PHP.

You said: 
<?
	echo $_GET["p"];
?>

+ post a comment

- Your comment (Smileys will take effect after refresh)

sitemap | terms and conditions | contact