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 !

AJAXSIMPLIFIER EN UNE SEUL FONCTION ( GET && POST )


Information sur la source

Description

Cliquez pour voir la capture en taille normale
Bonjours,
j'ai écrit se code pour essayer de facilité la vie aux programmeurs,
Afin qu'il puissent utilisé la technologie Ajax, sans problème,
qu'elle que soit leur requete ( POST OU GET )....
Ce code renvoya la reponse de la requete dans une div.

En espérent que cela aidera....
 

Source

  • <!--
  • function ObjectDiv( div , content )
  • {
  • if ( document.getElementById )
  • {
  • document.getElementById( div ).innerHTML = content;
  • }
  • else
  • {
  • if ( document.layers )
  • {
  • document.div.innerHTML = content;
  • }
  • else
  • {
  • document.all.div.innerHTML = content;
  • }
  • }
  • }
  • function Goto( FILE , METHOD , DATA , div )
  • {
  • if( METHOD == 'GET' && DATA != null )
  • {
  • FILE += '?' + DATA;
  • DATA = null;
  • }
  • var httpRequestM = null;
  • if( window.XMLHttpRequest )
  • { // Firefox
  • httpRequestM = new XMLHttpRequest();
  • }
  • else if( window.ActiveXObject )
  • { // Internet Explorer
  • httpRequestM = new ActiveXObject( "Microsoft.XMLHTTP" );
  • }
  • else
  • { // XMLHttpRequest non supporté par le navigateur
  • return "Votre navigateur ne supporte pas les objets XMLHTTPRequest...";
  • }
  • httpRequestM.open( METHOD , FILE , true );
  • httpRequestM.onreadystatechange = function()
  • {
  • if( httpRequestM.readyState == 4 )
  • {
  • ObjectDiv( div , httpRequestM.responseText );
  • }
  • }
  • if( METHOD == 'POST' )
  • {
  • httpRequestM.setRequestHeader( "Content-type" , "application/x-www-form-urlencoded" );
  • }
  • httpRequestM.send( DATA );
  • }
  • function ViewContent( div , href , method , data )
  • {
  • var wait = "<div align='center'>" +
  • "<b><font style='color:red;'>Chargement en cours.....</font></b><br><br>" +
  • "<img src='./loading.gif' border='0' alt='Chargement en cours....'>" +
  • "</div>";
  • ObjectDiv( div , wait );
  • Goto( href , method , data , div );
  • return false;
  • }
  • //-->
<!--

        function ObjectDiv( div , content )
        {
                if ( document.getElementById )
                {
                        document.getElementById( div ).innerHTML = content;
                }
                        else
                {
                        if ( document.layers )
                        {
                                document.div.innerHTML = content;
                        }
                                else
                        {
                                document.all.div.innerHTML = content;
                        }
                }
        }
        
        function Goto( FILE , METHOD , DATA , div )
        {
                if( METHOD == 'GET' && DATA != null )
                {
                        FILE += '?' + DATA;
                        DATA = null;
                }

                var httpRequestM = null;   

                        if( window.XMLHttpRequest )
                        {   // Firefox   
                            httpRequestM = new XMLHttpRequest();
                        }
                                else if( window.ActiveXObject )
                        {   // Internet Explorer   
                            httpRequestM = new ActiveXObject( "Microsoft.XMLHTTP" );
                        }
                                else
                        {   // XMLHttpRequest non supporté par le navigateur   
                            return "Votre navigateur ne supporte pas les objets XMLHTTPRequest...";
                        }   
   
                                httpRequestM.open( METHOD , FILE , true );
                                httpRequestM.onreadystatechange = function()
                                {   
                                        if( httpRequestM.readyState == 4 )
                                        {
                                                ObjectDiv( div , httpRequestM.responseText );
                                        }
                                }
                
                        if( METHOD  == 'POST' )   
                        {
                                httpRequestM.setRequestHeader( "Content-type" , "application/x-www-form-urlencoded" );
                        }

                 httpRequestM.send( DATA );   
        }

        function ViewContent( div , href , method , data )
        {
                var wait = "<div align='center'>" +
                           "<b><font style='color:red;'>Chargement en cours.....</font></b><br><br>" +
                           "<img src='./loading.gif' border='0' alt='Chargement en cours....'>" +
                           "</div>";

                ObjectDiv( div , wait );
                Goto( href , method , data , div );
                return false;
        }

        
//-->

Conclusion

