Ajax et PHP, démonstration
Le langage PHP et la technologie Ajax sont combinés par les webmasters pour réaliser des applications Web aussi complètes que les applications locales.
Ajax permet de créer une interface fonctionnant sur un navigateur, avec le langage JavaScript, devenu extrêmement rapide sur les dernières versions des navigateurs.
PHP fonctionne sur le serveur et quand à lui consulte une base de donnée et la met en jour avec les données entrées par l'interface, et il exécute les traitements demandés par l'utilisateur qui requièrent des données stockées sur le serveur.
Comment opère l'interaction entre l'interface en Ajax et les scripts en PHP sur le serveur?
Le tutoriel Ajax fournit les bases, notamment avec le démonstration de POST ou l'on envoie des données à un script PHP qui les écrit dans un fichier sur le serveur. Le code Ajax est très simple.
Interaction entre Ajax et PHP avec GET
Il n'y a pas de différence avec le code Ajax pour charger un fichier, sauf que le nom du fichier est un script avec l'extension PHP et non plus un simple fichier de texte.
Et dans ce cas, la variable responseText ne sera pas assignée avec le contenu du fichier, mais avec ce que le script PHP affiche.
Par exemple, si le script contient la commande:
<?php
echo "Hello!";
?>responseText contiendra Hello!
Le script JavaScript sera donc:
function createInstance()
{
var req = null;
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("XHR not created");
}
}
}
return req;
}
function submitForm()
{
var req = createInstance();
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
document.ajax.dyn.value="Received:" + req.responseText;
}
else
{
document.ajax.dyn.value="Error: returned status code " + req.status + " " + req.statusText;
}
}
};
req.open("GET", "ajax-get.php", true);
req.send(null);
} Démo de la commande Ajax GET pour un script PHP
Cette page utilise Ajax pour lancer le script ajax-get.php.
Ce que le script affiche sera alors assigné à responseText, qui sera affiché ci-dessous.
Il n'y a pas de différence avec l'emploi de GET pour charger un fichier de texte, seul le nom du fichier diffère!
L'affichage du script PHP sera inséré ici
Ajax et PHP avec POST
On crée une chaîne à partir des données:
var data = "var1=" + value1 + "&var2=" + value2;
Et on les envoie au serveur avec l'objet XMLHttpRequest:
xhr.open("POST", "script.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);Les données provenant d'un formulaire de l'interface HTML, sont envoyées au serveur par la méthode send() de l'objet XMLHttpRequest, et un programme PHP, nommé par exemple script.php, les reçoit en paramètres et effectue le traitement pour lequel il est programmé.
Le code PHP peut ressembler a ceci:
$myarray = &$_POST ;
$var1=$myarray["var1"];
$var2=$myarray["var2"];
... traitement...Les valeurs value1 et value2 envoyées par l'interface JavaScript sont assignées aux variables PHP $var1 et $var2.
On peut aller plus loin en voyant comment ces données sont stockées dans une base de donnée...
Démonstration de POST et PHP
Utiliser un script PHP avec un paramètre envoyé par une page Web. Dans l'exemple, le paramètre est une URL et le script teste si cette URL est un lien valide.
Le code Javascript qui lance le script et lui fournit le paramètre:
function storing(data)
{
var element = document.getElementById('storage');
element.innerHTML = data;
}
function submitForm(element)
{
var req = createInstance();
var url = document.ajax.url.value;
var data = "url=" + url;
req.onreadystatechange = function()
{
if(req.readyState == 4)
{
if(req.status == 200)
{
storing(req.responseText);
}
else
{
alert("Error: returned status code " + req.status + " " + req.statusText);
}
}
};
req.open("POST", "pingurl.php", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(data);
Le script pingurl.php reçoit l'URL assignée à la variable url.
Démonstration de ping d'une page Web par Ajax
On utilise Ajax pour exécuter sur le serveur le script pingurl.php avec en paramètre l'URL d'une page Web.
Le script vérifie que l'URL est un lien valide.
La commande POST permet de passer des paramètres au script PHP.
La réponse du script sera assignée à responseText, qui sera affiché ci-dessous.
Interaction avec une base de données SQL
On imagine une table, nommée mytable, dotée des colonnes nommées var1 et var2.
var1 |
var2 |
PHP dispose des fonctions nécessaires pour lire et écrire dans une table SQL, et cela en fait n'a aucune dépendance avec la partie Ajax.
$base = mysql_connect($HOST, $USER, $PWD);
mysql_select_db($name, $base);
$query = "INSERT INTO mytable(var1, var2) VALUES ('$var1', '$var2'')";
mysql_query($query, $base);Les données issues d'un formulaire HTML et transférée au script PHP sont insérées dans une base de données SQL en quelques lignes...
Conclusion
Ajax fournit à PHP, langage de scripts, fonctionnant de façon privilégiée sur un serveur, ce qui lui manque: une interface graphique permettant à l'utilisateur d'interagir avec une application en ligne de façon fluide avec une réactivité immédiate.