Majax un tools (ajax en php)
Soyez le premier à donner votre avis sur cette source.
Vue 10 448 fois - Téléchargée 794 fois
Description
Un simple fichier à inclure dans vos source et vous disposez de fonction AJAX plus façile à utiliser que les httpRequest.
Aussi simple que de faire un submit d'une form en html standard.
Je ne garanti pas que ca fonctionne dans tous les cas, mais j'ai déjà testé pas mal de cas et ca fonctionne aussi avec IE 6.0 et sup, Mozilla Firefox et sur des serveur IIS ou Apache.
Ca pourras surement vous aider.
Si vous avez des idée pour encore améliorer vous êtes les bien venu.
Michel.
Voici le fichier de demo qui vas avec MAJAX il est très commenté pour la compréhension.
<?php
//////////////////////////////////////////////////////
// Author : Michel Stockman
// Date : 25/06/2008
// Description : Démo utilisation MAJAX
//////////////////////////////////////////////////////
// Ca code est délibérément simple pour montré la façilité d'utilisation de Majax
// Il n'est pas très fonctionnel mais suffisant pour comprendre le système de requête etrésultat
// Inclusion du fichier majax.php
require_once("majax.php");
/*
Cette page de démo est à la fois la page qui lance la requete et celle qui y répond
avec l'utiliation de ma fonction
majax_request_me(paramètres, destination)
mais ca pourais très bien être des page différentes
avec l'utilisation de ma fonction
majax_request(url, paramètres, destination)
dans ce cas on lui passe en plus l'url de la page
et si on veut encore faire plus simple on peux utiliser ma fonction
majax_form_submit(form_object, url, destination)
ici on ne lui passe pas de paramètre mais directement l'objet form qui envoie
tous les champs de cette form.
// Ici on vérifie si $_POST['action'] n'est pas vide. Dans ce cas ca signifie
// que la page est appelée par la méthode httpRequest et on vas y répondre
// ce paramètre 'action' est définit lors de l'appel de ma fonction majax_request_me
if ($_POST['action']<>'') {
// On vérifier la valeur du paramètre action pour savoir l'action à entreprendre
switch ($_POST['action']) {
case "double" :
// ici on double me montant reçu
$double=$_POST['montant']*2;
// on revoie le résultat avec la fonction majax_return on peux tout renvoyer
majax_return("Le résultat est ".$double);
break;
case "recherche" :
// si on à placé des blans dans les mots clef on remplace par un '+' pour google
$_POST['mot_clef']=str_replace(' ','+',$_POST['mot_clef']);
// on récupère dans résultat le cretour de la page de recherche google
$resultat=file_get_contents("http://www.google.be/search?hl=fr&q=".$_POST['mot_clef']."&btnG=Recherche+Google&meta=");
// on retourne le résultat
majax_return($resultat);
break;
}
}
//////////////////////////////////////////////////////////////////////////////////
// Partie HTML
/////////////////////////////////////////////////////////////////////////////////
?>
<p>MAJAX Exemple par Michel Stockman</p>
<hr />
<p>Double un nombre</p>
<FORM method="POST" name="form1" action="">
<!--
Ici le champ qui vas recevoir le nombre et à chaque frape de touche on appele la fonction :
majax_request_me('&action=double&montant='+document.form1.montant.value,'resultat1');
On signale que l'action est double (comme paramètre)
On signale que le montant est document.form1.montant.value (comm paramètre)
et on signale que la <DIV> pour réceptioner le résultat est 'resultat1' si on place comme résultat un nom de fonction c'est elle qui
sera appelée avec le résultat en paramètre.
-->
<INPUT name="montant" type="text" class="content" onKeyUp="majax_request_me('&action=double&montant='+document.form1.montant.value,'resultat1');" value="">
<div id="resultat1"></div>
</FORM>
<hr />
<p>Recherche google</p>
<FORM method="POST" name="form2" action="">
<!--
Ici le champ qui vas recevoir les mots clef et à chaque frape de touche on appele la fonction :
majax_request_me('&action=recherche&mot_clef='+document.form2.mot_clef.value,'resultat2');
On signale que l'action est recherche (comme paramètre)
On signale que mot-clef est document.form2.mot_clef.value (comm paramètre)
et on signale que la <DIV> pour réceptioner le résultat est 'resultat2' si on place comme résultat un nom de fonction c'est elle qui
sera appelée avec le résultat en paramètre.
-->
<INPUT name="mot_clef" type="text" class="content" onKeyUp="majax_request_me('&action=recherche&mot_clef='+document.form2.mot_clef.value,'resultat2');" value="">
<div id="resultat2"></div>
</FORM>
Aussi simple que de faire un submit d'une form en html standard.
Je ne garanti pas que ca fonctionne dans tous les cas, mais j'ai déjà testé pas mal de cas et ca fonctionne aussi avec IE 6.0 et sup, Mozilla Firefox et sur des serveur IIS ou Apache.
Ca pourras surement vous aider.
Si vous avez des idée pour encore améliorer vous êtes les bien venu.
Michel.
Source / Exemple :
<?php
//////////////////////////////////////////////////////////////////////////////////////
// Author : Michel Stockman
// Date : 22/06/2007
// Description : Outils pour les requettes HTTP directement depuis le client AJAX
//////////////////////////////////////////////////////////////////////////////////////
// On signale au système de stoker les sortie standard pour ne
// rien envoyer au client
ob_start(); // Obligatoire sinon ne fonctionne pas
function majax_return($text) {
// Permet une convertion pour le flux de retour de appel xmlhttprequest
ob_clean(); // Vide la sortie standard
$text=str_replace("’","'",$text);
$text=str_replace("‘","'",$text);
$text=str_replace("–","-",$text);
$text=str_replace("","",$text);
echo base64_encode($text); // Code le code à renvoyer en base64
ob_flush(); // Envoie le code en retour
die; // Arrêt l'exécution
}
///////////////////////////////////////////////
// Partie javascript
///////////////////////////////////////////////
?>
<script language="javascript">
/////////////////////////////////////////////////
// Fonction de gestion AJAX HTTP Request
//////////////////////////////////////////////////
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
// Décodage d'une chaine en base64 pour restitution HTML Normal
// Pour convertir le retour de XMLHttpRequest
function majax64(input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
// remove all characters that are not A-Z, a-z, 0-9, +, /, or =
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
do {
enc1 = keyStr.indexOf(input.charAt(i++));
enc2 = keyStr.indexOf(input.charAt(i++));
enc3 = keyStr.indexOf(input.charAt(i++));
enc4 = keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
} while (i < input.length);
return output;
}
//####################################################################################################
function majax_request(page, param, callback) {
///////////////////////////////////////////////////////////////////////////
// Envoie un request HTTP sur une page, en lui passent les paramètre
// en méthode POST et en retournant le résultat dans ...
// soit une div si on donne son nom en paramètre et entre quote
// soit une fonction si on donne son nom sans les quotes
// Parametre //////////////////////////////////////////////////////////////
// page = nom de la page pour recevoir le request exemple : "test.php"
// param = les parametre à passer exemple : "id=5&type=content&auto=1" comme dans un URL
// callback = l'id de la <div> qui vas contenir le code de retour ou la fonction
// qui doit être appelée avec la valeur de retour
//////////////////////////////////////////////////////////////////////////
var xhr;
var page;
try { xhr = new XMLHttpRequest(); }
catch(e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
tmp=xhr.responseText;
tmp=majax64(tmp);
if (typeof(callback)=="function") {
callback(tmp);
} else {
document.getElementById(callback).innerHTML = tmp;
}
} else {
if (typeof(callback)=="function") {
callback("Error code " + xhr.status);
} else {
document.getElementById(callback).innerHTML="Error code " + xhr.status;
}
}
}
};
xhr.open( "POST", page, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
data=param;
xhr.send(data);
}
function majax_request_me(param, callback) {
///////////////////////////////////////////////////////////////////////////
// Envoie une request HTTP sur la page courant, en lui passent les paramètre
// en méthode POST et en retournant le résultat dans la div target
// Parametre //////////////////////////////////////////////////////////////
// param = les parametre à passer exemple : "id=5&type=content&auto=1"
// target = l'id de la <div> qui vas contenir le code de retour
//////////////////////////////////////////////////////////////////////////
var page;
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/')+1);
page=sPage;
majax_request(page, param, callback);
}
function majax_form_submit(form_object, url, target) {
// permet de remplacer l'envoie d'une form normal form.submit()
// par cette fonction qui envoie la form form_object à la page URL en methode POST
// et recois le retour dans l'ojet d'ID target.
// il faut donc placer autour de la form une div pour recevoir le retour
// ATTENTION la form_object doit être l'object form par un string
param=form2url(form_object);
majax_request(url, param, target);
}
function form2url(form) {
// Création d'un url sur base du contenu d'une form
// on passe la form en paramètre et elle renvoie un url complet de la form
// utilisable comme paramètre GET
// utilisable comme paramètre pour XMLHTTPRequest en mode POST ou GET
xparam="";
for ( i=0; i < form.elements.length; i++) {
xtype=form.elements[i].type;
xname=form.elements[i].name;
// alert(xtype);
switch (xtype) {
case "text":
// idem select - one
case "hidden":
// idem select - one
case "select-one":
xvalue=form.elements[i].value;
if (xparam!="") xparam+="&";
xparam+=xname+"="+escape(xvalue);
break;
case "radio":
if (form.elements[i].checked) {
xvalue=form.elements[i].value;
if (xparam!="") xparam+="&";
xparam+=xname+"="+escape(xvalue);
}
break;
case "checkbox":
if (form.elements[i].checked) {
xvalue=form.elements[i].value;
if (xparam!="") xparam+="&";
xparam+=xname+"="+escape(xvalue);
}
break;
case "textarea":
xvalue=form.elements[i].innerHTML;
if (xparam!="") xparam+="&";
xparam+=xname+"="+escape(xvalue);
break;
}
}
// retour de la valeur
return xparam;
}
//####################################################################################################
</script>
Conclusion :
Voici le fichier de demo qui vas avec MAJAX il est très commenté pour la compréhension.
<?php
//////////////////////////////////////////////////////
// Author : Michel Stockman
// Date : 25/06/2008
// Description : Démo utilisation MAJAX
//////////////////////////////////////////////////////
// Ca code est délibérément simple pour montré la façilité d'utilisation de Majax
// Il n'est pas très fonctionnel mais suffisant pour comprendre le système de requête etrésultat
// Inclusion du fichier majax.php
require_once("majax.php");
/*
Cette page de démo est à la fois la page qui lance la requete et celle qui y répond
avec l'utiliation de ma fonction
majax_request_me(paramètres, destination)
mais ca pourais très bien être des page différentes
avec l'utilisation de ma fonction
majax_request(url, paramètres, destination)
dans ce cas on lui passe en plus l'url de la page
et si on veut encore faire plus simple on peux utiliser ma fonction
majax_form_submit(form_object, url, destination)
ici on ne lui passe pas de paramètre mais directement l'objet form qui envoie
tous les champs de cette form.
- /
// Ici on vérifie si $_POST['action'] n'est pas vide. Dans ce cas ca signifie
// que la page est appelée par la méthode httpRequest et on vas y répondre
// ce paramètre 'action' est définit lors de l'appel de ma fonction majax_request_me
if ($_POST['action']<>'') {
// On vérifier la valeur du paramètre action pour savoir l'action à entreprendre
switch ($_POST['action']) {
case "double" :
// ici on double me montant reçu
$double=$_POST['montant']*2;
// on revoie le résultat avec la fonction majax_return on peux tout renvoyer
majax_return("Le résultat est ".$double);
break;
case "recherche" :
// si on à placé des blans dans les mots clef on remplace par un '+' pour google
$_POST['mot_clef']=str_replace(' ','+',$_POST['mot_clef']);
// on récupère dans résultat le cretour de la page de recherche google
$resultat=file_get_contents("http://www.google.be/search?hl=fr&q=".$_POST['mot_clef']."&btnG=Recherche+Google&meta=");
// on retourne le résultat
majax_return($resultat);
break;
}
}
//////////////////////////////////////////////////////////////////////////////////
// Partie HTML
/////////////////////////////////////////////////////////////////////////////////
?>
<p>MAJAX Exemple par Michel Stockman</p>
<hr />
<p>Double un nombre</p>
<FORM method="POST" name="form1" action="">
<!--
Ici le champ qui vas recevoir le nombre et à chaque frape de touche on appele la fonction :
majax_request_me('&action=double&montant='+document.form1.montant.value,'resultat1');
On signale que l'action est double (comme paramètre)
On signale que le montant est document.form1.montant.value (comm paramètre)
et on signale que la <DIV> pour réceptioner le résultat est 'resultat1' si on place comme résultat un nom de fonction c'est elle qui
sera appelée avec le résultat en paramètre.
-->
<INPUT name="montant" type="text" class="content" onKeyUp="majax_request_me('&action=double&montant='+document.form1.montant.value,'resultat1');" value="">
<div id="resultat1"></div>
</FORM>
<hr />
<p>Recherche google</p>
<FORM method="POST" name="form2" action="">
<!--
Ici le champ qui vas recevoir les mots clef et à chaque frape de touche on appele la fonction :
majax_request_me('&action=recherche&mot_clef='+document.form2.mot_clef.value,'resultat2');
On signale que l'action est recherche (comme paramètre)
On signale que mot-clef est document.form2.mot_clef.value (comm paramètre)
et on signale que la <DIV> pour réceptioner le résultat est 'resultat2' si on place comme résultat un nom de fonction c'est elle qui
sera appelée avec le résultat en paramètre.
-->
<INPUT name="mot_clef" type="text" class="content" onKeyUp="majax_request_me('&action=recherche&mot_clef='+document.form2.mot_clef.value,'resultat2');" value="">
<div id="resultat2"></div>
</FORM>
Codes Sources
A voir également
- Majax un tools (ajax en php)
- PHP : Upload plusieurs fichiers en ajax + flash+php - CodeS SourceS - Guide
- PHP : Client chat (messagerie privée) ajax et php - CodeS SourceS - Guide
- PHP : Chargement d'une page Ajax/Javascript/PHP - CodeS SourceS - Guide
- Ajax chat php - Guide
- Ajax autocomplete php mysql - Guide
Commentaires
- Messages postés
- 27
- Date d'inscription
- samedi 28 décembre 2002
- Statut
- Membre
- Dernière intervention
- 12 avril 2009
-- Messages postés
- 91
- Date d'inscription
- mercredi 15 novembre 2006
- Statut
- Membre
- Dernière intervention
- 25 juillet 2011
-je voudrais me mettre a l'ajax pour faire migrer un site de tchat fait php en site ajax
mais le probleme est le suivant.
j'ai du mal a trouver un bon tutoriel pour ajax.
alors un lien serrait la bienvenue
- Messages postés
- 261
- Date d'inscription
- vendredi 20 avril 2007
- Statut
- Membre
- Dernière intervention
- 9 août 2013
3 -- Messages postés
- 27
- Date d'inscription
- samedi 28 décembre 2002
- Statut
- Membre
- Dernière intervention
- 12 avril 2009
-- Messages postés
- 261
- Date d'inscription
- vendredi 20 avril 2007
- Statut
- Membre
- Dernière intervention
- 9 août 2013
3 -Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.