Ajax - un seul appel de fonctions pour faire des liens et soumettre des formulaires

Commenter

Contenu du snippet

Bonjour,

Voilà je suis débutant, et j'ai réalisé pour mon besoin deux fonctions Javascript qui me permettent par le biais d'Ajax de pouvoir aussi bien soumettre un formulaire que de réaliser des liens hypertextes. Le tout à partir d'un seul appel de fonction standard. Les paramètres (il n'y en a que 4) permettent de faire le reste.

N'hésitez pas à critiquer, même si jusque là, ces fonctions ont très bien marché et je les mets à l'épreuve en développant mon propre CMS :p

Source / Exemple : 


function getFormData(form)
	{
		var data1 = "";
		var form = document.getElementById(form);
		var elements = form.elements;
		for(var i=0; i<form.length; i++)
			{
				data1 += elements[i].name + "=" +escape(elements[i].value);
				if((i+1)<form.length)
					{
						data1+="&";
					}
			}
		return data1;
	}

function ajax(fichier, div, method, form)
	{
		var xhr=null;
		var data="null";

		if(form!="null")
		{
			if(method=="GET")
			{
			data=form;
			method="POST";
			}
			else
			{
			data = getFormData(form);
			}
		}
// détection du navigateur pour la création de l'objet XMLHttpRequest (soit l'acronyme xhr)
		if (window.XMLHttpRequest)
		{
			xhr = new XMLHttpRequest();
		}
		else if (window.ActiveXObject)
		{
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xhr.open( method, fichier, false);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send(data);

		if (document.getElementById)
                {
                        document.getElementById(div).innerHTML=xhr.responseText;
                }
                else
                {
                        if (document.layers)
                        {
                                document.div.innerHTML=xhr.responseText;
                        }
                        else
                        {
                                document.all.div.innerHTML=xhr.responseText;
                        }
                }

	}

// Appels
ajax("monfichier.php", "div_de_destination", "GET", null)
ajax("monfichier.php", "div_de_destination", "POST", null)
// ces appels permettent d'exécuter le script contenu dans monfichier.php et d'afficher le retour dans la div d'id div_de_destination, ici il n'y a pas de paramètre. Ce sont les appels de base, ils me servent notamment pour faire les liens hypertextes.
ajax("monfichier.php", "div_de_destination", "GET", "c=2&d=4")
// cet appel permet d'exécuter le script contenu dans monfichier.php et d'afficher le retour dans la div d'id div_de_destinatio, les données c=2 et d=4 sont transmises par la méthode POST.
ajax("monfichier.php", "div_de_destination", "POST", "mon_formulaire")
// cet appel permet d'exécuter le script contenu dans monfichier.php et d'afficher le retour dans la div d'id div_de_destinatio, les données du formulaire sont récupérées et mises en forme (également encodées avec la fonction escape, équivalent de l'url_encode de php) par la fonction getFormData puis sont transmises par la méthode POST.

Conclusion :


Pour appeller la fonction de départ, il vous suffit de suivre les exemples en bas de la source.

Je suppose que ce n'est pas ce qui se fait de mieux, mais ça marche très bien jusqu'à maintenant.

A voir également

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 (Gwinyam)