Majax un tools (ajax en php)

Soyez le premier à donner votre avis sur cette source.

Vue 10 476 fois - Téléchargée 796 fois

Télécharger le projet
Commenter

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 / 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("&#8217;","'",$text);
		$text=str_replace("&#8216;","'",$text);
		$text=str_replace("&#8211;","-",$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>
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Signaler
michelsto
Messages postés
27
Date d'inscription
samedi 28 décembre 2002
Statut
Membre
Dernière intervention
12 avril 2009
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....
Signaler
marcelolipi
Messages postés
91
Date d'inscription
mercredi 15 novembre 2006
Statut
Membre
Dernière intervention
25 juillet 2011
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
Morphinof
Messages postés
261
Date d'inscription
vendredi 20 avril 2007
Statut
Membre
Dernière intervention
9 août 2013
 3
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
michelsto
Messages postés
27
Date d'inscription
samedi 28 décembre 2002
Statut
Membre
Dernière intervention
12 avril 2009
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
Morphinof
Messages postés
261
Date d'inscription
vendredi 20 avril 2007
Statut
Membre
Dernière intervention
9 août 2013
 3
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
Afficher les 8 commentaires
S'inscrire maintenant

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.

Du même auteur (michelsto)