ajax获取json数据列表

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

Ajax是一种用于在网页上异步加载数据的技术，可以通过Ajax获取JSON数据列表。在使用Ajax获取JSON数据列表的过程中，首先需要创建一个XMLHttpRequest对象，然后通过该对象发送一个HTTP请求到服务器，获取JSON数据。可以使用JavaScript来实现这个过程。

我们需要创建一个XMLHttpRequest对象，可以使用XMLHttpRequest构造函数来实现：


var xhr = new XMLHttpRequest();

接下来，我们需要设置该对象的onreadystatechange属性，当readyState属性发生变化时，会触发该属性对应的事件处理函数。在事件处理函数中，我们可以获取服务器返回的JSON数据，并对数据进行处理。例如，我们可以在readyState为4（表示请求已完成）且status为200（表示请求成功）时，通过responseText属性获取服务器返回的JSON数据：


xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var jsonData = JSON.parse(xhr.responseText);
    // 对JSON数据进行处理
  }
};

接下来，我们需要使用open方法设置HTTP请求的方法和URL。例如，我们可以使用GET方法请求一个名为data.json的文件：


xhr.open('GET', 'data.json', true);

然后，我们可以调用send方法发送HTTP请求。如果是GET请求，可以将参数设置为null；如果是POST请求，可以将参数设置为要发送的数据。例如，我们可以发送一个GET请求：


xhr.send(null);

我们可以在事件处理函数中对服务器返回的JSON数据进行处理。例如，我们可以将JSON数据渲染到网页上：


xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var jsonData = JSON.parse(xhr.responseText);
    var list = document.getElementById('list');
    for (var i = 0; i < jsonData.length; i++) {
      var item = document.createElement('li');
      item.textContent = jsonData[i].name;
      list.appendChild(item);
    }
  }
};