• http.js ```javascript var baseUrl = “http://192.168.4.18:3000/“ function ajax({ url, method=”get”, success }){ var xhr = new XMLHttpRequest() xhr.open(method,url=baseUrl+url,true) xhr.send() xhr.onreadystatechange = function(){
      1.   if(xhr.readyState == 4 && xhr.status == 200){
      2.       var res = JSON.parse(xhr.responseText)
      3.       success(res)
      4.   }
      } }

    function httpAlbum(callback){ ajax({ url:”top/album”, success:res =>{ callback(res) } }) } function handleData(res){ var arr = res.albums.slice(0,3) // console.log(arr); arr.forEach(item =>{ var template = <div class="container"> <img src=${item.blurPicUrl} alt=""> <p class="title">${item.name}</p> <p class="name">${item.artist.name}</p> </div> $(“#app”).append(template) }) }

    2. - **index.js**
    3. ```javascript
    4. httpAlbum(handleData)   // 调用

    • 网易云.html

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4.   <meta charset="UTF-8">
      5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6.   <title>Document</title>
      7.   <script src="js/http.js"></script>
      8.   <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
      9.   <script src="index.js"></script>
      10.   <style>
      11.       *{
      12.           margin: 0;
      13.           padding: 0;
      14.       }
      15.       #app{
      16.           width: 700px;
      17.           margin: 0 auto;
      18.           margin-top: 40px;
      19.           display: flex;
      20.       }
      21.       .container{
      22.           width: 160px;
      23.           /* border: 1px solid #666; */
      24.           margin-right: 20px;
      25.       }
      26.       .container img{
      27.           width: 150px;
      28.           height: 150px;
      29.       }
      30.       .title{
      31.           font-size: 14px;
      32.       }
      33.       .name{
      34.           color: #666;
      35.           font-size: 12px;
      36.       }
      37.   </style>
      38. </head>
      39. <body>
      40.   <div id="app">
      42.   </div>
      43. </body>
      44. </html>