javascript - Error when retrieving JSON from PHP using JQuery/AJAX -

i trying learn how build image gallery on website. creating page using .html / .css / .js files. have image folder on web server has arbitrary number of images in it. goal inject img tags containing each of images url's folder photos div in html.

i wrote following php script have on server:

<?php     $imagesdir = '../images/art/';     $images = glob($imagesdir . '*.{jpg,jpeg,png,gif}', glob_brace);     echo json_encode($images); ?> 

i realize generate entire html through php script , bypass ajax, don't want learning primary objective here , want learn how interact php through ajax.

the output of php script when visit url (http://www.fakedomain.com/php/images.php) in web browser of following form:

[     "../images/art/art01.jpg",     "../images/art/art02.jpg",     "../images/art/art03.jpg",     "../images/art/art04.jpg" ] 

i trying make ajax call in javascript retrieve json php file.

$.getjson('http://www.fakedomain.com/php/images.php', function(images) {             $.each(images, function(i, image) {                 $("#photos").append("<a class='fancybox' rel='group' src='" + image + "'/><img  src='" + image + "'/></a>");             });         }); 

although seems should straightforward other posts i've seen, errors , appears no code executes within callback function. i've tried calling javascript below directly in chrome javascript console while on page , longwinded error.

entered chrome javascript console:

$.getjson('http://www.domain.com/php/images.php', function(images) { console.log("test") });  

longwinded error:

object {readystate: 1, getresponseheader: function, getallresponseheaders: function, setrequestheader: function, overridemimetype: function…} abort: function (e){var t=e||t;return l&&l.abort(t),k(0,t),this} always: function (){return i.done(arguments).fail(arguments),this} complete: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this} done: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this} error: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this} fail: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this} getallresponseheaders: function (){return 2===x?a:null} getresponseheader: function (e){var t;if(2===x){if(!c){c={};while(t=tn.exec(a))c[t[1].tolowercase()]=t[2]}t=c[e.tolowercase()]}return null==t?null:t} overridemimetype: function (e){return x||(p.mimetype=e),this} pipe: function (){var e=arguments;return b.deferred(function(n){b.each(t,function(t,o){var a=o[0],s=b.isfunction(e[t])&&e[t];i[o[1]](function(){var e=s&&s.apply(this,arguments);e&&b.isfunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[a+"with"](this===r?n.promise():this,s?[e]:arguments)})}),e=null}).promise()} progress: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this} promise: function (e){return null!=e?b.extend(e,r):r} readystate: 0 responsetext: "" setrequestheader: function (e,t){var n=e.tolowercase();return x||(e=v[n]=v[n]||e,y[e]=t),this} state: function (){return n} status: 0 statuscode: function (e){var t;if(e)if(2>x)for(t in e)m[t]=[m[t],e[t]];else n.always(e[n.status]);return this} statustext: "error" success: function (){if(u){var t=u.length;(function i(t){b.each(t,function(t,n){var r=b.type(n);"function"===r?e.unique&&p.has(n)||u.push(n):n&&n.length&&"string"!==r&&i(n)})})(arguments),n?o=u.length:r&&(s=t,c(r))}return this} then: function (){var e=arguments;return b.deferred(function(n){b.each(t,function(t,o){var a=o[0],s=b.isfunction(e[t])&&e[t];i[o[1]](function(){var e=s&&s.apply(this,arguments);e&&b.isfunction(e.promise)?e.promise().done(n.resolve).fail(n.reject).progress(n.notify):n[a+"with"](this===r?n.promise():this,s?[e]:arguments)})}),e=null}).promise()} __proto__: object 

i appreciate help. i've read through many similar stackoverflow posts , tried solutions no success. feel must missing basic here.

thank taking time assist.

edit:

arun's comment letting me know needed calling php script same domain clue led me towards fixing issue deploying code web server php script was. had error when ajax called php script using absolute path. once switched using relative path, worked fine. ideas why?

maybe try adding

header( 'content-type: application/json' ); 

before echo statement in php script.