Topic: [JS Script] Analizzare DOM di una pagina non aperta.

[Mte90]

beh detta cosí é molti vago, serve del debug vero e proprio per verificare quello che dici.
Se lavori in asincrono devi verificare che le varie chiamate siano state effettuate ma se lo script termina prima della callback vuol dire che succede qualcosa durante la chiamata quindi io incomincerei dando un occhiata a questa cosa.

[Borgata]

Grazie

Ho fatto qualche prova in più, e la situazione pare un po' meno rosea di quanto prospettato.

Ho provato ad mettere un ciclo dummy a fine script, per fargli ritardare l'eventuale chiusura anticipata.
In questo caso sono riuscito ad ottenere qualcosa: nella pagina vengono scritti da uno a tre link.
Ci sono però due stranezze:
- I link sono tutti uguali (cosa di cui in principio non mi ero accorto), mentre dovrebbero essere differenti. Da notare che nel codice pre-assemblaggio tutto andava bene e i link erano differenti (li visualizzavo con un alert).
- Il numero di voci pare non dipendere direttamente dalla lunghezza del ciclo (anche aumentando di un ordine di grandezza, non cambia nulla).

Tra vedere e non vedere allego il codice: click.

[Mte90]

leggere il codice non basta bisogna provarlo e fare debug per approfondire il problema.

[Borgata]

Naturalmente puoi fare ciò che desideri con il codice, anche eseguirlo (Puoi farlo su un qualsiasi album di flickr)!

Magari però da una veloce lettura saltava fuori qualche errore facilmente visibile, non sempre è necessario un vero e proprio debug.

Al momento sto continuando a fare prove e debuggare, ma sembra che più faccio tentativi, più saltano fuori problemi.
Devo prima di tutto capire perchè aggiunge sempre la stessa voce anziché voci differenti, che pare quasi incomprensibile, dato che c'è davvero poco da sbagliare.

[Borgata]

Ho isolato il codice "problematico", in modo da semplificare il problema.
C'è evidentemente qualcosa che non va nella xmlHTTPrequest, ma non capisco cosa.
Da notare che altrove una prova con JQuery ha funzionato benissimo, quindi escluderei un problema alla fonte, ma in questo caso JQuery non può essere utilizzato.

Lo script è semplice:
- in fondo abbiamo il punto di ingresso, dove viene creato un array contenente due indirizzi (due pagine di Flickr) e per ognuno di essi viene lanciata una xmlHTTPrequest asincrona.
- in caso di successo della richiesta, viene lanciata la funzione xhrCallback che si occupa di estrarre dalla pagina ottenuta un indirizzo e visualizzarlo con un Alert.

I problemi:
Con un solo indirizzo tutto sembra funzionare bene, ma con più xmlHTTPrequest ottengo un comportamento strano
- in maniera apparentemente casuale, ottengo uno o due alert.
- quando ottengo due alert, sono uguali e riportano sempre l'url estratto dalla seconda pagina.
Aggiungendo più indirizzi il comportamento è lo stesso, sono visualizzati in maniera apparentemente casuale uno o più alert e quando sono più di uno l'url è sempre uguale ed è quello ottenuto con l'ultima request.

Il codice dello script è disponibile qui.

[klades]

Prova a lanciare il primo xmlHTTPrequest con il primo URL e il secondo lancialo solo dopo che il primo ha terminato il suo lavoro, mettendo la chiamata dopo if (xhr.readyState === 4)

[Borgata]

Grazie.

succede che... (rullo di tamburi)... non succede niente!
L'inserimento della request in quel punto pare blocchi lo script.

Giusto per completezza, questo è il codice.

[Borgata]

Facendo diverse prove, ho trovato una soluzione funzionante (per lo meno con due link, dovrei provare con un numero superiore), mettendo la nuova chiamata in coda alla callback (in pratica sto simulando una chiamata sincrona).

In questo modo naturalmente si vanno a perdere tutti i vantaggi di una chiamata asincrona (che, quando la lista è di 50-100 indirizzi, comincia a sentirsi in modo evidente).

