AJAX笔记原理篇

黑马程序员视频地址：

AJAX-Day03-01.XMLHttpRequest_基本使用https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=33https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=33

XMLHttpRequest

基本使用方法

    //第一步：创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest()
    //第二步：配置请求方法和请求 url 地址
    xhr.open("GET", "https://hmajax.itheima.net/api/province")
    //第三步：监听 loadend 事件，接收响应结果
    xhr.addEventListener("loadend", () => {
      //响应结果
      console.log(xhr.response)//得到的是字符串
      const object = JSON.parse(xhr.response) //字符串转对象
      console.log(object)
    })
    //第四步：发起请求
    xhr.send()

查询参数

    //第二步：配置请求方法和请求 url 地址
    xhr.open("GET", "https://hmajax.itheima.net/api/area?pname=辽宁省&cname=大连市")

将对象快速转成参数1=值1&参数2=值2... 的字符串格式

   //获取输入框的值
   const pname = document.querySelector(".province").value
   const cname = document.querySelector(".city").value
   //构建对象 (输入框数量多时，用serialiaze函数快速获取，得到的结果是对象，就可以直接使用)
   const valueObj = {
    pname,
    cname
   }


   //⭐️查询参数对象转成查询参数字符串
   const paramsObj = new URLSearchParams(valueObj)
   const queryString = paramsObj.toString()


   //创建XMR对象
   const xhr = new XMLHttpRequest()
   //配置参数
   xhr.open("GET", `https://hmajax.itheima.net/api/area?${queryString}`)
   //配置监听事件
   xhr.addEventListener("loadend", () => {
    console.log(xhr.response)
   })
   //发送请求
   xhr.send()

数据提交

    document.querySelector('.reg-btn').addEventListener('click', () => {
      //创建请求体实例对象
      const xhr = new XMLHttpRequest()
      //设置参数
      xhr.open("POST", "https://hmajax.itheima.net/api/register")

      //设置监听时间
      xhr.addEventListener("loadend", () => {
        console.log(xhr.response)
      })
      //⭐️设置请求头-告诉服务器数据类型
      xhr.setRequestHeader("Content-Type", "application/json")
      //准备提交的数据
      const userObj = {
        username: "admin123",
        password: "12345678"
      }
      const userStr = JSON.stringify(userObj)

      //设置请求体，发送请求
      xhr.send(userStr)
    })

Promise

基本使用方法

   //创建Promise对象
   const p = new Promise((resolve, reject) => {
    //执行异步任务-并传递结果
    //如果此处调用了resolve(),则接下来会让then()执行
    //如果此处调用了reject(),则接下来会让catch()执行
   })
   p.then(result => {
    //成功执行
   })
   p.catch(error => {
    //失败执行
   })

promise的三种状态

XHR与Promise联合使用

    const p = new Promise((resolve, reject) => {
      //创建XHR对象
      const xhr = new XMLHttpRequest()
      //设置参数
      xhr.open("GET", "https://hmajax.itheima.net/api/province123")
      //设置监听事件
      xhr.addEventListener("loadend", () => {
        //可以打印一下xhr对象看一下数据
        if(xhr.status >= 200 && xhr.status <= 300)
        {
          //成功，调用resolve()让其自动调用then()
          resolve(JSON.parse(xhr.response))
        }else
        {
          //失败，调用reject()让其自动调用catch()
          reject(new Error(xhr.response))
        }
      })
      //发送请求体
      xhr.send()
    }).then(result => {
      //成功执行
      console.log(result)
    }).catch(error => {
      //失败执行,错误要用dir打印
      console.dir(error)
    })

dir打印结果

封装简易版axios

简陋版（简单GET获取，不需要传参）

//封装函数
   function myAxios(object)
   {
    return new Promise((resolve, reject) => {
      //创建XHR对象
      const xhr = new XMLHttpRequest()
      //设置属性
      xhr.open(object.method || "GET", object.url)
      //设置监听事件
      xhr.addEventListener("loadend", () => {
        if(xhr.status >= 200 && xhr.status < 300)
        {
          //成功
          resolve(JSON.parse(xhr.response))
        }else
        {
          //失败
          reject(new Error(xhr.response))
        }
      })
      //发送请求体
      xhr.send()
    })
   }

//调用
 myAxios({
    url: "https://hmajax.itheima.net/api/province"
   }).then(result => {
    console.log(result)
   }).catch(error => {
    console.log(error)
   })

