6CS028 Workshop - Ajax
Main Page >> Advanced Web Technologies >> Workbook >> Week 05
Today we are going to use Ajax to create a simple Live Search. There are 3 simple steps:
- Step 1 – Create the web page
- Step 2 – Create the client-side script (JavaScript)
- Step 3 – Create the server-side script (PHP)
Prototype JavaScript Framework
Let’s use the Prototype JavaScript Framework so we don't have to type too much JavaScript code :)
- Download the Prototype JavaScript Framework
- Upload it to your mi-linux account (in the same folder as your web pages)
- Don't forget to set its permissions to "readable" and "writeable" by all.
Step 1 – Create the web page
First we obviously need to create our web page. Let’s keep it nice and simple:
<HTML>
<HEAD>
<TITLE>Test Ajax</TITLE>
<SCRIPT type="text/javascript" src="prototype.js"></SCRIPT>
<SCRIPT type="text/javascript" src="ajax.js"></SCRIPT>
</HEAD>
<BODY>
<INPUT type="text" id="a_name">
<INPUT type="button" value="Check name" onclick="send_request();">
<DIV id="div_result"></DIV>
</BODY>
</HTML>
In our head section:
- A link to the Prototype JavaScript Framework (see previous section)
- A link to our Ajax JavaScript code
On the page itself:
- A simple text box
- A button that will trigger the Ajax code (located in the file below)
- A "div_result" element, in which the Ajax response will be displayed
Step 2 – Create the client-side script (JavaScript)
This file implements the client-side part of our Ajax transaction:
- It reads the name typed in the text box
- Checks that it is not blank
- Creates an Ajax object (this will only work if you have downloaded the Prototype library)
- Creates a Request, passing in our "Name" parameter, and defining what should happen when the response comes back:
// ajax.js
function send_request()
{
// Get user input
name = document.getElementById("a_name").value;
// Check if name was provided
if(name!="")
{
// Create and execute Ajax request
new Ajax.Request('ajax.php',
{
method:'get',
parameters: {name: name},
// What should happen when the response comes back
onSuccess: function(transport){
var response = transport.responseText || "no response text";
document.getElementById("div_result").innerHTML = response;
},
// What should happen if the request fails
onFailure: function(){ alert('Something went wrong...') }
});
}
else
{
var sh = document.getElementById("div_result");
sh.innerHTML = "Please enter value";
}
}
Step 3 – Create the server-side script (PHP)
Now all we need is the server-side part of our Ajax transaction. It’s a simple PHP file that reads the parameters passed in the URL, and then queries the database. I will let you implement the database access… this example features a “fake” database check (a simple if statement).
<?
// ajax.php
// Get value coming from request
$name = $_GET['name'];
// Connect to DB
// Check if name exists in table
if($name=="Alix")
echo("This name is in the database");
else
echo("This name is NOT in the database :(");
//Close connection
?>
All done
Your live search should now work…