Dorénavent vous aurait juste a inclure ce fichier Javascript dans vos pages,
Et vous pourais utilisé la technologie Ajax,
Vous pourez l'activer a partir d'un simple lien, ou d'une image ( onclick )...
Vous pouvez géré vos requete quelles soient Post ou Get


   [  Voici un exemple pour GET ( si vous ne souhaiter pas mettre de variable )  ] :

         <div id="laDiv">Initial CONTENT</div>
         <a href="javascript:ViewContent( 'laDiv' , 'votre_page.html' , 'GET' , null );"></a>

            REQUETE EFFECTUER VERS : votre_page.html


   [  Voici un exemple pour GET ( si vous souhaiter mettre des variables )  ] :

         <div id="laDiv">Initial CONTENT</div>
         <a href="javascript:ViewContent( 'laDiv' , 'votre_page.html' , 'GET' , 'variable1=content1&variable2=content2&' );"></a>

            REQUETE EFFECTUER VERS : votre_page.html?variable1=content1&variable2=content2&


   [  Voici un exemple pour POST                                            ] :

         <div id="laDiv">Initial CONTENT</div>
         <a href="javascript:ViewContent( 'laDiv' , 'votre_page.php' , 'POST' , 'variable1=content1&variable2=content2&' );"></a>

            REQUETE EFFECTUER VERS : votre_page.php
            Avec les variables suivantes : $_POST[ 'variable1' ] = 'content1'; $_POST[ 'variable2' ] = 'content2';



 

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

Commentaires et avis

signaler à un administrateur
Commentaire de wizard512 le 27/08/2006 12:41:32

En espérent avoir pu aider certains programmeurs, et bon prog a tous    ;)

signaler à un administrateur
Commentaire de kankrelune le 27/08/2006 14:26:48

Salut....

Il serait bien de rajouter un escape() sur les données à envoyer... et sinon tu ne gère pas les erreurs lors de la réponse du serveur... .. .

Sinon le code est ""simpliste"" mais pour des requetes basiques c'est amplement suffisant... .. .

@ tchaOo°

signaler à un administrateur
Commentaire de wizard512 le 27/08/2006 14:31:22

Oui, je crois que je devrais optimisé, ce code pour les retours d'erreur éventuel,
et effectivement rajouter comme tu l'as indiquer un escape()

Si vous avez d'autre remarques, de ce type pour optimisé le code
n'ésitez pas a m'en faire pars

^^

signaler à un administrateur
Commentaire de webdeb le 27/08/2006 21:57:00

Un excellent tuto avec une belle fonction qui fait pareil que la tienne :

http://www.openweb.eu.org/articles/objet_xmlhttprequest/

++

signaler à un administrateur
Commentaire de Arto_8000 le 28/08/2006 00:05:04

J'avais fait quelque chose de semblable, mais la seul chose c'est que les paramètres envoyés à la fonction était un objet form et la fonction à appeler quand il a recu la réponse ...

Source :
http://www.pastebin.us/3738

signaler à un administrateur
Commentaire de wizard512 le 28/08/2006 09:57:17

Effectivement,
La fonction sendData, ainsi que la fonction de ARTO_8000 ont globalement le même principe,
Que ma source mais je compte l'optimisé,
En fonction des statues renvoyer par le navigateur,
D’ajouter un escape, et essayer de rajouter d'autre fonctions,
Qui permettrais de rendre plus modulable la fonction.

      ^^

             ~~ DotWizard512 ~~

signaler à un administrateur
Commentaire de wizard512 le 28/08/2006 10:02:22

"et essayer de rajouter d'autre fonctions," => "et essayer de rajouter d'autre paramètres,"

      ^^'

Dls

signaler à un administrateur
Commentaire de apxa le 28/08/2006 20:21:09

Iop all
Je travail sur XMLHTTPRequest c'est génial comme fonctionnalité mais le problème se pose pour les upload de fichier.
Si vous avez des tips je suis preneur.

Have Fun ;)

signaler à un administrateur
Commentaire de kankrelune le 28/08/2006 21:20:28

Aucun... c'est une des limitation d'Ajax... javascript n'ayant pas accès au fichiers de l'internaute... seule solution uploader dans une iframe invisible et se servir d'ajax pour afficher l'état d'avancement... .. .

@ tchaOo°

signaler à un administrateur
Commentaire de wizard512 le 29/08/2006 10:03:38

J'ai trouver de multiple lien parlant du transfers de fichier via ajax,
voici quelques liens :

http://sean.treadway.info/demo/upload/
http://forum.alsacreations.com/topic-24-11823-1-AJAx-peut-il-tout-faire-.html
http://www.tynril.info/index.php/2006/02/03/8-php-et-transfert-de-fichiers


         ^^

