随着互联网技术的不断发展，JavaScript渐渐成为了前端开发必不可少的一部分。当我们需要从本地获取JSON文件数据时，JavaScript就是一个非常有用的工具。在本文中，我们将从多个方面详细阐述如何使用JavaScript读取本地JSON文件数据。
一、js读取本地json文件数据并复制
首先，让我们看一下如何在JavaScript中读取本地JSON文件。下面是一个代码示例：
let xmlhttp = new XMLHttpRequest(); //创建一个XMLHttpRequest对象
xmlhttp.onreadystatechange = function () { //异步处理回调
if (this.readyState == 4 && this.status == 200) { //如果响应已完成并且状态为200（成功）
let myObj = JSON.parse(this.responseText); //将JSON字符串转换为对象
console.log(myObj); //在控制台中输出JSON对象
}
};
xmlhttp.open("GET", "example.json", true); //指定HTTP请求方法、请求地址、异步flag
xmlhttp.send(); //发送HTTP请求
这里，我们使用了XMLHttpRequest对象发起了一个GET请求，并通过回调函数处理了响应结果。当响应结果的状态码为200时，我们成功获取了本地JSON文件数据，并将其转换为JavaScript对象。最后，我们可以通过console.log()方法将数据在控制台中进行输出。
二、js中读取本地json文件跨域
如果我们需要从其他服务器获取JSON文件数据，则可能会遇到跨域问题。在JavaScript中，我们可以通过使用JSONP（JSON with Padding）技术解决这个问题。JSONP是一种使用动态script元素请求数据的方法，它可以绕过浏览器的同源策略。下面是一个代码示例：
function mycallback(data) { //回调函数
console.log(data); //在控制台中输出JSON对象
}
let script = document.createElement('script'); //创建一个script元素
script.src = 'http://example.com/data.php?callback=mycallback'; //指定请求地址和回调函数名
document.body.appendChild(script); //将script元素添加到DOM中
在这个示例中，我们创建了一个名为mycallback的回调函数，并通过在请求地址中添加callback参数指定了这个回调函数。当服务器响应数据时，它将返回一段JavaScript代码，其中包含对回调函数的调用。这段JavaScript代码将被解析并执行，从而触发回调函数。
三、js引用json文件数据
如果我们需要在HTML文件中引用JSON数据，我们可以使用<script>标签进行引用。下面是一个代码示例：</p> <pre> <code> <script src="example.json"></script> //引用JSON文件 <script> console.log(myObj); //在控制台中输出JSON对象 </script>
在这个示例中，我们通过在
