Difference between revisions of "6CS028 Workshop - Ajax"
From mi-linux
Jump to navigationJump to search| Line 22: | Line 22: | ||
<HEAD> | <HEAD> | ||
<TITLE>Test Ajax</TITLE> | <TITLE>Test Ajax</TITLE> | ||
| + | <SCRIPT type="text/javascript" src="prototype.js"></SCRIPT> | ||
<SCRIPT type="text/javascript" src="ajax.js"></SCRIPT> | <SCRIPT type="text/javascript" src="ajax.js"></SCRIPT> | ||
</HEAD> | </HEAD> | ||
<BODY> | <BODY> | ||
| − | Check name: <INPUT type="text" id="a_name" | + | Check name: |
| + | <INPUT type="text" id="a_name"> | ||
| + | <INPUT type="button" value="Check name" onclick="send_request();"> | ||
<DIV id="div_result"></DIV> | <DIV id="div_result"></DIV> | ||
</BODY> | </BODY> | ||
Revision as of 16:49, 13 July 2011
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>
Check name:
<INPUT type="text" id="a_name">
<INPUT type="button" value="Check name" onclick="send_request();">
<DIV id="div_result"></DIV>
</BODY>
</HTML>
There are 2 important elements in our body:
- The text box that is going to trigger the JavaScript event. As you can see the onBlur event (which is triggered when you tab out of the text box) calls a send_request function, which is located in a separate file (see next step!)
- The div element, in which the response will be displayed
Step 2 – Create the client-side script (JavaScript)
This file implements the client-side part of our Ajax transaction. It looks a bit complicated at first, but let’s break it down into its 3 main parts:
- The initliveSearchReq() function creates the XMLHttpRequest object, which is the object we need to send the HTTP request to the server. As you can see this function is a bit messy, as this object is created differently depending on the browser. It seems to work on all browsers this way, but you might know simpler, tidier way?
- The send_request() function is the one called by the JavaScrtipt event (see step 1). It creates the XMLHttpRequest object (by calling the function above), specifies which function should be run when the response comes back (DisplayResult in our case), and finally sends the request to the server. Note how it passes the text typed by the user as a parameter in the URL.
- The DisplayResult() function is called when the response comes back from the server. As you can see it simply inserts the response text in our div_result element.
// ajax.js
var liveSearchReq = false;
var name = "";
var isIE = false;
// on !IE we only have to initialize it once
if (window.XMLHttpRequest)
{
liveSearchReq = new XMLHttpRequest();
}
// +----------------------------------------------------------------------+
// | Init HTTP object
// +----------------------------------------------------------------------+
function initliveSearchReq()
{
if(window.XMLHttpRequest)
{
// Firefox et autres
liveSearchReq = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
// Internet Explorer
try
{
liveSearchReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
liveSearchReq = new ActiveXObject("Microsoft.XMLHTTP");
}
}
}
// +----------------------------------------------------------------------+
// | Send request
// +----------------------------------------------------------------------+
function send_request(t)
{
// Get user input
name = t.value;
if(name!="")
{
// Create HTTP object
initliveSearchReq();
// Set function to handle response
liveSearchReq.onreadystatechange= DisplayResult;
// Send request
liveSearchReq.open("GET", "ajax.php?name=" + name);
// Finish transaction
liveSearchReq.send(null);
}
else
{
var sh = document.getElementById("div_result");
sh.innerHTML = "Please enter value";
}
}
// +----------------------------------------------------------------------+
// | Handle response
// +----------------------------------------------------------------------+
function DisplayResult()
{
if (liveSearchReq.readyState == 4)
{
var sh = document.getElementById("div_result");
sh.innerHTML = liveSearchReq.responseText;
}
}
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…
