ajax请求本地json,ajax本地文件

温馨提示：这篇文章已超过143天没有更新，请注意相关的内容是否还可用！

Ajax是一种用于在不重新加载整个页面的情况下，通过后台与服务器进行数据交互的技术。它可以通过异步请求从服务器获取数据，并将数据动态地展示在页面上，提供了更好的用户体验。

要实现通过Ajax请求本地JSON文件，可以使用XMLHttpRequest对象来发送HTTP请求，并使用回调函数处理服务器返回的数据。下面是一个示例代码：


var xhr = new XMLHttpRequest();  // 创建XMLHttpRequest对象
xhr.open('GET', 'data.json', true);  // 指定请求的方法、URL和是否异步
xhr.onreadystatechange = function() {  // 监听请求状态的变化
  if (xhr.readyState === 4 && xhr.status === 200) {  // 请求完成且响应成功
    var data = JSON.parse(xhr.responseText);  // 解析JSON数据
    // 处理获取到的数据
    console.log(data);
  }
};
xhr.send();  // 发送请求

在这个示例中，我们首先创建了一个XMLHttpRequest对象，然后使用`open`方法指定了请求的方法为GET，URL为`data.json`，并将异步参数设置为true。接着，我们通过`onreadystatechange`事件监听请求状态的变化，当请求状态变为4（表示请求完成）且响应状态为200（表示响应成功）时，我们使用`JSON.parse`方法将服务器返回的JSON数据解析为JavaScript对象，并在回调函数中处理这些数据。

需要注意的是，由于Ajax请求是异步的，所以在请求发送后，代码会继续执行，而不会等待服务器返回的数据。在处理获取到的数据时，需要确保代码的执行顺序正确。

除了请求本地JSON文件，我们还可以通过Ajax请求本地文件。在这种情况下，我们可以使用相对或绝对路径指定文件的位置，并将其作为URL传递给`open`方法。下面是一个示例代码：


var xhr = new XMLHttpRequest();  // 创建XMLHttpRequest对象
xhr.open('GET', 'file.txt', true);  // 指定请求的方法、URL和是否异步
xhr.onreadystatechange = function() {  // 监听请求状态的变化
  if (xhr.readyState === 4 && xhr.status === 200) {  // 请求完成且响应成功
    var text = xhr.responseText;  // 获取文本内容
    // 处理获取到的文本内容
    console.log(text);
  }
};
xhr.send();  // 发送请求