Loading Page
Toolbar
U-Trade tutorials
Hello Guest
Links
Google Search
search
categories
css
css
html
html
javascript
javascript
    »   Images
    »   Text effects
    »   Dimensions
    »   Implementations
    »   Menu
photoshop
photoshop
php
php



Paypal
sitemap
contact
request tutorial
recommends
Do you have something to do in code, design or animation and you don't know how?
Send us an e-mail and will do a tutorial which will solve your problem.

10 Random Tutorials from all categories and subcategories
tutorials U-Trade
tutorials U-Trade
Ajax Implementation : U-Trade
+ Share and Enjoy
Author: Cristea Iulian



Vote up
Vote down
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


sitemap   |   terms and conditions   |   contact
U-Trade © All rights reserved 2006-2008 | Ajax Implementation : U-Trade : U-Trade Tutorials