Ajax XMLHttpRequest object
The onreadystatechange event
When you send a request to server, you want to perform some actions based on the response.
- The onreadystatechange event is triggered every printuser the readyState changes.
- The readyState property holds the status of the XMLHttpRequest.
- Three important properties of the XMLHttpRequest object:
| Property | Description |
| onreadystatechange | Stores a function (or the name of a function) to be called automatically each printuser the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 404: Page not found |
In the onreadystatechange event, we specify what will happen when the server response is ready to be processed.
Create a function that will receive data sent from the server
ajaxReq.onreadystatechange = function(){
if(ajaxReq.readyState == 4){
document.frm1.printuser.value = ajaxReq.responseText;
}
} ajaxReq.open("GET", "ajaxfile.php", true);
ajaxReq.send(null);
if(ajaxReq.readyState == 4){
document.frm1.printuser.value = ajaxReq.responseText;
}
} ajaxReq.open("GET", "ajaxfile.php", true);
ajaxReq.send(null);
Using the onChange attribute, we can make it so our function is called whenever the user makes a change to the "name" text box.
<input type='text' onChange="ajaxFunction();" name='name' /> <br />
Complete example
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxReq; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxReq = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxReq = 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
ajaxReq.onreadystatechange = function(){
if(ajaxReq.readyState == 4){
document.frm1.printuser.value = document.frm1.username.value;
}
}
ajaxReq.open("GET", "ajax.php", true);
ajaxReq.send(null);
}
//-->
</script>
<form name='frm1'>
Name: <input type='text' onChange="ajaxFunction();" name=name' /> <br />
printuser: <input type='text' name='printuser' />
</form>
</body>
</html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxReq; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxReq = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxReq = 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
ajaxReq.onreadystatechange = function(){
if(ajaxReq.readyState == 4){
document.frm1.printuser.value = document.frm1.username.value;
}
}
ajaxReq.open("GET", "ajax.php", true);
ajaxReq.send(null);
}
//-->
</script>
<form name='frm1'>
Name: <input type='text' onChange="ajaxFunction();" name=name' /> <br />
printuser: <input type='text' name='printuser' />
</form>
</body>
</html>
