ajax json列表

AJAX是一种在Web开发中非常受欢迎的技术。它允许您向服务器发送请求并异步地更新页面的部分，而不必刷新整个页面。在本文中，我们将讨论AJAX JSON列表，一种使用AJAX和JSON获取数据并将其呈现为列表的技术。

// AJAX请求所需的函数
function ajaxRequest(method,url,callback) {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      callback(xmlhttp.responseText);
    }
  };
  xmlhttp.open(method,true);
  xmlhttp.send();
}

// 获取JSON数据并更新列表的函数
function updateList() {
  ajaxRequest('GET','data.json',function(response) {
    var data = JSON.parse(response);
    var list = document.getElementById('list');
    var html = '';
    for (var i = 0; i ' + data[i].name + '';
    }
    list.innerHTML = html;
  });
}

// 启动函数，在页面加载时调用
function init() {
  updateList();
}

// 页面加载时调用启动函数
window.onload = init;

以上代码展示了如何使用AJAX和JSON获取数据并以列表的形式呈现在页面上。函数ajaxRequest是一个通用的AJAX请求函数，它接受HTTP方法、URL和回调函数作为参数，并在完成请求后调用回调函数。函数updateList使用ajaxRequest函数获取数据，并将其作为JSON对象进行解析。然后它迭代JSON对象并生成HTML列表项，最后将列表项添加到页面上的UL元素中。最后，函数init在页面加载时被调用，并启动更新列表的函数。