Ajaxを使ってローカルJSONファイルにアクセスするには

ローカルJSONファイルにアクセスするには、AJAXのXMLHttpRequestオブジェクトを使用してGETリクエストを送信できます。以下は、AJAXを使用してローカルJSONファイルにアクセスするサンプルコードです。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'path/to/file.json', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
// 在这里使用获取到的数据data
}
};
xhr.send();

上記のコードは、XMLHttpRequestオブジェクトのopenメソッドを呼び出すことで、リクエストの種類を指定しています。ここではGETリクエストを使用しています。最初の引数はファイルのパスで、相対パスでも絶対パスでもかまいません。2番目の引数はブール値で、リクエストが非同期的に実行されるかどうかを示します。リクエストの状態変化を監視するために、onreadystatechangeイベントハンドラが利用されています。readyStateが4でstatusが200の場合、リクエストは成功したことを示し、responseTextを使用して応答の内容を取得し、JSON.parseメソッドを使用してJSONオブジェクトに解析することができます。

ブラウザのセキュリティポリシーにより、ローカルファイルへの AJAX アクセスはクロスオリジン問題を引き起こす可能性があるため注意してください。開発段階では、Node.js の http-server モジュールや Python の SimpleHTTPServer モジュールなどを使用して、ローカル HTTP サーバーでサーバー環境をシミュレートできます。