There are many ways to make a website dynamic and provide a good level of interactivity. AJAX is one of the most common and effective methods. Using AJAX to enhance a website is easily achieved, even with little programming knowledge. AJAX uses JavaScript functions within a page to request further information from the server, updating a part of the web page without having to refresh it as a whole.
A great many of the most influential Web applications in recent years have used AJAX, which is not actually a technology in itself, but a way of combining technologies. The technologies involved are HTML and JavaScript on the client-side, and a server-side language such as PHP or ASP.
Instructions
Difficulty:
Step 1
Create an HTML page and set it up for an AJAX function. Use this structure:
<html>
<head>
</head>
<body>
<form action="">
<input type="button" value="button" onclick="getData()" />
</form>
<div id="myelement">
Some text...
</div>
</body>
</html>
Ultimately you will place your file on a Web server, but for the moment simply save it with .html extension. Pressing the button is what will call the AJAX function, according to the website W3Schools.
Step 2
Add in the JavaScript to send the request to the server. Create a JavaScript file and enter the following code:
var xmlHttp;
function getData()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null) return;
//example php script
var url="get_data.php";
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function GetXmlHttpObject()
{
var objXMLHttp=null;
if (window.XMLHttpRequest)
{ objXMLHttp=new XMLHttpRequest(); }
else if (window.ActiveXObject)
{ objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP"); }
return objXMLHttp;
}
More code will be necessary to handle the response, but for now save the file with .js extension. The method will be called from the page when the button is pressed. The example uses a PHP script, but other server-side languages may be used, notes the website AJAX MATTERS.
Step 3
Create a server-side program to respond to the AJAX request. Use this code to begin with:
<?php
echo "Response!!!";
?>
Save the file with .php extension, naming it "get_data.php" for this example. There are other server-side languages you can use, this is just a simplistic example for demonstration. The server-side script will typically query a database and return a value from there. Depending on your database and site, you may pass a value to the PHP script to feed into the query and return relevant results. You can format the output response in HTML if you wish.
Step 4
Extend the JavaScript to handle the AJAX response. Add another function to your JavaScript file immediately after the "getData" function and before the "GetXmlHttpObject" one:
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ document.getElementById("myelement").innerHTML=xmlHttp.responseText; }
}
This function determines what will happen when a response is received from the "get_data" script running on the server. In this case, the code simply uses JavaScript to get the "myelement" Div and changes the content of it to reflect the server response, notes Google Code University.
Step 5
Bring all of the elements together and test your AJAX function. Add the script reference to your JavaScript file in the <head> section of your HTML file, changing the file name to suit the name you chose:
<head>
<script type='text/javascript' src='myscript.js'></script>
</head>
Upload your HTML, PHP (or other server-side script) and JavaScript files to your Web server. Browse to the page in a Web browser and test the function by pressing the button. You can easily extend the code to include querying and updating a database if you wish.
Common uses for such technology are website polls and capturing user input in a way that provides an instant response, according to the website AJAX F1.