Nous allons voir ici comment mette en place facilement un chargement de tableau dynamique en AJAX et JSON, et tout cela avec jQuery.
Pourquoi JSON et AJAX ? AJAX à l’avantage de pouvoir charger des données de manière transparente, en arrière plan. JSON, quant à lui, possède la propriété d’être léger en poids et de consommer très peu de bande passante, donc d’être plus rapide. Nous renvoyons ici simplement les données à afficher dans notre tableau. Ensuite, c’est JavaScript qui va s’occuper d’afficher les données au bon endroit. L’avantage aussi, avec JSON et JavaScript, c’est que le serveur travail moins, c’est le navigateur du client qui construit l’HTML.
JSON : c’est un mode de code des données (on parle bien de données, comme dans une base de données) permettant un transfert architecturé logiquement et optimisé pour le réseau. Ce format est de plus en plus utilisé pour charger dynamiquement des données via des requêtes AJAX, ensuite c’est JavaScript qui va s’occuper d’intégrer ces données brut dans l’arbre DOM HTML.
Voici le code pour l’appel jQuery :
var monUrl = "test.php";
$.getJSON( monUrl, function(data) {
for(id in data){
alert( data[id] );
}
}
En PHP, coté serveur, il suffirai de créer un tableau simple de données, puis de passer ce tableau dans cette fonction :
C’est un tableau contenant « total », « current », « next », et « previous ».
Quoi de plus simple ?
Ensuite, il vous reste à créer une méthode de reconstruction DOM HTML.
Comment ? :
$('body').append( "<div>" + maData + "</div>" );
La méthode append permet d’ajouter dans l’arbre DOM HTML un code HTML.
Bien sûr, vous pourriez pointer autre chose que le body, par exemple un tableau HTML, ou une autre div, ou autre chose encore.
Juste une chose importante : lorsque vous ajouter des lignes dans un tableau HTML, pensez bien à ajouter les tbody pour chaque ligne, sinon IE ne voudra pas reconstruire correctement votre arbre DOM HTML.
C’est dans sa simplicité et sa compatibilité entre les navigateurs que jQuery a réussi à se distinguer. Beaucoup des utilisateurs utilisent jQuery car il permet une transversalité entre les navigateurs web du moment (et même les anciens).
Le module AJAX de jQuery est un des éléments avantageux et sans qui il serait laborieux de faire l’AJAX dans ses applications JavaScript. Personnellement, je l’utilise tous les jours, et c’est compatible avec tout ce que j’ai testé (même mon Nokia 5800 ExpressMusic et l’Iphone d’un collègue).
Donc rapidement, je vais vous balancer un code permettant de gérer de l’AJAX avec jQuery :
$.ajax({
type: "GET", // ou POST
url: "ajax.php", // l'url de mon fichier AJAX
data: "name=John&location=Boston", // les datas, seulement en POST, car en get on peut les mettre dans l'url
async: false, // le mode d'exécution de la requête : true : on bloque le navigateur en attendant la réponse de la page AJAX, false on peut continuer à utiliser le site même si la requête est en cours
success: function(data){ // une fonction anonyme qui sera exécuté lors en cas de succès.
alert( "Résultat de ma requête : " + data);
}
});
Voilà, rapidement, je vous conseil le GET en mode asynchrone à « true », cela permettra de ne pas rendre le navigateur « instable » et pas de réponse dans le cas ou le serveur planterai.
L’optimisation de son site Internet …. Très grande problématique, bien souvent compliqué à résoudre, tant de chose pouvant être à l’origine du problème.
Commençons par cette vidéo de PHPTV de décembre 2008 :