signaler à un administrateur
Commentaire de niamor36 le 30/10/2006 17:39:45

Simple et efficace. Parfait pour moi qui bidouille depuis peu avec Ajax...

signaler à un administrateur
Commentaire de lespleiades le 04/03/2007 20:55:39

[noob]
salut! bon je comprend rien, j essaye d'envoyer une variable de <form> vers une page de recuperation, mais ca marche pas :/
j ai pourtant bien fait comme dit (ma variable est 'poster')
dans le formulaire: <a href="javascript:ViewContent( 'main' , 'verif.php' , 'POST' , 'poster=content1&' );"></a>
dans la recuperation: <div id='main'>$_POST[ 'poster' ] = 'content1';</div>

mais ca marche pas il doit y avoir un truc qui m'echappe, mais je ne comprend pas.
J ai essayé pas mal de bidouillages, au mieu dans ma table il ecrit 'content1' au pire rien du tout,
alors si quelqu'un pouvais me donner un bout d'exemple simple et detaillé cela m'aiderais grandement, car j ai fit des recherche sur google, mais alors la je vol a 3000 metres :/
[/noob]

signaler à un administrateur
Commentaire de JLN le 30/04/2007 11:25:44

Enfin de l'ajax qui lave plus blanc que blanc... C'est nouveau ca vient de sortir... Bon assez siter coluche et parlons du code. Très bien ce code pour des novices (dont je fais partie) en ajax et en javascript tout court c'est une manière simple à mettre en oeuvre et à utiliser sans modération tellement ca peut rendre service. Surtout que là il n'y a pas des tonnes de javascript dans lequel on n'utilise que 10%, juste ce dont on a besoin 90 fois sur 100. Donc je met 10 car c'est sympa de penser à ceux qui n'y connaisent rien (ou presque) en ajax.

Bonne prog à tous...
@+ JLN

signaler à un administrateur
Commentaire de jessie le 04/01/2008 18:31:09 10/10

Super merci

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

fonction javascript [ par phil ] Bonjourvoici mon pb: function changeFrame(frame1,frame2){ top.nomdeframe1.location=frame1 top.nomdeframe2.location=frame2 comment doit-on écrire ce sc function afficher(calque) [ par biloui59 ] Salut tt le mondeje ne comprends pas pourquoi la fonction suivante ne marche pas:&lt;script&gt;function afficher(calque) { for(i=1;i&lt;=9;i++){ nom= requete + php dans fonction JS [ par dianouch ] Bonjour!je veux faire 1 fonction JS de vérification de formulaire, dans laquelle je dois faire une requete SQL en php.val est une variable JS contenan appelle d'un fonction d'une iframe [ par davwart ] BOnjour &#224; tous.. j'ai un petit probleme avec un appel de fonction,je m'explique : j'ai un document qui contient une iframe "correctionFrame" , da Requete sql en dans une function javascript [ par destiny ] Lo allEn gros avec une ptite function js,function EmplIns(LEmpl,StD,StF) {&nbsp;//alert('LEmpl = ' + LEmpl);&nbsp;window.opener.document.getElementByI Rechargement d'objet "AJAX" [ par benjiman2 ] Bonjour !Voila, je commence tout juste a programmer en AJAX ...et voila mon probleme ...Je voudrai que chaque 2 secondes, la page se rafraichisse dans Attendre une réponse... [ par Mindiell ] Re-bonjour ! Bon j'ai essayé Ajax, mais je n'arrive pas à faire ce que je veux : - Lancer une fonction - La fonction interroge le serveur (merci Aja AJAX - XMLHttpRequest - il ne veux pas afficher [ par jnbdzjnbdz ] Bonjour je viens de commencer avec ajax. Et je suis déjà entrain de développer une petite application web. Si vous aller ici:<a target="_blank" hr XMLHTTPREQUEST [ par tonytruand ] Bonjour et bonne ann&#233;e &#224; tous, J'ai un tuyau &#224; demander; je r&#233;cup&#232;re un script distant avec XMLHTTPREQUEST, mais j'ai un souc xmlhttprequest fonctionne sous IE mais pas sur netscape [ par pierrot10 ] Bonjour, j'ai cr&#233;&#233; un un site dont une artie est en javascript. Tout fonction bien sous sous Netscape et FF Probablement mon probl&#232;eme


Nos sponsors

Sondage...

CalendriCode

Décembre 2008
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Téléchargements

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



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, 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,374 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é.