xmlhttprequest json photo gallery
Posted: Mon Dec 05, 2011 2:26 pm
Hi all,
i want to exercise with xmlhttprequest and json so i tought to do a simple gallery.
javascript Code:
The problem arises on the red part of code.I have two types of errors jObj is undefined and the second is NetworkError: 404 Not Found - http://localhost/gallery/html/undefined ... /undefined is where gallery.html is.
php code:
the output is: (what is sent to the client)
[{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0726.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0799.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0908.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0834.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0744.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0856.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0748.JPG\",\"w\":\"4752\",\"h\":\"3168\"}]
Any help?
i want to exercise with xmlhttprequest and json so i tought to do a simple gallery.
javascript Code:
Code: Select all
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;
}
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;
//alert(response);
var jObj=JSON.parse(response);
[color=#FF4000] for(var i=0;i<jObj.length;i++){
alert(jObj[i].path+" "+jObj[i].w+" "+jObj[i].h);
images[i]=new Image(jObj[i].w,jObj[i].h);
images[i].src=jObj[i].path;
//images[i].width=jObj[i].w;
//images[i].height=jObj[i].h;
}[/color]
}
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++;
}
}
php code:
Code: Select all
<?php
class Image{
private $path;
private $width;
private $height;
function __construct($path='',$width=0,$height=0){
$this->path=$path;
$this->width=$width;
$this->height=$height;
}
function get_path(){
return $this->path;
}
function get_width(){
return $this->width;
}
function get_height(){
return $this->height;
}
function set_path($path){
$this->$path=$path;
}
function set_width($width){
$this->$width=$width;
}
function set_height($height){
$this->$height=$height;
}
}
//$dir="../Immagini/16_10_San_Michele/";
$dir="/home/and/Immagini/16_10_San_Michele/";
$images=array();
$string="[";
$i=0;
if( is_dir($dir)){//if $dir is a directory
if( $dir_handle=opendir($dir) ){//open directory
while( false !== ($file=readdir($dir_handle))){//read the directory
if( is_dir($file)){//if the file is a directory
continue;
}
else{//if is a file
$path="$dir"."$file";
//echo "PERCORSO ALL'IMMAGINE: ".$path."\n";
list($width,$height)=getimagesize($path);
$image = new Image($path,$width,$height);
$string.="{\"path\":\"".$image->get_path()."\",";
$string.="\"w\":\"".$image->get_width()."\",";
$string.="\"h\":\"".$image->get_height()."\"},";
}
}
}
else{
echo "error\n";
}
}
else{ echo $dir." isn't a directory\n";
}
$string[strlen($string)-1]="]";//elimina la virgola finale
echo json_encode(utf8_encode($string));
?>
[{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0726.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0799.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0908.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0834.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0744.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0856.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0748.JPG\",\"w\":\"4752\",\"h\":\"3168\"}]
Any help?