Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

MAJAX UN TOOLS (AJAX EN PHP)


Information sur la source

Catégorie :Javascript / DHTML Classé sous : ajax, form, httprequest, majax, javascript Niveau : Initié Date de création : 25/06/2008 Date de mise à jour : 25/06/2008 13:32:45 Vu / téléchargé: 4 992 / 323

Note :
Aucune note

Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

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("&#8217;","'",$text);
  • $text=str_replace("&#8216;","'",$text);
  • $text=str_replace("&#8211;","-",$text);
  • $text=str_replace("¤","&euro;",$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("&#8217;","'",$text);
		$text=str_replace("&#8216;","'",$text);
		$text=str_replace("&#8211;","-",$text);
		$text=str_replace("¤","&euro;",$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>



 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

25 juin 2008 13:32:45 :
C'est une nouveau code

Commentaires et avis

signaler à un administrateur
Commentaire de Morphinof le 25/06/2008 16:42:35

L'idée est bonne mais personnellement j'opterai plutôt pour un vrai framework ajax pour faire sa ^^
Je trouve dommage aussi que l'on ai pas le choix : l'envoi ne se fait qu'en post et que tes retours httprequest ne se que sous la forme responseText ^^

signaler à un administrateur
Commentaire de garfield90 le 25/06/2008 17:54:04

je ne vois pas le PHP mais plutot le JS ^^

signaler à un administrateur
Commentaire de depression le 25/06/2008 18:34:54

On ne peut pas vraiment parler d'AJAX là.

Le X de AJAX signifie XML.

signaler à un administrateur
Commentaire de Morphinof le 25/06/2008 21:01:42

Je suis d'accord avec Depression, le côté xml n'apparait pas et de plus il est assez difficile de gérer les retour de l'objet httprequest (je pensais au onSucess, onError de tout les framework ajax), c'est un mini framework dédié à deux taches, sa marche bien mais c'est en pratique pas très polyvalent

signaler à un administrateur
Commentaire de michelsto le 25/06/2008 21:22:43

Vous avez raison, mais je débute que voulez-vous. Et je suis assez simple dans ce que je développe je dois avouer.

signaler à un administrateur
Commentaire de Morphinof le 26/06/2008 09:46:43

C'est déjà bien, c'est toujours utile de comprendre le fonctionnement d'ajax, maintenant ta source est un framework mais comme tu t'en doutes bien il y en à de très évolué et si tu compte développer ton propre framework (bon courage ^^) regarde ce qui ce fait : http://www.simpleentrepreneur.com/2007/05/08/une-liste-de-librairies-javascript-pour-developper-en-ajax/

signaler à un administrateur
Commentaire de marcelolipi le 11/04/2009 15:52:57

Salut
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

signaler à un administrateur
Commentaire de michelsto le 12/04/2009 09:49:24

Salut, pour ajax, je conseil jQuery jquery.com c'est complet, ce fonctionne super bien et c'est façile. Sur le net on tape jquery et on trouve un tas d'exemple, didacticiel, etc....

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Ajax....et javascript [ par chmod777 ] Bonjour &#224; tous!mon probl&#232;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 Javascript et les boucles [ par marc660 ] Bonjour,Désoler pour le titre mais je n'est rien trouver d'autreIci je fait une boucle pour créer plusieurs champ et plusieurs boutons.J'utilise une f Du php dans du javascript [ par piep14 ] Bonjour tout le monde,J'ai une fonction javascript de ce type :function insertMarker(point,info,info2,icone) {    var icon = new GIcon();    icon.imag AJAX a accent grave [ par JMKPROD ] JMKPROD récupérer la valeur d'une variable globale déclaré en javascript dans une variable déclaré en php [ par hajeur_abd ] bonjourdans mon application j'ai défini une fonction javascript qui ajoute des champs text (input) dynamiquement suivant la demande de l'utilisateur:f Requetes ajax [ par sbool ] Bonsoir;Cela fait plusieurs mois que je me dépatouille tout seul sur un site, mais la je galere vraiment,Je viens voir des grands programmeurs car c'e controle anti doublon [ par christobal ] Bonjour,J'ai un formulaire pour créer dans la table "user" des utilisateurs.Le form contien les champs "nom" et "prenom".J'aimerais faire un contrôle Pb de redirection d'un script php vers un site html/javascript, le tout en local [ par sagat06 ] Bonjour,je suis actuellement en train de réaliser un projet me tenant à coeur.Jusqu'à maintenant, je ne l'avais réalisé qu'avec Html/javascript. Cepen


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version


HTC Magic

Entre 429€ et 429€


Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,452 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.