Search
in english whole site
»
Home·Programming·AJAX·AJAX Implementationdeutsch·english·français
UserEnlargeHigherLower
StatisticsMinimizeHigherLower
» Hits: 97608  (details)
» Distinct visits: 10438 (1 Hit/visit)
» Bots visits: 86969 (Hits: 89.1%)
» Your hits in this session: 1
Contact & CommentsMinimizeHigherLower
» Visitor's comments
» Contact
AJAX Implementation
The Javascript

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.
The usage will therefore be to call 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 using CSE_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.
With this javascript object, and the appropriate html elements, many of the elements required for AJAX implementation are covered:
  1. A way to create an event that lauches the request,
  2. The javascript to react at the event and send the request,
  3. A server side program to handle the request and send the answer,
  4. A javascript to interpret the answer and,
  5. An element on the page that will display the answer.
As any event that javascript can listen can be used as trigger - keydown, keyup, button or link onclick, and so on, you must select what will launch the event, and give it as action the AJAX javascript. For instance, with a button:
<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.
Made with CSE_CMS, © CSE, 2008-2021