ajax接收json数据并展示

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

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的前端技术。它通过在后台与服务器进行数据交换，实现异步更新页面内容，而不需要刷新整个页面。其中一种常见的应用场景是通过Ajax接收JSON数据并展示在网页上。

我们需要创建一个XMLHttpRequest对象，用于与服务器进行数据交换。我们可以使用JavaScript的内置对象XMLHttpRequest来实现这一功能。以下是创建XMLHttpRequest对象的示例代码：


var xhr = new XMLHttpRequest();

接下来，我们需要定义一个回调函数，用于处理从服务器返回的数据。回调函数将在数据接收完成后被调用。在回调函数中，我们可以解析JSON数据，并将其展示在网页上。以下是定义回调函数的示例代码：


xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      var jsonData = JSON.parse(xhr.responseText);
      // 在此处进行数据展示的操作
    } else {
      console.error('请求出错');
    }
  }
};

在回调函数中，我们首先检查XMLHttpRequest对象的readyState属性，以确定数据接收的状态。当readyState的值为4时，表示数据接收完成。接着，我们检查XMLHttpRequest对象的status属性，以确定数据接收的结果。当status的值为200时，表示数据接收成功。

如果数据接收成功，我们可以使用JSON.parse()方法将服务器返回的JSON数据解析为JavaScript对象。然后，我们可以根据需要，在回调函数中对数据进行处理和展示。

接下来，我们需要发送一个Ajax请求，以获取服务器返回的JSON数据。我们可以使用XMLHttpRequest对象的open()方法和send()方法来实现这一功能。以下是发送Ajax请求的示例代码：


xhr.open('GET', 'http://example.com/data.json', true);
xhr.send();

在open()方法中，我们指定了请求的方法（这里使用GET方法）、请求的URL（这里是http://example.com/data.json）和请求是否异步处理（这里设置为true）。

我们需要将上述代码放置在一个事件处理函数中，以便在用户触发某个事件时执行Ajax请求。例如，我们可以将代码放置在一个按钮的点击事件处理函数中，如下所示：


document.getElementById('btn').addEventListener('click', function() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        var jsonData = JSON.parse(xhr.responseText);
        // 在此处进行数据展示的操作
      } else {
        console.error('请求出错');
      }
    }
  };
  xhr.open('GET', 'http://example.com/data.json', true);
  xhr.send();
});