What is Ajax?

AJAX  stands for  Asynchronous JavaScript and XML .
This is not a new language but a new technique using the existing  standards like HTML,Javascript.
Using Ajax,we can fetch the data from the server without loading the whole page and do the DB operations as well . 

Here is an example

<script type=”text/javascript”>
function displaySize(sVal){
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
alert (“Your browser does not support AJAX!”);
return;
}
var url=”ajax-page.php?”;
url=url+”&sVal=”+sVal;
url=url+”&sid=”+Math.random();
//alert(url);
xmlHttp.onreadystatechange=stateChangedSize;
xmlHttp.open(“GET”,url,true);
xmlHttp.send(null);
}

function stateChangedSize(){
if (xmlHttp.readyState==4)
document.getElementById(“dimension”).innerHTML=xmlHttp.responseText;
}

function GetXmlHttpObject(){
var xmlHttp=null;
try {// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) {// Internet Explorer
try {
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e){
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}
</script>
<table>
<tr>
<td>Select Position</td>
<td>
<select name=”banner_position” onchange=”javascript:displaySize(this.value);”>
<option value=”>Select the position</option>
<option value=’header’  >Header</option>
<option value=’footer’ >Footer</option>
<option value=’sidebar’  >Sidebar</option>
</select>
</td>
</tr>
<tr>
<td>Upload image</td>
<td>
<input type=”file” name=”image” />(Size should be <span id=”dimension”></span>)
</td>
</tr>
</table>

 

Create page “ajax-page.php” and paste the below given code

<?php
switch($_REQUEST[‘sVal’]){
case “header”:echo “780 x 100”;break;
case “footer”:echo “180 x 300”;break;
case “sidebar”:echo “180 x 200”;break;
default:echo “880 x 200”;break;
}
?>

Leave a Reply

Your email address will not be published. Required fields are marked *