XMLHttpRequest（xhr）地区查询(从服务器获取数据)

根据省份和城市名字, 查询对应的地区列表

document.querySelector('.sel-btn').addEventListener('click', () => {
          //获取用户输入的东西
          const pname = document.querySelector('.province').value
          const cname = document.querySelector('.city').value

          //组织查询参数字符串（用API）
          //1.创建URLSearchParams对象
          const qObj = {
              pname,
              cname
          }

          //2.生成指定格式查询参数，字符串。用api把查询参数对象-》查询参数字符串
          
          const paramsObj = new URLSearchParams(qObj)
          const queryString = paramsObj.toString()

          //使用XHR对象，查询地区列表
          const xhr = new XMLHttpRequest()
          xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`)
            //传参
          xhr.addEventListener('loadend', () => {
          
              //这段代码会解析一个来自XMLHttpRequest（xhr）的JSON响应，然后遍历数据以创建一个HTML格式的项目列表。数据数组中的每个项目都会被转换为一个带有类名"list-group-item"的<li>元素。最后，使用join()方法将HTML字符串数组连接成一个单一的字符串。

              //生成的HTML字符串可以用来填充DOM中的列表，显示来自JSON响应的地区名称。
              //拿到服务器返回的数据
              console.log(xhr.response)
              //将字符串转为JSON
              const data = JSON.parse(xhr.response)

              const htmlStr = data.list.map(areaName => {
                  //在这段代码中，areaName代表从JSON响应中提取出来的每个地区名称。在map()方法中，areaName是一个参数，代表数据数组中的每个元素，然后被用来创建对应的HTML字符串。最终，这些地区名称会被显示在一个列表中。
                  return `
 <li class="list-group-item">${areaName}</li>
`
              }).join('')
              //把join形成的大的字符串拼接在后面
              document.querySelector('.list-group').innerHTML = htmlStr
          })
          //调用send方法，发起请求
          xhr.send()

      })