Accueil > > > MAJAX UN TOOLS (AJAX EN PHP)
MAJAX UN TOOLS (AJAX EN PHP)
Information sur la source
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.
Source
- <?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>
-
-
-
-
<?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://ww w.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='+documen t.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='+doc ument.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_c lef='+document.form2.mot_clef.value,'resultat2');" value="">
<div id="resultat2"></div>
</FORM>
Historique
- 25 juin 2008 13:32:45 :
- C'est une nouveau code
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Ajax....et javascript [ par chmod777 ]
Bonjour à tous!mon problème est le suivant: lorsque je charge via une fonction AJAX le contenu d'une page html dans un div (genre mondiv.inn
javascript [ par barcawi ]
bonjour,j'ai crée un timer en javascript qui execute une requette Ajax. la reponse d'Ajax contien des balises javascript et HTML,le probleme se res
httpRequest et Javascript [ par Teclis01 ]
Bonsoir tout le monde Alors voilà j'avais deja posé une question similaire mais je n'ai pas trouvé de réponse donc je vais essayer de reformuler corre
Upload d'images : prévisualisation avant upload avec php+ajax+javascript [ par amewole ]
Bonjour à vous tous, Je suis à la recherche d'un script php+ajax+javascript permettant de faire un preview des images avant le upload c'est à dire qu
[DEBAT] Requête Ajax > Template & view en Javascript ou en PHP [ par destiny ]
Bonjour, J'aimerai lancer un débat sur un principe fondamentale du futur logiciel que je vais faire pour ma boite. Ce logiciel aurai pour fonctionnem
Client IRC en PHP AJAX (ou Javascript) [ par OscarWell ]
Bonjour, Je suis à la recherche d'un client IRC entièrement écrit en PHP / AJAX. Je ne veux surtout pas un client en Flash ou Applet Java. J'ai beau
Menu Treeview en PHP (Javascript ou Ajax) [ par thebayo ]
Bonsoir, J'ai besoin de votre aide. Malgrés toute mes recherches je tourne autour mais je n arrive pas vraiment a faire ce que je souhaite faire. Je
Problèmes AJAX et DROIT APACHE [ par StiriX ]
Bonsoir à tous et à toutes ! Au menu ce soir, un problème dû la sécurité sur mon serveur Apache. Afin d'éviter l'accès à quiconque de mes scripts, e
Probleme sécurité Apache AJAX [ par StiriX ]
Bonsoir à tous et à toutes ! Au menu ce soir, un problème dû la sécurité sur mon serveur Apache. Afin d'éviter l'accès à quiconque de mes scripts, e
php et javascript [ par kate1910 ]
Bonjour, A partir d'une interface en html (ou php) comment je peux génerer une nouvelle entrée dans un tableau .js en faisant entrée la donnée dans un
|
Derniers Blogs
GESTION D'EXCEPTION AVEC LES TASKSGESTION D'EXCEPTION AVEC LES TASKS par richardc
Nous avons vu dans un précédent article comment utiliser Task pour effectuer des opérations dans un autre thread.
Malheureusement, comme tout le monde n'est pas parfait, il se peut que cette exécution se passe mal et qu'une exception se produise.
La...
Cliquez pour lire la suite de l'article par richardc DéMARRONS AVEC LES TASKSDéMARRONS AVEC LES TASKS par richardc
Que vous le vouliez ou non, le développement multi-tâche est maintenant une obligation pour toute nouvelle application. Il est donc vital d'en comprendre les mécanismes et de s'y mettre le plus tôt possible.
En attendant le .NET Framework 4.5 avec le...
Cliquez pour lire la suite de l'article par richardc SLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPSSLIDE & DéMO TECHDAYS 2012 - FAST & FURIOUS XAML APPS par Vko
Retrouvez les slides et les démo de ma session Fast & Furious XAML Apps. A ceux qui se posent la question : "est-ce que le code de la DataGrid est disponible?", je vous répondrais "pas encore". Je vais mettre en place un projet codeplex pour part...
Cliquez pour lire la suite de l'article par Vko XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Forum
CHAMPS TIMECHAMPS TIME par vargas
Cliquez pour lire la suite par vargas
Logiciels
DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|