Vous le savez, jQuery est génial, c’est la classe américaine ce truc et cependant, j’avais encore un soucis avec des requetes ajax synchrone qui bloquaient le navigateur le temps du retour de la réponse et quand cette requête est exécutée toutes les 10 secondes et que le browser est bloqué 2s sur les 10s, ça le fait pas trop…
Et bien j’ai la solution et elle se nomme ‘jsonp’.
But What is ‘jsonp’ ? JSONp c’est du json et le ‘p’ pour ‘padding’ (formatage). Cette technique est utilisée par de nombreux gros voir très gros comme google, yahoo ou facebook…
Dans l’idée, celà permet d’effectuer une requete ajax en GET asynchrone (donc ne bloque pas le navigateur) et quand la réponse est disponible, jQuery créait une fonction javascript tempraire (callback) qui sera exécutée en passant le json en paramètre.
Vous allez voir, c’est dans simplicité angélique :
1. La requête jQuery :
jQuery(document).ready(function() {
// To manage ajax req and be able to abort one
var ajax_req = {} ;
// The refresh function
var refresh_div = function() {
if ( ajax_req.refresh_div ) ajax_req.refresh_div.abort() ;
ajax_req.refresh_div = jQuery.ajax({
type: ‘GET’,
url: ‘/url_to_the_page/’,
cache: false,
async: true,
dataType: ‘jsonp’,
success: function(data) {
// Request is complete and returned a json result
console.log(data) ;
}
});
}
// The updater dameon every 10 seconds
if ( timer_d ) clearInterval(timer_d);
timer_d = setInterval(function() {
refresh_div() ;
}, 10000) ;
});
2. La page en php qui va recevoir la requete ajax et produire le json
// ... Build the json response as you know to do ...
$json_response = {0:{name:'Test', sex:'male'}, 1:{name:'miss', sex:'female'}} ;
// jQuery send $_GET['callback'], the callback wich will be executed after request completed
// When returns the data response is parsed by a javascript 'eval()'
// So we produce exactly what jQuery want to execute
echo $_GET['callback'].'('.$json_response.')' ;
die() ;
?>
distributed raman amplifier3. A ce point, tout est fini ou presque et jQuery fera le reste en exécutant le callback ’success’ de la requete ajax.
Voilou, j’espère avoir pu vous aider quelque peu.
Attention tout de même, il vous faut au minimum jquery 1.2.1 et comme je n’ai que des navigateurs à jour, je ne sais pas ce que ça donne sur des navigateurs comme IE6…
.png)
