JQueryで$.ajaxを使ってJSONPファイルを読み込む際に、404エラーが出る

環境

Windows 10
XAMPP 7.4.3

問題

JavaScriptから非同期通信でJSONPファイルを読み込みたいのですが、JSONPを読み込めません。
var urlで指定したURLをchromeに直接貼り付けるとJSONPの中身が表示されます。
なぜURLを読み込めないのでしょうか。
教えていただきたいです。

chromeのデベロッパーツールを確認すると以下のように表示されます。

jquery-3.3.1.min.js:2 
GET http://localhost/vue.js_sample/chapter4/4-5/local/%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AEURL/products.js?callback=products&_=1588591737923 404 (Not Found)
send                    @jquery-3.3.1.min.js:2
ajax                    @jquery-3.3.1.min.js:2
created                 @main.js:27
invokeWithErrorHandling @vue.js:1863
callHook                @vue.js:4220
Vue._init               @vue.js:5002
Vue                     @vue.js:5078
(anonymous)             @main.js:6

ファイル

JavaScript
1created: function() {
2    // JSONPのURL
3    var url = 'localhost/vue.js_sample/chapter4/4-5/server/products.js';
4    // 非同期通信でJSONPを読み込む
5    $.ajax({
6      url : url,
7      type: 'GET',
8      dataType: 'jsonp',
9      jsonp: 'callback',
10      jsonpCallback: 'products'
11    })
12    .done(function(data, textStatus, jqXHR) {
13      this.products = data;
14    }.bind(this))
15    .fail(function(jqXHR, textStatus, errorThrown) {
16      this.isError = true;
17      this.message = '読み込みに失敗しました。';
18    }.bind(this));
19  },