Qualche altro suggerimento?


EDIT: qui il codice usato, funzionante e testato su 4 link.

[klades]

Prova così (non l'ho testato e l'ho scritto al volo, quindi non garantisco nulla!)

Codice: [Seleziona]

function xhrCallback () {
  // Qui puoi usare l'array myArr che dovrebbe contenere
  // tutte le URL delle immagini
}

function loadHTMLPage(theURL)
{
  var xhr = new XMLHttpRequest();
  xhr.open("GET", theURL , true);
  xhr.responseType = "document";
  xhr.timeout = 8000;
  xhr.onload = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
          var mainDIV = xhr.responseXML.getElementById(parentId);
          var imgTag = mainDIV.getElementsByTagName("img");
          var imgURL = imgTag[0].getAttribute("src");
          myArr.push(imgURL);
          if (myArr.length == theURL.length)
                xhrCallback();
      } else {
        alert(xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    alert(xhr.statusText);
  };
  xhr.ontimeout = function () {
    alert("The request for " + theURL + " timed out.");
  };
  xhr.send(null);
}


/*
 * Entry Point
 */

var theURL = [
  "https://www.flickr.com/photos/124546590@N03/19469746464/sizes/l",
  "https://www.flickr.com/photos/124546590@N03/19905686059/sizes/l"
];

var myArr = [];

for (var i = 0 ; i < theURL.length ; i++ ) {
  loadHTMLPage(theURL[i]);
}



[Borgata]

Niente da fare, non va.

Nella prima prova ho ottenuto due timeout che mi hanno dato speranza.
Poi quando ho provato a scrivere qualcosa nella funzione xhrCallback (anche un semplice alert) non ha dato segni di vita.
Ho poi risvuotato xhrCallback ma continua a non dare segni di vita (mi sa che gli piacciono solo i timeout!).

Avevo già pensato ad una strategia di questo tipo comunque, ma avrei voluto usare la chiamata asincrona per quello per cui è stata pensata (del resto con lo script attuale se una request fallisce la xhrCallback non viene mai chiamata).

EDIT:
Ho provato a sostituire il contenuto dell'if   if (xhr.status === 200)  con un semplice   alert(theURL);  , e pare funzionare bene.
Se invece provo ad esaminare la risposta alla request per ricavare l'indirizzo dell'immagine (come nel codice originale), ho il risultato di cui parlavo sopra.