完整版（GET/POST都可以用，可以携带参数）

//封装函数
function myAxios(object)
   {
    return new Promise((resolve, reject) => {
      //创建XHR对象
      const xhr = new XMLHttpRequest()
      //设置属性
      if(obj.params){
        object.url += "?" + new URLSearchParams(object.params).toString()
      }
      xhr.open(object.method || "GET",  object.url)
      //设置监听事件
      xhr.addEventListener("loadend", () => {
        if(xhr.status >= 200 && xhr.status < 300){
          //成功
          resolve(JSON.parse(xhr.response))
        }else{
          //失败
          reject(new Error(xhr.response))
        }
      })
      //判断是否有data选项
      if(object.data){
        //设置请求头
        xhr.setRequestHeader("Content-Type", "application/json")
        const strdata = JSON.stringify(object.data)
        //发送请求体
        xhr.send(strdata)
      }else{
        //发送请求体
        xhr.send()
      }
    })
   }



//调用（用户注册）
myAxios({
    url: "https://hmajax.itheima.net/api/register",
    method: "POST",
    data: {
      username: "usera_001",
      password: "usera_001"
    }
  }).then(result => {
    console.log(result)
  }).catch(error => {
    console.log(error)
  })

案例：获取天气预报

function getWeather(cityCode)   //封装获取天气函数
{
  myAxios({
    url: "https://hmajax.itheima.net/api/weather",
    params: {
      city: cityCode
    }
  }).then(result => {
    const weatherData = result.data
    for(let k in weatherData)
    {
      if(k === "data")
      {

      }else if(k === "dayForecast")
      {
        const weatherList = weatherData[k].map(item => {
          return`<li class="item">          
                    <div class="date-box">            
                      <span class="dateFormat">${item.dateFormat}</span>            
                      <span class="date">${item.date}</span>          
                    </div>          
                    <img src="${item.weatherImg}" alt="" class="weatherImg">          
                    <span class="weather">${item.weather}</span>          
                    <div class="temp">            
                      <span class="temNight">${item.temNight}</span>-            
                      <span class="temDay">${item.temDay}</span>            
                      <span>℃</span>          
                    </div>          
                    <div class="wind">            
                      <span class="windDirection">${item.windDirection}</span>            
                      <span class="windPower">&lt;${item.windPower}</span>          
                    </div>        
                    </li>`
        })
        document.querySelector(".week-wrap").innerHTML = weatherList.join("")
      }else if(k === "todayWeather")
      {
        document.querySelector(".today-weather").innerHTML = `
      <div class="range-box">
        <span>今天：</span>
        <span class="range">
          <span class="weather">${weatherData[k].weather}</span>
          <span class="temNight">${weatherData[k].temNight}</span>
          <span>-</span>
          <span class="temDay">${weatherData[k].temDay}</span>
          <span>℃</span>
        </span>
      </div>
      <ul class="sun-list">
        <li>
          <span>紫外线</span>
          <span class="ultraviolet">${weatherData[k].ultraviolet}</span>
        </li>
        <li>
          <span>湿度</span>
          <span class="humidity">${weatherData[k].humidity}</span>%
        </li>
        <li>
          <span>日出</span>
          <span class="sunriseTime">${weatherData[k].sunriseTime}</span>
        </li>
        <li>
          <span>日落</span>
          <span class="sunsetTime">${weatherData[k].sunsetTime}</span>
        </li>
      </ul>`
      }else if(k === "weatherImg")
      {
        document.querySelector(`.${k}`).src = weatherData[k]
      }else
      {
        document.querySelector(`.${k}`).innerText = weatherData[k]
      }
    }
  }).catch(error => {
    console.log(error)
  })
}

getWeather("110111")  //默认获取北京天气


document.querySelector(".search-city").addEventListener("input", e => { //输入字符实时搜索城并返回列表
  myAxios({
    url: "https://hmajax.itheima.net/api/weather/city",
    params: {
      city: e.target.value
    }
  }).then(result => {
    document.querySelector(".search-list").innerHTML = result.data.map(item => {
      return `<li class="city-item" data-cityCode = "${item.code}">${item.name}</li>`
    }).join("")
  })
})

document.querySelector(".search-list").addEventListener("click", e => {   //列表点击再次搜索
  if(e.target.classList.contains("city-item"))
  {
    getWeather(e.target.dataset.citycode)
  }
})