Astuces de Webmaster

Saviez-vous qu’en chargeant une page, les éléments de différents (sous-)domaines peuvent se charger simultanément ? Concrètement, si vous avez un script sur le « www. » et des images sur le « images. », les téléchargements commenceront en même temps alors que s’ils sont tous les deux sur le « www. », ils seront consécutifs et téléchargés dans l’ordre.

Donc on a tout intérêt à diversifier les téléchargements et faire télécharger un script JS particulièrement lourd comme JQuery directement sur le serveur de Google, ça peut avoir un sacré nombre d’avantages :
- décharger votre serveur
- temps de téléchargement réduit
- capacité de mettre facilement à jour les librairies en changeant un simple paramètre

A savoir que vous avez la possibilité d’appeler ces librairies en HTTPS, ce qui vous permet de les utiliser sur des pages sécurisées.

Un seul lien, ici : http://code.google.com/intl/fr/apis/ajaxlibs/

Voici quelques équivalences entre JQuery et Prototype qui peuvent aider lorsque l’on veut passer de l’un à l’autre

Mettre à jour le contenu d’un bloc via un appel AJAX
Prototype :

new Ajax.Updater(‘identifiantConteneur’,'/dossier/fichier.php’, {evalScripts:true,parameters:’var1=val1&var2=val2′});

JQuery :

$j.ajax({
type: ‘POST’,
processData: true,
url: ‘/dossier/fichier.php’,
data: ‘var1=val1&var2=val2′,
dataType: ‘html’,
success: function(data){
//alert(data);
$j(‘#identifiantConteneur’).html(data);
}
});
}

Serializer un formulaire
Prototype : Form.serialize(« identifiantFormulaire »)
Jquery : $j(« #identifiantFormulaire »).serialize()

JQuery – Appel fonction lors de la modification d’un champs de type radio ou select

$(« :checkbox, :radio »).click(nomFonction);
$(« select »).change(nomFonction);

(doc et exemple : http://docs.jquery.com/Ajax/serialize)

Liste à compléter au fur et à mesure

Connaissez-vous Prototype ? Si oui, tant mieux, si non il faut absolument que vous lisiez ce post jusqu’au bout.

Pour faire simple, la librairie Prototype permet de simplifier nombre de fonctionnalités que l’on souhaite faire via JavaScript / Ajax.

Exemple 1 : en une ligne de code, vous envoyez le contenu d’un formulaire vers un fichier distant, récupérez le contenu généré par ce fichier distant et l’insérez dans le conteneur de votre choix.
var recupererInfo = function(quelForm){
Params = Form.serialize(quelForm);
new Ajax.Updater('idConteneurSouhaite','fichierDistant.php', {parameters:Params});
}

pour aller plus loin, on peut mettre plus de paramètres entre les accolades. exemple : {method: 'post', parameters: Form.serialize(form), asynchronous:false, evalScripts:true}
On peut aussi définir de ne pas remplacer le contenu du conteneur souhaité et plutôt mettre à la suite de ce qu’il contient déjà, il suffit de rajouter « ,insertion: Insertion.Bottom » . exemple : new Ajax.Updater('idConteneurSouhaite','fichierDistant.php', {parameters:Params},insertion: Insertion.Bottom);

Exemple 1bis : suite à la demande d’Abid, voici un exemple complet pour la soumission d’un formulaire en Ajax :
<script type="text/javascript">
/*
* personnellement, je déconseille désormais
* l'utilisation des commentaires HTML dans
* les balises JS qui n'ont plus vraiment
* d'incidence sur les navigateurs et qui
* peuvent poser des problèmes avec Prototype
*/
var lancerRecherche = function(infosForm) {
new Ajax.Updater('resultatsRecherche','exeRecherche.php', {parameters:infosForm});
}
</script>
<form method="post">
<fieldset>
<legend>Recherche</legend>
<select name="typeRecherche"> <option value="societe">Société</option> <option value="numCommande">Numéro de commande</option> <option value="nomParticipant">Nom de participant</option> </select>
<input name="recherche" type="text" />
<input value="Chercher" onclick="lancerRecherche(Form.serialize(this.form)); return false;" type="submit" />
</fieldset>
</form>

Pour cet exemple, le fichier exeRecherche.php reçoit les variables $_POST envoyées par le formulaire (sauf envoi de fichier en multipart/postdata) et renvoie son rendu HTML dans le conteneur resultatsRecherche.

Exemple 2 : version simplifiée du premier exemple. Via une ligne de code, envoyez un paramètre en GET ou en POST à un fichier et récupérez son contenu dans le contenur de votre choix.
var recupererInfo = function(param1,param2){
Params = 'monParam1='+param1+'&monParam2='+param2;
new Ajax.Updater('idConteneurSouhaite','fichierDistant.php', {method: 'get',parameters:Params});
}

Exemple 3 : vous pouvez récupérer le contenu de n’importe quel champ de formulaire, que ce soit une liste déroulante, des boutons radio, ou une champ de texte : alert( $F(‘idDeMonChamp’) );

Exemple 4 : vous pouvez oublier les document.getElementById(‘idDeMonConteneur’) et autres document.all(‘idDeMonConteneur’) et tout remplacer par le très simple $(‘idDeMonConteneur’)