ajax加载js获取json数据

Ajax是一种在网页中使用JavaScript进行异步通信的技术。它可以通过向服务器发送请求并在不刷新整个页面的情况下获取服务器返回的数据。在网页开发中，常常使用Ajax来动态加载数据，其中包括使用JavaScript获取JSON数据。

使用Ajax加载JSON数据的过程如下：

1. 创建一个XMLHttpRequest对象，用于与服务器进行通信。

2. 使用open()方法设置请求的类型（GET或POST）、URL和是否异步。

3. 使用onreadystatechange事件监听请求状态的变化。

4. 在请求状态变为4（已完成）且状态码为200时，表示服务器已成功返回响应，可以获取并处理返回的JSON数据。

以下是一个使用Ajax加载JSON数据的示例代码：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求的类型、URL和是否异步
xhr.open('GET', 'data.json', true);
// 监听请求状态的变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 服务器已成功返回响应，可以获取并处理返回的JSON数据
    var jsonData = JSON.parse(xhr.responseText);
    // 在这里可以对jsonData进行操作，如渲染到页面上
    console.log(jsonData);
  }
};
// 发送请求
xhr.send();

在示例代码中，我们首先创建了一个XMLHttpRequest对象xhr。然后使用open()方法设置请求的类型为GET，URL为"data.json"，并将异步设置为true。接着，通过监听xhr对象的onreadystatechange事件，当请求状态变为4（已完成）且状态码为200时，表示服务器已成功返回响应。我们可以通过xhr的responseText属性获取服务器返回的JSON数据，并通过JSON.parse()方法将其转换为JavaScript对象。我们可以对获取到的jsonData进行操作，如将其渲染到页面上。

需要注意的是，由于Ajax是异步通信，所以在发送请求后，代码会继续执行，而不会等待服务器返回响应。我们需要在监听请求状态变化的回调函数中处理返回的数据。

除了使用原生的XMLHttpRequest对象，还可以使用基于Promise的fetch API来发送Ajax请求。fetch API提供了更简洁的语法，并且支持链式调用和更灵活的数据处理方式。

通过Ajax加载JSON数据，我们可以在不刷新整个页面的情况下，通过JavaScript与服务器进行通信，并获取服务器返回的JSON数据。这样可以提升用户体验，使网页更加动态和交互性。