Flux RssPHP on the fly : une page dynamique en php
PHP peut être utilisé pour différentes applications, c'est l'un des plus puissant langage de script disponible sur le web. Ce qui lui manque, et qui vas être solutionné dans cet article, c'est la possibilité de mettre a jours les pages en temps réel, sans avoir à recharger la page ou envoyer un formulaire.
PHP on the fly ( PHP a la volée grâce à AJAX )
Cet article est entièrement inspiré de celui publié en anglais par Dennis Pallett ( http://www.webpronews.com/authors/dennispallett.html ).
PHP peut être utilisé pour différentes applications, c'est l'un des plus puissant langage de script disponible sur le web. Ce qui lui manque, et qui vas être solutionné dans cet article, c'est la possibilité de mettre a jours les pages en temps réel, sans avoir à recharger la page ou à envoyer un formulaire.
L'Internet n'est pas fais pour ça. Les navigateurs web ferment la connexion avec le serveur des qu'ils ont fini de recevoir toutes les données. C'est pourquoi aucune donnée ne peut être modifié après. Que faire si vous voulez quand même mettre a jours si vous construisez une application php ( ex: Un système de gestion de haute qualité ), qui est l'idéal si vous voulez faire une application native pour Windows / Linux.
Mais cela nécessite une mise a jours en temps réel. Ce n'est pas possible ou vous n'y croyez pas? Un bon exemple pour une application qui travail en temps réel est Gmail de google ( http://gmail.google.com ). Tous est géré par le JavaScript, il est très puissant et dynamique. C'est l'un des point fort de Gmail. Comment faire pour l'utiliser sur vos sites web ? Je vais vous le montrer dans cet article.
Comment ça marche ?
Si vous voulez exécuter un script PHP, vous avez besoin de recharger la page, envoyer un formulaire, ou quelque que chose d'équivalent. Tous simplement, une nouvelle connexion avec le serveur doit être ouverte et le navigateur vas charger la nouvelle page, en effaçant l'ancienne. Depuis un certain temps, les développeur web, on utilisais une astuce qui consistait a contourner ce rechargement complet, ils utilisaient une iframe de 1x1 px, qui ouvrait une nouvelle page php, mais c'est loin d'être idéal.
Maintenant, Il y a une nouvelle solution dans l'exécution des script php sans recharger la page. Le moteur de cette nouvelle solution est le composant JavaScript appelé XMLHttpRequest. Lisez http://jibbering.com/2002/4/httprequest.html pour plus d'information sur ce composant. Il est supporté par les principaux navigateurs ( Internet Explorer 5.5+, Safari, Mozilla/firefox 1.0 et Opera 7.6+ ).
Avec cet objet et une personnalisation des fonctions JavaScript, vous pouvez créer une application PHP . Regardez ce premier exemple, avez une mise a jour dynamique de la date et de l'heure.
Exemple 1
Copiez ce code dans un fichier sous le nom de 'script.js'
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >=5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
function loadFragmentInToElement(fragment_url, element_id) {
var element = document.getElementById(element_id);
element.innerHTML = 'Loading ...';
xmlhttp.open("GET", fragment_url);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
element.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
Maintenant copiez ce code dans un fichier appelé 'server1.php' :
<?php
echo date("l dS of F Y h:i:s A");
?>
Et pour terminer copier ce code dans un fichier appelé 'client1.php' éditez la ligne 'http://www.yourdomain.com/server1.php' avec l'emplacement exact de votre fichier server1.php sur votre serveur.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<title>Example 1</title>
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript">
function updatedate() {
loadFragmentInToElement('http://www.yourdomain.com/server1.php', 'currentdate');
}
</script/>
</head/>
<body>
The current date is <span id="currentdate"><?php echo date("l dS of F Y h:i:s A"); ?></span>. <br /> <br />
<input type="button" value="Update date" OnClick="updatedate();" />
</body>
</html>
Maintenant allez sur votre adresse 'http://www.votreserveur/client1.php' et cliquez sur le bouton 'Update date'**. La date vas être mise a jours sans que la page soit rechargéé. Tous cela est réalisé avec le XML HTTP Request Object. Cet exemple peut être vu sur http://www.phpit.net/demo/php%20on%20the%20fly/client1.php .
exemple 2
Nous allons maintenant essayer un exemple plus avancé, dans cet exemple , les visiteurs peuvent entrer deux nombres, et ils seront additionné par PHP ( et non JavaScript ). Cet exemple montre le vrai pouvoir du XMLHttpRequest.
<?php
// Get numbers
$num1 = intval($_GET['num1']);
$num2 = intval($_GET['num2']);
// Return answer
echo ($num1 + $num2);
?>
Copiez ce code dans un fichier appelé 'client2.php' Editez la ligne 'http://www.yourdomain.com/server2.php' avec la bonne adresse de votre serveur.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<title>Example 2</title>
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript">
function calc() {
num1 = document.getElementById ('num1').value;
num2 = document.getElementById ('num2').value;
var element = document.getElementById('answer');
xmlhttp.open("GET", 'http://www.yourdomain.com/server2.php?num1=' + num1 + '&num2=' + num2);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
element.value = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
</script>
</head>
<body>
Utilisez ce formulaire pour additionnez deux nombres. Cette réponse est calculée par un script PHP et <em> non </em> par JavaScript. Quel avantage a ceci ? vous pouvez utiliser le coté scripts serveur ( PHP ) sans avoir a recharger la page. <br /><br />
<input type="text" id="num1" size="3" /> + <input type="text" id="num2" size="3"> / = <input type="text" id="answer" size="5" />
<input type="button" value="Calculate!" OnClick="calc();" />
</body>
</html>
Quand vous lancez cet exemple , vous pouvez additionner deux nombres en utilisant PHP et sans recharger toute la page. si vous voulez voir cet exemple en fonctionnement, regardez sur http://www.phpit.net/demo/php%20on%20the%20fly/client3.php pour le voir sur internet.
et les défaut ?
Il y a seulement deux défauts pour ce système. Premièrement, quelqu'un qui aurait coupé l'exécution du JavaScript , ou les navigateurs qui ne supportent pas le XMLHttpRequest ne pourront pas le faire fonctionner. Vous devez etre sur que vos clients utilisent le JavaScript.
Un autre défaut viens dans favoris, Les gens ne seront pas en mesure de mettre la page dans leurs favoris, si il y a du contenu dynamique dedans, seulement la première page sera prise en compte. Mais si vous utilisez une application PHP dynamique ( et non pas un site web ) Il ne sera surement pas nécessaire de mettre dans les favoris.
conclusion
Je viens de vous montrer deux exemples très simple, il est entièrement possible d'exécuter des applications en scripts php, sans avoir a recharger entièrement la page. Je vous conseil de lire un peu plus sur XML HTTP Request Object ( http://jibbering.com/2002/4/httprequest.html ) et de ses possibilités.
Ces possibilités sont ilmité. Par exemple, vous pouvez créer un systeme de page ordonées, qui ne nécessite pas le rechargement complet. Ou vous pouvez créer une GUI pour votre application PHP, qui fonctionnera exactement comme l'interface de Windows XP.
Faites attention a ce que le JavaScript soit bien activé pour qu'il fonctionne. Sans JavaScript d'activé il ne se passera strictement rien. Soyez sur que vos visiteurs acceptent le JavaScript ou créez une version pour les utilisateur sans JavaScript.
