ajax加载层—ajax加载本地json：示例代码

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它允许在不刷新整个页面的情况下，通过后台与服务器进行数据交互，实现异步加载和更新页面内容的功能。其中一种常见的应用场景是通过Ajax加载本地的JSON数据。

在使用Ajax加载本地JSON数据时，首先需要创建一个XMLHttpRequest对象，用于与服务器进行通信。然后，通过该对象发送请求，获取本地的JSON数据。将获取到的数据解析并在页面中进行展示。

以下是一个示例代码，演示了如何使用Ajax加载本地的JSON数据：

// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 监听请求状态变化的事件
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，并且返回的状态码为 200
    // 解析 JSON 数据
    var jsonData = JSON.parse(xhr.responseText);
    // 在页面中展示数据
    var output = document.getElementById("output");
    output.innerHTML = jsonData.name;
  }
};
// 发送请求
xhr.open("GET", "data.json", true);
xhr.send();

在上述代码中，首先创建了一个XMLHttpRequest对象，然后通过`open`方法设置请求的类型（GET）、URL（data.json）和是否异步（true）。接着，通过`send`方法发送请求。

在`onreadystatechange`事件的回调函数中，通过`readyState`和`status`属性判断请求的状态。当`readyState`为4（请求已完成）且`status`为200（请求成功）时，表示请求成功，并且返回的数据已经准备好。可以通过`responseText`属性获取到返回的JSON数据。

使用`JSON.parse`方法将返回的JSON字符串解析为JavaScript对象，然后可以根据需要在页面中展示数据。以上示例代码中，将解析后的JSON对象的`name`属性值展示在页面中的`output`元素中。

通过以上的示例代码，我们可以实现通过Ajax加载本地的JSON数据，并将其展示在页面中。这样可以实现动态更新页面内容的效果，提升用户的交互体验。