Ajax avec Rialto et PHP
AJAX avec RIALTO et PHP
version 0.1
Par : GHANEM Lhoussin
INTRODUCTION
I - RIALTO
II - AJAX
III- EXEMPLE
CONCLUSION
----------------------------------------------------------------------------------------
INTRODUCTION
Ça fait longtemps que j'ai voulu apprendre AJAX pour me permettre
de beaucoup m'amuser à créer des pages web qui reste chez leurs clients
en se connectant de temps en temps à leur serveur, mais à chaque fois
que je commence à suivre un tutoriel je me trouve forcé à l'abandonner
pour des différentes raisons.
En cherchant à utiliser
facilement AJAX je suis arrivé à un tutoriel qui me conseillait
d'utiliser le framework prototype. plus tard je découvre RIALTO.
RIALTO
pour Rich Internet Application Toolkit est un framework développé en
Javascript pour gérer les applications destinées aux clients lourds.
RIALTO propose un ensemble des objets de bon look qu'on peut personnaliser.
Enfin pour savoir nos droits et nos devoirs Rialto est distribué
sous licence Apache et est soutenu par Cyril Balit (Improve) et
François Lion (IGR).
Visitez le site professionnel de RIALTO
http://rialto.improve-technologies.com
I- RIALTO
Dans cette partie on va découvrir RIALTO, comment fonctionne-t-il?
Pour commencer :
● Télécharger le framework RIALTO ici :
○ http://rialto.improve-technologies.com/wiki/rialto/download/
● Créer un dossier rialtoTuto dans la racine de votre serveur
(/var/www/rialtoTuto) ou (/opt/lampp/htdocs/rialtoTuto) ou encore (c:wampwww ialtoTuto)
● décompresser le fichier zip téléchargé dans ce dossier
● Vous devez avoir le dossier comme suit :
○ chemin/vers/racine/rialtoTuto/rialtoEngine/
● Maintenant RIALTO est installé et vous pouvez commencer à l'utiliser.
● Revenez sur votre dossier: chemin/vers/racine/rialtoTuto/
● Créer un fichier index.html
● Ce fichier contiendra le code :
<html>
<head>
<!-- Ici on inclut les fichiers CSS -->
<link rel='STYLESHEET' type='text/css' href='./rialtoEngine/style/rialto.css'/>
<link id = 'standart_behavior' rel='STYLESHEET' type='text/css'
href='./rialtoEngine/style/behavior.css'>
<link rel='STYLESHEET' type='text/css'
href='./rialtoEngine/style/defaultSkin.css' >
<!-- Ici On inclut les fichiers javascript qui nous offrons les objets de RIALTO -->
<script type='text/javascript' src='./rialtoEngine/config.js'></script>
<script>rialtoConfig.pathRialtoE = "./rialtoEngine/";</script>
<script type='text/javascript' src='./rialtoEngine/javascript/rialto.js'></script>
</head>
<!-- Notre page html n'est rien d'autre que javascript
On annonce le début d'un code javascript -->
<script type='text/javascript'>
/* Un objet SimpleWindow crée une fenêtre qui sera affiché par le
navigateur elle aura un titre, une fenête contenante */
var ws=new rialto.widget.SimpleWindow({title:"Gestion des
etudiants",position:"absolute",name:"ws",parent:document.body,top:0,left:0,wi
dth:'99%',height:'99%'});
/* Un objet Frame crée une fenêtre qui sera affiché par le navigateur elle
aura un titre et une fenête contenante qui est le SimpleWindow */
frame= new rialto.widget.Frame({
name:'fr',
top:'20',
left:'20',
width:'99%',
height:'99%',
title:'Liste des etudiants',
open:true,
position:'absolute',
parent:ws});
II- AJAX :
C'est sûr que ce tutoriel n'est pas destiné à l'explication de cette géante
technologie mais on peut pas quand même passer sans en parler.
Cette technologie se base principalement sur un objet du langage
JavaScript, XMLHttpRequest.
Cette objet permet de formuler des requêtes HTTP asynchrones, c'est à
dire qu'elle seront exécutés après le chargement de la page web. L'utilisateur
n'aura pas besoin de recharger la page web toute entière. Le plus bel exemple
est le service de messagerie de Google.
Voici un très simple exemple que moi aussi j'ai rencontré sur le web:
Le fichier index.html
---------------------------------------index.html------------------------------------
<html>
<body><script type="text/javascript">
//préparez l'objet XMLHttpRequest pour différents navigateurs :
function initAjax()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
4/16
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ctiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp ;
}
// La fonction qu'on appellera par un événement :
function ajax()
{
xmlHttp=initAjax()
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
//Ce qu'on va faire avec la réponse de la requête :
//Ici on l'affecte à un champ de texte et il est touché tout seul
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.php",true);
xmlHttp.send(null);
}
</script>
<form name="myForm">
Name: <input type="text" onkeyup="ajax();" name="username"
/>
Time: <input type="text" name="time" />
</form>
</body>
</html>
----------------------------------Fin de index.html-----------------------------------
time.php est un fichier qui contient du texte simple
----------------------------------------data.php--------------------------------------
<?php
echo ''it is 04:00'';
?>
------------------------------------ Fin de data.php ---------------------------------
Notez bien que cet exemple n'est pas suffisant pour parler de l'AJAX, il lui manque de l'XML, mais le principe reste le même.
III- EXEMPLE :
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)