使用ajax请求数据时，可以先封装ajax

function querystring(obj) {
   
    var str = "";
    for (var arr in obj) {
   
        str += arr + "=" + obj[arr] + "&";
    }
    return str.substring(0, str.length - 1);
}


function $ajax({
   
    method = "get",
    url,
    data,
    success,
    error,
}) {
   
    var xhr = null;
    try {
   
        xhr = new XMLHttpRequest();
    } catch (error) {
   
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }

    if (method == "get" && data != null) {
   
        url += "?" + querystring(data);
    }
    xhr.open(method, url, true);

    if (method == "get") {
   
        xhr.send();
    } else {
   
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
        xhr.send(querystring(data));
    }

    xhr.onreadystatechange = function () {
   
        if (xhr.readyState == 4) {
   
            if (xhr.status == 200) {
   
                if (success) {
   
                    success(xhr.responseText);
                }
            } else {
   
                if (error) {
   
                    error("error" + xhr.status);
                }
            }
        }
    }
}

请求的数据book.json

{
   
    "data":[
        {
   
            "name":"first",
            "desc":"1111111111111111"
        },
        {
   
            "name":"second",
            "desc":"222222222222222"
        },
        {
   
            "name":"third",
            "desc":"333333333333333"
        }
    ]
}

两种方法将获取的数据显示在ul中
两种方式选取一种，另一种运行时删除

<body>
    <button id="xiazai">下载数据</button>
    <ul id="liebiao">
        <!-- <li> <h1>标题：</h1> <p>简介：</p> </li> -->
    </ul>
    <script src="ajax.js"></script>
    <script> window.onload = function() {
     var button = document.getElementById("xiazai"); var ul = document.getElementById("liebiao"); /* 第一种方式 */ button.onclick = function() {
     $ajax({
     method: "get", url: "data/book.json", success: function(res) {
     var str = ``; var obj = JSON.parse(res); var arr = obj.data; for(var i = 0;i < arr.length;i ++) {
     var lobj = arr[i]; str += `<li> <h1>标题：${
      lobj.name}</h1> <p>简介：${
      lobj.desc}</p> </li>`; } ul.innerHTML = str; }, error: function(mes) {
     alert(error); } }) } /* 第二种方式 */ button.onclick = function() {
     ul.innerHTML = ""; $ajax({
     method: "get", url: "data/book.json", success: function(res) {
     var obj = JSON.parse(res); var arr = obj.data; for(var i = 0;i < arr.length;i ++) {
     var h1 = document.createElement("h1"); var p = document.createElement("p"); var li = document.createElement("li"); h1.innerHTML = arr[i].name; p.innerHTML = arr[i].desc; li.appendChild(h1); li.appendChild(p); ul.appendChild(li); } }, error: function(error) {
     alert(error) } }) } /* 第二种结束 */ } </script>
</body>