ajax返回json数据怎么展现

当使用Ajax技术从服务器获取JSON数据时，一般会通过XMLHttpRequest对象发送异步请求。通过Ajax，可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据，然后将数据展现在网页上。

我们需要创建一个XMLHttpRequest对象，然后通过该对象发送请求。在获取到服务器响应后，可以通过回调函数处理返回的JSON数据。下面是一个展示如何使用Ajax获取JSON数据的示例代码：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置回调函数，处理服务器响应
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var response = JSON.parse(xhr.responseText); // 将返回的JSON字符串转换为JavaScript对象
      // 在页面上展示JSON数据
      displayData(response);
    } else {
      console.error('请求错误：' + xhr.status);
    }
  }
};
// 发送异步请求
xhr.open('GET', 'example.com/data.json', true);
xhr.send();
// 在页面上展示JSON数据的函数
function displayData(data) {
  var container = document.getElementById('data-container');
  container.innerHTML = '';
  for (var i = 0; i < data.length; i++) {
    var item = document.createElement('div');
    item.textContent = data[i].name;
    container.appendChild(item);
  }
}

在上面的示例代码中，首先创建了一个XMLHttpRequest对象，然后通过设置onreadystatechange事件处理函数来监听请求的状态变化。当请求的状态变为XMLHttpRequest.DONE时，表示请求已完成。然后，通过判断响应的状态码，如果为200表示请求成功，将返回的JSON字符串通过JSON.parse方法转换为JavaScript对象。接下来，调用displayData函数将JSON数据展示在页面上。

在displayData函数中，首先获取到用于展示数据的容器元素，然后根据返回的JSON数据动态创建HTML元素，并将数据添加到容器中。

需要注意的是，由于Ajax是异步请求，因此在发送请求后，页面会继续执行后续代码，而不会等待请求完成。我们需要通过回调函数来处理返回的数据。

除了上述示例代码中的GET请求，还可以使用POST请求来向服务器发送数据并获取JSON响应。在POST请求中，需要将请求的数据作为参数传递给send方法。

总结一下，通过Ajax获取JSON数据的基本步骤包括创建XMLHttpRequest对象、设置回调函数处理响应、发送异步请求、处理返回的JSON数据并在页面上展示。通过这种方式，可以实现网页与服务器之间的数据交互，提升用户体验。