miércoles, 16 de marzo de 2011

Prototype + JSON + HTML

Hoxe sí que rompín os cornos cunha nadería. Question is, temos un cálculo longo nun clúster, e queremos ir actualizando a páxina web según vaian saíndo os resultados, vía Ajax (prototype). Ahí vai o script no lado do cliente:


function test_job(){
var html_target = $('status'); /* modificaremos o <div id="status"></div>*/
var html_target2 = $('results'); /* cando rematemos, modificamos <div id="results"></div>*/

var job_list = {tasks: {[1, 2, 3, 4]}; /*estas son os pid no cluster, pódense xerar dinámicamente*/

job_state = new Ajax.PeriodicalUpdater("", '/testcluster/'){

/* O servidor web atende as peticións en http://noso_server.com/testcluster/ */
/* No lado do servidor, éste pregunta ó clúster como van as tareas de job_list */
/* que responderá cun diccionario de "running", "delayed" e "finished". */
/* Con esta resposta, o servidor xenera un contido "html" para ver no */
/* <div id="status"></div>, e pásallo ó cliente por JSON */
/* A clave está en pasarlle a PeriodicalUpdater un item vacío, porque senón */
/* actualizaríao con todo o paquete JSON que se recibe */

method: 'post',
content_type: "application/json",
parameters: job_list,
frequency: 5,
decay: 1,
onSuccess: function(transport){
json_content = transport.responseJSON;
pending_jobs = json_content["running"].length;
delayed_jobs = json_content["delayed"].length;
html_target.update(json_content["html"]);
if((pending_jobs + delayed_jobs) == 0 ){
job_state.stop(); /*Xa non quedan máis jobs, paramos o Updater */
new Ajax.Request('/getresults/', {
onSuccess: function(response){
html_target2.update(response.responseText);
}
});
}
}
});
}

/* E con esta liña lanzamos o Periodical updater tan pronto se carga a páxina */
Event.observe(window, 'load', test_job, false);