ajax获取json数据并显示出来

ajax是一种用于在不重新加载整个网页的情况下，通过与服务器进行异步通信来更新网页内容的技术。使用ajax可以实现动态加载数据，并将其显示在网页上，而不需要刷新整个页面。

要使用ajax获取json数据并显示出来，我们首先需要创建一个XMLHttpRequest对象，用于向服务器发送请求并接收响应。然后，我们需要指定一个回调函数，用于处理服务器返回的数据。

以下是一个使用ajax获取json数据并显示的示例代码：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 指定回调函数
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 服务器响应成功，处理返回的数据
    var response = JSON.parse(xhr.responseText);
    // 在网页上显示数据
    var dataDiv = document.getElementById('data');
    dataDiv.innerText = response.message;
  }
};
// 发送ajax请求
xhr.open('GET', 'data.json', true);
xhr.send();

在上面的示例代码中，我们首先创建了一个XMLHttpRequest对象，并指定了一个回调函数xhr.onreadystatechange。当服务器返回响应时，该回调函数会被调用。

然后，我们使用xhr.open方法指定了请求的方式（GET）和请求的URL（data.json）。第三个参数为true表示使用异步方式发送请求。

我们使用xhr.send方法发送ajax请求。当服务器返回响应时，回调函数会被调用。在回调函数中，我们首先通过xhr.readyState属性判断请求的状态是否为4（已完成），然后再通过xhr.status属性判断服务器的响应是否成功（状态码为200表示成功）。

如果服务器响应成功，我们可以通过xhr.responseText属性获取服务器返回的数据。在示例代码中，我们使用JSON.parse方法将返回的数据解析为一个JavaScript对象，并将其中的message属性值显示在网页上。

需要注意的是，ajax请求是异步的，即代码会继续执行而不会等待服务器返回响应。在回调函数中处理服务器返回的数据是很重要的。

ajax还可以使用POST方式发送请求，并可以传递参数给服务器。可以通过设置xhr.setRequestHeader方法来指定请求头信息，如Content-Type等。还可以使用xhr.send方法发送POST请求时传递数据。

使用ajax获取json数据并显示出来的步骤包括创建XMLHttpRequest对象、指定回调函数、发送ajax请求、处理服务器返回的数据。通过结合示例代码，我们可以更好地理解和应用ajax技术。