ajax json数据显示到html

在前端开发中，AJAX与JSON是重要的技术。通过AJAX技术，实现数据的异步加载，这样可以避免页面的整体刷新，仅刷新部分内容，提高用户体验。而JSON作为一种数据格式，具有轻巧和易读性的特点，被广泛应用在前端开发中。下面介绍如何使用AJAX获取JSON数据，并将其显示到HTML页面中。

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求地址及请求方法
xhr.open('GET','data.json',true);

// 设置请求头
xhr.setRequestHeader('Content-type','application/json');

// 监听请求状态变化
xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);

    // 获取HTML中的元素
    var container = document.getElementById('container');

    // 动态生成HTML代码
    var html = '';
    for (var i = 0; i ' + data[i].title + '