Difference between revisions of "6CS028 Workshop - Ajax"
From mi-linux
Jump to navigationJump to search| Line 1: | Line 1: | ||
[[Main Page]] >> [[CP3207|Web Application Development]] >> [[Web Application Developpment - Workbook|Workbook]] >> Week 05 | [[Main Page]] >> [[CP3207|Web Application Development]] >> [[Web Application Developpment - Workbook|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) | ||
| + | |||
| + | Let’s get started! | ||
| + | |||
| + | == Step 1 – Create the web page == | ||
| + | |||
| + | First we obviously need to create our web page. Let’s keep it nice and simple: | ||
<pre> | <pre> | ||
| Line 16: | Line 26: | ||
</pre> | </pre> | ||
| − | The | + | 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. | ||
<pre> | <pre> | ||
| Line 94: | Line 114: | ||
</pre> | </pre> | ||
| − | + | == 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). | ||
<pre> | <pre> | ||
| Line 116: | Line 138: | ||
?> | ?> | ||
</pre> | </pre> | ||
| + | |||
| + | == All done == | ||
| + | |||
| + | Your live search should now work… | ||
Revision as of 13:25, 28 July 2009
Main Page >> Web Application Development >> 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)
Let’s get started!
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="ajax.js"></SCRIPT>
</HEAD>
<BODY>
Check name: <INPUT type="text" id="a_name" onblur="send_request(this);">
<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 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…
