Utente:Alex brollo/Ajax

Da Wikisource.

Indice

Orrore!

Andiamo per ordine.

Interrogazione via AJAX [modifica]

Vecchi rottami

getAny() [modifica]

Adesso si fa sul serio.

Sia data la funzione, attiva per tutti (sta in Common.js):

function getAny(parametri) {
        $.ajax(parametri.ajax).done(function (data) {
                parametri.callback( parametri, data);
        });
}

Questa funzione è onnipotente e modulare. Si tratta di una interrogazione AJAX asincrona composta da due elementi:

  1. parte "query": cosa voglio ottenere, $.ajax(parametri.ajax); si ottiene l'oggetto JSON data;
  2. parte "do": cosa voglio fare di ciò che ho ottenuto, parametri.callback( parametri, data).

Tutto ciò che serve per attivare la funzione è una corretta costruzione del parametro parametri, un oggetto js di struttura costante, con alcuni elementi variabili; alcuni elementi sono necessari alla parte query, altri alla parte do, altri ad entrambe.

Una struttura comune di parametri è la seguente:

parametri = {
                sito: sito,        
                titolo: titolo,
                        ajax: {
                        url: 'https://' + sito + '/w/api.php',
                        async: false, // NON MODIFICARE
                        data: {
                                format: 'json',
                                action: 'parse',
                                page: titolo,          
                                prop: 'text'
                        },
                        dataType: 'jsonp' // NON MODIFICARE
                },
                callback: callback1, // questa funzione viene eseguita su data tenendo anche conto di parametri
        }

Partiamo dal fondo, parametro callback. Le funzione asincrone "non restituiscono niente". C'è quindi il problema di recuperare i dati data che sono "seppelliti" dentro la funzione. Per estrarre dati, occorre "fare qualcosa" con la funzione callback. La cosa più semplice da fare è caricare data in un elemento HTML "contenitore" con il metodo jQuery .data().

Qui su wikisource è predisposto un "elemento html contenitore" <div class="ourDiv"></div> in cui un dato di tipo generico, dati, può essere stabilmente memorizzato con l'istruzione:

$(".ourDiv").data("risultato",dati);

Un esempio di caricamento e recupero copiaincollando dalla console js di Chrome:

> $(".ourDiv").data("test","dati di prova")
 <div class=​"ourDiv" style=​"display:​none;​">​</div>​
> $(".ourDiv").data("test")
"dati di prova"

La più semplice istruzione callback che esegue qualcosa di utile è la seguente; non fa niente altro che ficcare data tal quale nella variabile datiAJAX di .ourDiv:

function callbackBase(data,parametri) {$(".ourDiv").data("datiAJAX",data);} 

E' utile sia per prove da console (esempio, per fare l'autopsia dell'oggetto json ricavato dall'interrogazione AJAX), che per lavori in cui si desidera riutilizzare, durante il "tempo di vita della pagina corrente", i contenuti di data.

Beninteso: le funzioni qui sopra sono "onnipotenti" anche nel senso che funzionano da qualsiasi progetto wiki che abbia jQuery attivo. Nel caso che vi siano dubbi sul fatto che esista una div class="ourDiv" basta usare questo codice al posto del precedente:

function callbackBase(data,parametri) {
   if ($(".ourDiv").length==0) $("body").append($('<div class="ourDiv"></div>')); 
   $(".ourDiv").data("datiAJAX",data);} 

Nuova versione semplificata [modifica]

getIwPage=function (title, site, query) {
  if (query==undefined) query="text";
  // $("#spinnerIcon").css("display","inline");
  if (query=="html" || query==undefined) data= {format: 'json',action: 'parse',page: title,prop: 'text'};
  if (query=="text") data= {format: 'json',action: 'query',titles: title,   prop: 'revisions',rvlimit: '1',rvprop: 'content'};
  $.ajax({
  url: 'https://'+site+'/w/api.php',
  async:false,
  data:data,
   dataType: 'jsonp' // this is the important one!
}).done(function (data) {
 $("body").data("outputAjax",data);
 if (query=="text") {
     if (data.query.pages[-1]==undefined) {
         l=[]; 
         for (i in data.query.pages) {l.push(i);}; 
         bareData=data.query.pages[l[0]].revisions[0]["*"]; 
     }
     else
     {
         bareData="Pagina non esistente";
     }
 if (query=="html") {
     if (data.error == undefined ) {

         bareData=data.parse.text["*"];
     }
     else
         bareData="Pagina non esistente";
     }

  }

  
 
 $("body").data("bareData",bareData);
 
  //$("#spinnerIcon").css("display","none");
}
);
}
title
titolo della pagina
site
sito wiki (es: it.wikisource.org)
query
dati richiesti, opzionale ("html" | "text", default "text")
output dei dati
  1. in $("body").data("outputAjax") risultato della query Ajax
  2. in $("body").data("bareData") il risultato "nudo"
    1. se la pagina esiste: testo o html della pagina
    2. se la pagina non esiste: "Pagina non esistente"

API per UltimeModifiche [modifica]

oggetto=JSON.parse($.ajax({
    url:"/w/api.php?action=query&list=recentchanges&rcprop=title|ids|sizes|flags|user|timestamp&rclimit=500&format=json",
    async: false
    }).responseText);

Restituisce le ultime 500 modifiche in formato json (i parametri rcprop possono essere adattati)

  • (in studio)