Why am I getting a status 404 with jquery ajax?

Question

I'm using Firefox and am trying to access a json file locally. The javascript file and test.json are in the same folder. I get an undefined for my url.

My folder structure is:

root
|- js
| |-script.js
| |-test.json
|- index.html

script.js

$.ajax({
    type: 'GET',
    url: 'test.json', 
    dataType: 'jsonp',
    crossDomain: true,
    error: function(data) {
    console.log(data.url);
    console.log('error', data);
  },
  success: function(data) {
    console.log('success', data);
  },
  complete: function() {
    console.log('done');
  }
});

test.json

[{
  "abc": "testing"
 }, {
  "efg": "testing"
}]

Answer 1

Everything looks fine

But url: 'test.json', Should be url: 'js/test.json',

Because index.html accesses test.json from parent directory and not JS directory

Answer 2

Change the URL with respect to index.html .

url: 'js/test.json',

This is not like CSS, the paths should be relative to the page the script gets executed.