RI-EDIT:
Ho provato a spostare l'alert riga per riga per individuare la riga di codice che bloccava tutto... è la prima.
Ho allora provato a dividere la prima riga in due parti e posso assegnare il doc ad una variabile ma dopo il getElementById non va avanti (l'alert non viene riprodotto).
Come capire quale sia l'errore?

[klades]

Scusa, errore banale mio (l'avevo detto che ero di corsa!), parentId non è definito. Modifica quella parte così:

Codice: [Seleziona]

if (xhr.readyState === 4) {
      if (xhr.status === 200) {
          var parentId = "allsizes-photo";
          var mainDIV = xhr.responseXML.getElementById(parentId);
          var imgTag = mainDIV.getElementsByTagName("img");
          var imgURL = imgTag[0].getAttribute("src");
          myArr.push(imgURL);
      } else {
        myArr.push("error");
        alert(xhr.statusText);
      }
       if (myArr.length == theURL.length)
                xhrCallback();
    }
In questo modo lo script funziona anche se una request fallisce e poi ovviamente in xhrCallback gestisci il valore speciale "error", nell'array.
Comunque in questo modo la chiamata rimane asincrona.

[Borgata]

Fesso io a non aver notato la mancanza (ancor di più perchè avevo anche individuato il metodo che dava errore!). A dire il vero credevo che quella parte di codice l'avessi semplicemente copiata dalla mia e non ci ho fatto caso.
C'era comunque qualche problema di scope, ho dovuto passare alla funzione anche i riferimenti agli array, altrimenti non funzionava.

Bene, ora che funziona... com'è che invece non funziona se cerco di appendere direttamente i nodi al body?

EDIT:
Ho provato a spostare tutto l'ambaradan nella funzione xhrCallback (nella if è rimasta solo la chiamata alla callback) e.... magia! myArr contiene tutti i link identici.
Evidentemente c'è un errore nel passaggio dei dati (dovrò investigare... qualche idea?), ma forse siamo vicini a spiegare come mai anche nella mia funzione originale i link apparivano identici.

[Borgata]

Sto cominciando a pensare che possa essere un problema di chiusura, ma non riesco bene ad individuare il dove e il come (mi sa che dovrei vedermi l'implementazione della callback, ma temo che la cosa cominci ad essere oltre le mie capacità).

Comunque c'è un evidente problema di passaggio di dati alla callback che devo cercare di risolvere, per cui qualsiasi idea è ben accetta.

PS: cosa strana, trasferendo i risultati ottenuti nello script completo, le request vanno spesso in errore. Il che è stano, dato che la la struttura è la stessa e i link vengono ricavati (e sono corretti) anziché essere già pronti all'uso come in questa versione ridotta dello script.

EDIT:
Non sono sicuro di come sia avvenuto, ma ora funziona.
L'ho provato e non dava alcun risultato, neppure i link tutti uguali come prima. ho notato allora che avevo dimenticato di passare l'oggetto xhr come parametro alla fuzione xhrCallback, e aggiunto quello pare funzioni tutto. Boh.
Qui il codice.

Ora non resta che far funzionare lo script completo, che dava problemi ma non aveva la mancanza descritta qui sopra.

[Borgata]

Ulteriore debug, stavolta sullo script completo (una volta ricavati gli URL la struttura è la stessa, c'è giusto in mezzo la creazione del nuovo tab).

Ho trasferito il codice apparentemente funzionante di sopra nello script completo, e ho fatto le prove su questa pagina.
Si presentano due principali problemi:

• Dei 5 link, riesco ad ottenerne un numero variabile tra nessuno e tutti.
  Quando non riesco ad ottenerli il motivo è un xhr.readyState =3, ossia la risorsa è disponibile ma ancora in caricamento (eh?!?)
  Da notare come quelli che non riescono sono sempre i primi. Per esempio se riesco ad ottenerne 2 su 5, allora sono le prime tre request ad fallire. *
• i link che ottengo sono tutti uguali, e sono sempre riferiti all'immagine ricavata con l'ultima request (stesso problema di cui parlavo in precedenza)

Penso che le due cose possano essere legate in qualche modo. É come se venisse processata un'unica richiesta che inizialmente è in caricamento (xhr.readyState = 3) e una volta caricata passa a xhr.readyState = 4 e quindi viene richiamata la xhrCallback.

Alcuni screenshot di debug, fatti con l'alert: 2su5, 3su5 e il rarissimo 5su5.

Qualche idea?


EDIT:
* Osservando meglio, l'ordine non segue quello di partenza delle request ma quello di ritorno del dato. Essendo richieste asincrone le risposte possono arrivare in ordine diverso da quello di partenza. Negli screenshot io misuro la lunghezza dell'array che contiene i link alle immagini, ma aggiungendo un ulteriore parametro di debug, ossia un indice che segnala l'ordine di partenza delle request, è evidente questa differenza.

RI-EDIT
Ho notato una cosa: per quanto gli URL delle immagini siano uguali, provando a passare anche l'URL della pagina da cui l'immagine viene ricavata, questi risultano differenti.
Quindi qualcosa avviene tra la xhr.open (in cui specifico l'URL della pagina) e la risposta (in cui l'oggetto DOC restituito è identico per tutte le chiamate, dato che ricavo sempre lo stesso URL dell'immagine).
Sempre più convinto sia un problema di chiusura, ma non riesco a capire come avviene.

[Borgata]

Piccolo up, per segnalare le modifiche al post precedente che forse non sono state notate.