Salve a tutti,
per esercitarmi nell'uso di xmlhttprequest ho pensato di fare il seguente esercizio
relievo del path di foto dal server e invio al browser per la visualizzazione.In poche parole una gallery.
di seguto i file:
javascript:
codice:
window.addEventListener('load',init,'false');
var image_index=1;
var http_req;
var images=new Array();
function init(){
/*inizializza la pagina:aggiunge l'evento onclick al tag image,richiede al server le immagini,inizializza la pagina con la prima foto*/
document.getElementById("img").addEventListener('click',change_image,'false');
request_image();
document.getElementById("img").src=images[0].src;//inizializza la pagina con la prima foto
}
function request(){
var http_req;
try{
http_req=new XMLHttpRequest();
}
catch(failed){
http_req=false;
}
if( !http_req ){
return false
}
return http_req;
}
function request_image(){
//inizializza oggeto xmlhttprequest
http_req=request();
if(!http_req){
alert("Impossibile creare la richiesta!");
return;
}
var url="../php/gallery_j.php";
http_req.open("GET",url,'false');//not an asinchronous request
http_req.onreadystatechange=load_images;
http_req.send(null);
}
function load_images(){
if( http_req.readyState==4){
if( http_req.status==200){
var response=http_req.responseText;
var jObj=JSON.parse(response);
for(var i=0;i<jObj.length;i++){
//alert(jObj[i].path+" "+jObj[i].width+" "+jObj[i].height);
images[i]=new Image();
images[i].src=jObj[i].path;
images[i].width=jObj[i].width;
images[i].height=jObj[i].height;
}
}
else{
alert("Error stauts: "+http_req.status);
}
}
}
function change_image(){
if( image_index < images.length){
document.getElementById("img").src=images[image_index].src;
image_index++;
}
else{
image_index=0;
document.getElementById("img").src=images[image_index].src;
image_index++;
}
}
La funzione init() viene chiamata all'atto del caricamento della pagina.ll problema e relativo solo allo javascript.Infatti,il file php alla quale viene fatta la richista dei file li trasferisce correttamente.La chiamata ad http_req.open("GET",url,'false'); è asincrona perche aspetto che i percorsi al file siano inviati prima di poter fare il resto.Il problema nasce quando carico l'array di immagini(parte in rosso) e ottengo questo errore:"NetworkError: 404 Not Found - http://localhost/gallery/html/undefined".Il percorso http://localhost/gallery/gallery.html è dove risiede il file html.Grazie per l'aiuto.
Rispondi quotando
