Ajax - Sending Request

In this example will show you how to use your object to communicate directly with the server. Before sending data to the server, we must first write a function that will be able to receive information. This function will be used to catch the data that is returned by the server.

The XMLHttpRequest object has a special property called onreadystatechange. onreadystatechange stores the function that will process the response from the server. The XMLHttpRequest object has another property called readyState. This is where the status of our server's response is stored. The response can be processing. Each time the readyState changes then our onreadystatechange function executes. See the example below:


<html>

<body>



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

<!-- 

//Browser Support Code

function ajaxFunction(){

var ajaxRequest;  // The variable that makes Ajax possible!



try{

// Opera 8.0+, Firefox, Safari

ajaxRequest = new XMLHttpRequest();

} catch (e){

// Internet Explorer Browsers

try{

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try{

ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e){

// Something went wrong

alert("Your browser broke!");

return false;

}

}

}

// Create a function that will receive data sent from the server

ajaxRequest.onreadystatechange = function(){

if(ajaxRequest.readyState == 4){

document.myForm.time.value = ajaxRequest.responseText;

}

}

ajaxRequest.open("GET", "serverTime.php", true);

ajaxRequest.send(null); 

}



//-->

</script>







<form name='myForm'>

Name: <input type='text' onChange="ajaxFunction();" name='username' /> <br />

Time: <input type='text' name='time' />

</form>

</body>

</html>