The Javascript
The necessary javascript is available CSE_ajax.js.
It is implemented as an object,
The php script
The server-side is separated in two parts. First a general php script that you can download CSE_ajax.php.
This script recieves the call, check its validity (no call of functions or files without
The address of this script MUST be given within your html file in the variable
Secondly, your custom php file that contains your custom function. As an example,let's make a very simple suggestion box.
Let's make a file
You can see the working example here.
The necessary javascript is available CSE_ajax.js.
It is implemented as an object,
CSE_ajax
, with the following functions:CSE_ajax.run()
which does the whole AJAX procedure,CSE_ajax.getProperty()
which reads the property of an object on your page (an input field, a text field, anything),- All the other functions are used internally and need not be called from your code.
CSE_ajax.getProperty()
when you want to read the value of a field on your page, and then utilize this (these) value(s) using CSE_ajax.run()
anytime you need a connection with your server.CSE_ajax.getProperty(id, propertyName)
has the following parameters: id=unique ID of the object; propertyName=name of the property to read. It returns the value. For example, if I have an <input type=text id=txt1>, I can read what the user typed in usingCSE_ajax.getProperty('txt1', 'value')
.CSE_ajax.run(file, command, params, target, CSE_ajax_debug)
:- file = name of the php file able to answer ajax requests. The file name MUST begin with "ajax_", and reside in the same folder as the general php script (see below) - these limitations are for your safety, you don't want webusers to be able to launch any php script on your server.
- command = which php function within the file should handle the call. The function name MUST begin with "ajax_" for safety.
- params = parameters to send, usually obtained with CSE_ajax.getProperty(). To send several parameters, you must concatenate them in one string and separate them with <|>. Your php-function will recieve them as an array.
- target = what should be done with the answer-string from the server. It must contain the ID of an item on the page and a property name, concatenated and separated with <:>. For instance
'txt1<:>value'
, in which case the input field would have its content replaced by the value returned by the php function. You are allowed not to have any target (server side recieve the request but return value is unused). You are allowed to have multiple targets, as your php file will receive the targets as a string (it is then responsible to see there are several of them and to accordingly format the return string); several targets should be separated by <|>. - CSE_ajax_debug = boolean (true/false) that displays the messages sent and recieved. Useful for development, to be set to false (default) for normal application.
- A way to create an event that lauches the request,
- The javascript to react at the event and send the request,
- A server side program to handle the request and send the answer,
- A javascript to interpret the answer and,
- An element on the page that will display the answer.
<input type=button name='click' onclick="CSE_ajax.run('http://www.cavin.name/CSE/ajax/ajax_mPHPFile.php', 'ajax_myFunction', ''+CSE_ajax.getProperty('text1', 'value')+'', 'text2<:>value',1)">
<input type=text id=text1 value='parameters that user can type in'>
<input type=text id=text2 value='here will be answer'>
The php script
The server-side is separated in two parts. First a general php script that you can download CSE_ajax.php.
This script recieves the call, check its validity (no call of functions or files without
ajax_
at the beginning, for instance), creates the array of parameters, and call the appropriate function. Finally, it sends the header and the response.
The address of this script MUST be given within your html file in the variable
CSE_ajax_script
. I suggest including in your header the following line:<script type='text/javascript'>var CSE_ajax_script = "http://www.cavin.name/CSE/ajax/CSE_ajax.php";</script>
Secondly, your custom php file that contains your custom function. As an example,let's make a very simple suggestion box.
Let's make a file
ajax_reply.php
containing the function ajax_suggest()
and place it in the same folder as CSE_ajax.php
:
<?php
function ajax_suggest($params, $target) {
$search_key = $params[0]; // always an array.
// this would probably a database call in a normal application, using SQL search function.
// but for here without database backend:
$mtch = "";
$mylist = array("Albert", "Abdul", "Bastien", "Charlene", "Christian", "Laurent", "Laurence", "Lorenzo", "Leonie");
$ignore = sort($mylist);
for ($i=0; $i<count($mylist);$i++) {
if (stripos("£".$mylist[$i],"£".$search_key)!==false) {
// £ is to force match at the begining of the word.
$mtch .= ",".$mylist[$i];
}
}
if (strlen($mtch)==0) {
$mtch = "No Match";
} else {
$mtch = substr($mtch,1,strlen($mtch)-1);
if (strlen($mtch)>25) {
$mtch = substr($mtch,0,22)."...";
}
}
// Now we have what we want in the $mtch variable, let's format the result:
return $target."<:>".$mtch."<:>";
// We could modify other properties of the page by appending further strings like
// return $target."<:>".$mtch."<:><|>text3<:>value<:>String to put in<:>";
}
?>
You can see the working example here.