Hello !
J'ai finalement décidé de m'y mettre sérieusement et d'écrire ma propre librairie AJAX pour PHP. Je ne pensais pas y arriver en une seule soirée (il et 21h40 et je m'y suis mis vers 18h, avec une coupure repas de une demi heure), mais en fait si.
Ça fonctionne bien, évidemment ça ne fait que les choses basiques, mais ça les fait bien
.
Pour l'instant je vous post ça là, puis plus tard (ce week-end je pense), je rédife une doc en français et anglais (j'aurais besoin d'aide pour l'anglais un petit peu
) puis je fais un site un peu bien et hop ! (c'est open source of course)
Il y a un dossier pAjax (p4bl0's Ajax) qui contient 4 fichiers tout petit et léger :
- pAjax.js -> le javascript nécessaire (50 lignes de code, 1.3Ko)
- pAjax.inc.php -> la librairie PHP avec une seule fonctions simple qui génère le javascript nécessaire (30 lignes de code, 1.2Ko)
- pAjax.php -> le fichier qui est appelé via ajax (15 lignes de code, 0.5Ko)
- pAjax_functions.inc.php -> le fichier par défaut dans lequel les fonctions vont être appeler, c'est modifiable facilement, je vous explique ça plus bas. (vide)
comme vous pouvez le voir, même si il n'y a pas énormément de fonctionnalités (c'est déjà bien suffisant) pAjax est vraiment très peu lourd à charger et ne ralentira pas le chargement d'une page contrairement à certaine librairie bien plus volumineuse !
Alors
comment ça marche ?
Dans le fichier dans lequel vous voulez utiliser pAjax, disons index.php, vous faite ceci :
Bloc de code:
<?php include('chemin/vers/pAjax/pAjax.inc.php'); ?>
Ensuite vous créez une variable type tableau (array) en PHP qui contient la liste des fonctions dont vous aurez besoin comme clef, et les arguments de ses fonctions en valeur. par exemple
Bloc de code:
$my_functions = array(
'afficher_article' => 'article_id',
'calcul' => 'nombre1, nombre2, operateur',
'diaporama' => 'nouvelle_image, image_suivante'
);
Ensuite dans la partie <head> de votre page vous générez le javascript nécessaire, la fonction prend 3 arguments :
- le premier obligatoire est la liste des fonctions ($my_functions dans notre cas).
- le second et le chemin vers le fichier qui contient ces fonctions (et uniquement ces fonctions, pas d'affichage !!), si il n'est pas précisé alors le fichier par défaut (pAjax_functions.inc.php) est utilisé. Ce fichier peut aussi être un fichier avec des include pour tout vos fichier ou il y a des fonctions
Pour le moment au moins, il faut préciser ce fichier en fonctions de l'endroit où est pAjax.inc.php.
- le troisième argument est le chemin vers le dossier pAjax (par défaut la fonction considère que le dossier et au même niveau que la page qui l'appelle).
Donc on a par exemple :
Bloc de code:
<?php echo pAjax_gen_js($my_functions, '../includes/functions.inc.php'); ?>
Et c'est bon ! Votre pouvez utiliser ajax sur votre page !!
Ensuite par exemple la fonction afficher_article s'appelle via pAjax via la fonction pAjax_afficher_article().
Toutes les fonctions javascript pAjax_* prennent deux arguments, puis ceux qui sont précisés dans l'array $my_functions. Ces deux arguments sont :
- element_id qui est l'id de l'élément qui va être modifié par la fonction
- element_attr est l'attribut de l'élément que l'on va modifier (innerHTML, value, src...).
Donc par exemple la fonction pAjax_afficher_article(element_id, element_attr, article_id);
Pourrait être utilisé comme ça :
Bloc de code:
<form action="index.php" method="post" onsubmit="return false;" accept-charset="utf-8">
<p>
<selec name="select_article" id="select_article">
<option value="1">Titre de l'article 1</option>
<option value="2">Titre de l'article 2</option>
<option value="3">Titre de l'article 3</option>
<option value="4">Titre de l'article 4</option>
</select>
<input type="button" value="Afficher l'article" onclick="pAjax_afficher_article('article_div', 'innerHTML', this.form.select_article.value);" />
</p>
</form>
<div id="article_div" style="padding:5px; margin:10px; border:1px solid #aaa;">
<em>Sélectionnez un article puis cliquez sur le bouton "Afficher l'article". Il apparaîtra ici, c'est ça la magie d'ajax : pas besoin de recharger toute la page !</em>
</div>
Après il suffit que la fonction PHP afficher_article interroge une base de données MySQL et en fonction du article_id qui lui ai donné retourne le html d'affichage de l'article.
Par exemple
Bloc de code:
<?php
function afficher_article ($id) {
if ($conn = @mysql_connect(...)) {
mysql_select_db(...);
$article = mysql_fetch_array(mysql_query("SELECT * FROM `articles` WHERE `id`='".$id."';"));
mysql_close($conn);
$retour = '<h2>'.$article['title'].'</h2>';
$retour .= '<p class="article">'.$article['content'].'</p>';
$retour .= '<p class="info_article">Posté le : '.date('d/m/Y',$article['date']).' par '.$article['author'].'</p>';
return $retour;
} else {
return '<span class="error_sql">Une erreur est survenue lors de la tentative de connexion à la base de données.</span>';
}
?>
:zen:
Je ne sais pas si ça servira à qui que ce soit mais je suis content de moi et je me suis bien amuser à faire ce truc, que je continuerai d'améliorer
Dès que c'est un peu plus pratique (par exemple pour le moment il faut mettre le chemin du fichier qui contient les fonctions en fonctions de l'emplacement de pAjax.inc.php, ce qui n'est pas très joli), je l'utiliserais en lieu et place d'xajax sur mon site
