function trim(myString){return myString.replace(/^\s+/g,'').replace(/\s+$/g,'');} /***************************************************************************************************************************** DESCRIPTION : FICHIER SERVANT À FAIRE DES CALLS AJAX PAR : DAVID BOISSONNAULT (davidboiss@gmail.com) DATE MODIF : 15 MARS 2007 UTILISATION : PREMIÈREMENT Ajoutez ceci dans le header de vos pages : Ajoutez ensuite les lignes qui parle de divDebug vers la fin du fichier ajax.css dans votre fichier CSS 1: Retourner la réponse ajax dans un objet HTML ------8<-----------------[DÉBUT]-Coupez-ici-------------------------------------------------------- callAjax('fichier.php',null,document.getElementById('objetHTML'), [ document.getElementById('objetFORM') ] ); // Note : Le dernier paramêtre est optionnel et est utilisé // seulement si on veut envoyé un formulaire en POST. ------8<-----------------[FIN]-Coupez-ici-------------------------------------------------------- 2: Traité le retour dans une fonction javascript. ------8<-----------------[DÉBUT]-Coupez-ici-------------------------------------------------------- // Déclarez premièrement la fonction qui traite le retour comme ceci : var fonctionDeRetour = function() { if (ajaxOk()) { // faite ce que vous voulez avec le retour // La réponse se trouve dans objAjax.responseText // ou bien dans objAjax.responseXML (si vous traitez le XML) alert(objAjax.responseText); killAjax(); } } // Appelez ensuite la fonction callAjax de cette manière callAjax('fichier.php',fonctionDeRetour, [ null ], [ document.getElementById('objetFORM') ] ); // Si on n'envoit pas de formulaire avec notre call, on peut // simplement appeler callAjax('fichier.php',fonctionDeRetour); // les derniers paramêtre sont facultatifs. // Notez qu'il faut passé null au 3ième paramêtre si on envoit un formulaire (4ième paramêtre) // car sinon le retour ne sera pas traité dans notre fonction ------8<------------------[FIN]-Coupez-ici-------------------------------------------------------- *****************************************************************************************************************************/ // Paramêtres à modifier pour qu'ils fittent avec vos besoins. /************************************************************************** //Paramêtre ajaxEmptyObject : // // Lorsqu'un call ajax retourne son contenu dans un objet html // est-ce qu'au moment du call on veut vider le contenu du call ? // // Choix de réponse : true ou false // // Si true : L'objet du retour sera vider au moment du call, // et sera mit à jour au moment de la réponse // // Si false : L'objet du retour restera comme il est au moment // du call et sera mit à jour seulement lorsque la // réponse ajax sera reçu // */ var ajaxEmtyObject = false; /*************************************************************************/ /************************************************************************** //Paramêtre ajaxEnableDebug : // // Lorsqu'on effectue un call ajax est-ce qu'on veut logger // toutes les opérations à l'intérieur d'un objet html ? // // Les opérations qui seront loggés : // // 1 : Tous les call avec les paramêtres reçu // // 2 : Toutes les réponses de retour. // // 3 : Toutes les fois que des calls auront été ajoutés à la queue. // // 4 : Toutes les exécutions de scripts dans les retours // // // Choix de réponse : true ou false // // Si true : On loggera les informations des call, des retour, // et d'autres informations utile au déboggage des // traitements ajax... // // Si false : On ne loggera rien (Mode production par exemple) */ var ajaxEnableDebug = false; /*************************************************************************/ /************************************************************************** // //VEUILLEZ NOTER QUE SI VOUS AVEZ DÉFINI : // //var ajaxEnableDebug = false; // //LES PROCHAINS PARAMÊTRES SONT INUTILES. // **************************************************************************/ /************************************************************************** //Paramêtre ajaxDebugID : // // NOTE : Ce paramêtre est requis seulement si ajaxEnableDebug est true. // // Lorsqu'on effectue un call ajax est-ce qu'on veut logger toutes // les opérations à l'intérieur d'un objet html ? // // Réponse : un string définissant l'id de l'objet HTML ou on ajoute // les informations de déboggage // */ var ajaxDebugID = 'divDebug'; /*************************************************************************/ /************************************************************************** //Paramêtre ajaxShowDebugOnError : // // Lorsqu'on effectue un call ajax est-ce qu'on veut afficher // la fenêtre de déboggage si une erreur survient ? // // Erreur possible : // // 1: Lorsque le statut de la réponse est différent de 200 (objAjax.status). // // 2: Lors du traitement d'une balise script dans le retour, et que ce // traitement retourne une erreur. // // 3: Lorsqu'il est impossible d'effectuer un call Ajax avec le browser. // // Choix de réponse : true ou false // // Si true : On affiche la fenêtre de déboggage en cas d'erreur // // Si false : On n'affiche pas la fenêtre de déboggage... */ var ajaxShowDebugOnError = false; /*************************************************************************/ /************************************************************************** VOUS NE DEVRIEZ PAS AVOIR BESOIN DE MODIFIER LE CODE PLUS BAS. **************************************************************************/ // Variables qui sont utilisées par plusieurs fonctions et qui doivent être déclarées globalement. var objAjax=null; var ajaxQueue=new Array(); var ajaxReturnObject=null; //sdfsdf // Fonction qui effectue les call, les explications pour cette fonction sont décrites au début du fichier. function callAjax(url,returnFunction,returnObject,formToPost,forcePost) { //alert('test ajax'); // déclaration d'un string vide qui servira a garder le contenu // du formulaire à poster, si formulaire à poster il y a. var postData = ""; // si l'objet ajax n'est pas présentement en utilisation, on peut y aller avec le call. if (objAjax == null) { //alert(formToPost); // Si on doit poster un formulaire, on apelle la fonction buildPostData // qui construira le string encodé du formulaire à poster. if (!('undefined' == typeof formToPost || formToPost == null)) postData = buildPostData(formToPost); if(!('undefined' == typeof forcePost || forcePost == null)) postData = forcePost; // vérification si on retourne la réponse dans un objet // dans ce cas il sera différent de null et n'aura pas un type 'undefined' if (!('undefined' == typeof returnObject || returnObject == null)) { // On garde alors l'objet de retour globalement pour pouvoir l'utiliser dans la fonction ajaxToElement. ajaxReturnObject = returnObject; // Si on doit vider le contenu de l'objet de retour au moment du call, on le vide... if (ajaxEmtyObject) ajaxReturnObject.innerHTML = ''; // La fonction de retour sera donc ajaxToElement returnFunction = ajaxToElement; } else ajaxReturnObject = null; // Ajout de compatibilité pour la majorité des browsers.... ajaxAddDebug('Tentative de call ajax', 'URL : '+url+((postData != '') ? '
FORMDATA :'+postData : '')); if (window.XMLHttpRequest) { // Cette méthode sera utilisé pour la majorité des browsers (IE7, Firefox, Safari, Konqueror, etc...) objAjax = new XMLHttpRequest(); // Assignation de la fonction de retour... objAjax.onreadystatechange = returnFunction; if (postData != "") { // Si on post un formulaire avec le call, on ouvre l'objet en post // et on envoit le contenu du formulaire à l'aide de la fonction send(). objAjax.open("POST",url,true); objAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8"); objAjax.send(postData); } else { // Sinon on envoit le call en GET, et on envoit null à la fonction send. // Note : je ne sais pas pourquoi on envoit null à la fonction send() avec XMLHttpRequest() // alors qu'on ne passe pas ce paramêtre avec ActiveXObject("Microsoft.XMLHTTP") // mais c'est comme ca que l'exemple sur w3schools est décrite. objAjax.open("GET",url,true); objAjax.send(null); } } else if (window.ActiveXObject) { // Même chose que plus haut mais pour MSIE 6 (Et peut-être MSIE 5.5, je ne suis pas très sur...) objAjax = new ActiveXObject("Microsoft.XMLHTTP"); objAjax.onreadystatechange = returnFunction; if (postData != "") { objAjax.open("POST",url,true); objAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8"); objAjax.send(postData); } else { objAjax.open("GET",url,true); objAjax.send(); } } else { // Sinon le call ajax est impossible, aviser l'usager... ajaxAddError('Call ajax impossible','Le browser ne comprend ni l\'objet ActiveXObject, ni XMLHttpRequest'); alert("Browser incompatible avec la technologie du site."); } } // Si l'objet ajax était déjà en train d'effectuer un call, // alors on ajoute ce call à la queue, il sera traité dès // que les calls précédents seront terminés. else queueAjaxCall(url,returnFunction,returnObject,formToPost); } // Fonction qui ajoute un élément dans la queue. // Les paramêtre sont les même que la fonction callAjax. // // Vous n'aurez pas besoin d'appeler cette fonction // C'est la fonction callAjax qui s'occupe de l'appeler // si un call est en traitement. function queueAjaxCall(url,retfunc,retobj,ftp) { var newqueue = new Array(); newqueue['url'] = url; newqueue['retfunc'] = retfunc; newqueue['retobj'] = retobj; newqueue['ftp'] = ftp; ajaxQueue.push(newqueue); ajaxAddDebug('Ajout d\'un call ajax à la queue','URL : '+url); } // Fonction servant à vérifié le readyState // il est important d'appeler cette fonction // et de ne pas vérifier manuellement le readyState // car cette fonction ajoute le retour dans // votre objet de déboggage. // // La manière d'utiliser la fonction est décrite // dans l'entête du fichier. function ajaxOk() { if (objAjax.readyState == 4) { //alert(objAjax.responseText); if (objAjax.status == 200) ajaxAddDebug('Réponse reçu',objAjax.responseText); else ajaxAddError('Réponse reçu avec un statut différent de 200 ('+objAjax.status+')',objAjax.responseText); return true; } else return false; } // Fonction pour envoyer le contenu d'une requete vers un élément HTML. function ajaxToElement() { if (ajaxOk()) { // Modification de l'objet de retour avec la réponse... ajaxReturnObject.innerHTML = objAjax.responseText; /*var teststr = objAjax.responseText; //alert(teststr); var scripts; var regexpress = /(.*)<\/script>/gmi; if (scripts = regexpress.exec(teststr)) { alert(scripts[1]); } // Vérification si on a recu des balises