At some point of time, you will realize that you need a fully customizable ajax code, which you can understand very easily and do whatever you want.
Here is a very simple "working" example written in HTML, JavaScript and PHP.
In this example we will take a number as input and return corresponding string.
So first create an html file as index.html –
########### HTML code Start ###########
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Very Simple Ajax</title>
<script type="text/javascript" src="simple_ajax.js"></script>
</head>
<body>
<form name='form1'>
Type a number 0-9
<input type="text" name="num" value="">
<input type="button" name="btn" value="Get String" onClick="get_string(document.form1.num.value)">
</form>
</body>
</html>
########### HTML code Ends ###########
There are 3 important lines in this HTML file.
- First is <script type="text/javascript" src="simple_ajax.js"></script>. Here I am including the javascript file with ajax and other functions.
- Second is the line <input type="text" name="num" value="">, here I will be taking the input and result string will be displayed in the same box.
- And third is <input type="button" name="btn" value="Get String" onClick="get_string(document.form1.num.value)">, this button will call a javascript function written in the simple_ajax.js file to fetch the string value.
After HTML you need javascript file with get_string and other ajax functions. So you have to create a simple_ajax.js file. Be careful if you want to store this file somewhere else then you needs to set correct path of javascript file. Here is simple_ajax.js file content –
########### JavaScript code Start ###########
function get_string(numeric_value)
{
var scriptpath = "./ajx.js.php?num="+numeric_value; // you can change the path of script to actual path and add more parameters are per your requirements.
retu = loadScript(scriptpath); // simply call the method and get the return value form the server side script.
document.form1.num.value = retu;
}
function loadScript(scriptpath)
{
var oXML = getXMLHttpObj();
textout = "no reply";
oXML.open("GET", scriptpath, false);
oXML.send(null);
if(oXML.readyState == 4 && oXML.status == 200)
{
textout = oXML.responseText;
}
else
{
textout = 'error';
//alert(oXML.statusText);
}
return (textout);
}
function getXMLHttpObj()
{
if(typeof(XMLHttpRequest)!='undefined')
return new XMLHttpRequest();
var axO=['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.4.0',
'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'], i;
for(i=0;i<axO.length;i++)
try{
return new ActiveXObject(axO[i]);
}catch(e){}
return null;
}
########### JavaScript code Ends ###########
As you can see there are 3 functions written in this file, but for you the first one is the only one which you have to consider. There are 3 lines written in the function
- First is the var scriptpath = "./ajx.js.php?num="+numeric_value; . Here we have defined the server side script, which will be called with parameters set with it. You can add, delete more parameters as per your requirement. You just need to be careful that you are passing those variables properly to the function.
- Second line is JavaScript function is retu = loadScript(scriptpath); . This is simply triggering the created URL through JavaScript functions.
- Finally in third line we are setting up the value stored in retu variable.
Finally you need a server side script for you database related queries and other stuff. Here is a piece of PHP code written, this can be Java, ASP or any other server side script, as you just need to echo the value to display at the end. In our javascript code we have used the file name ajx.js.php and the content is -
<?php
//you can create a database connection and do whatever you want on the server
$num_arr = array(
0=>"Zero",
1=>"One",
2=>"Two",
3=>"Three",
4=>"Four",
5=>"Five",
6=>"Six",
7=>"Seven",
8=>"Eight",
9=>"Nine"
);
// you simply need to echo the output as string at the end :)
echo $num_arr[$_GET['num']];
?>
Trust me if you create 3 file in same folder and using the same name the code will run in first try. :)
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment