对AJAX的理解，实现一个AJAX请求

定义

• Ajax是指通过JavaScript的异步通信，从服务器获取XML文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页

创建一个Ajax的步骤

• 创建一个XMLHttpRequest对象
• 在创建的xhr对象上使用open方法创建一个HTTP请求，open方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息
  • 在发起请求前，可以为这个对象添加一些信息和监听函数，比如可以通过setRequestHeader方法来为请求添加头信息，还可以为这个对象添加一个状态监听函数
  • 一个XMLHttpRequest对象一共有5个状态，当它的状态变化时会触发onreadystatechange事件
• 设置监听函数，来处理请求成功后的结果
  • 当对象的readyState变为4的时候，代表服务器返回的数据接收完成，这个时候就可以通过判断请求的状态来进行业务操作，如果状态是2xx或者304的话就代表返回正常，这个时候就可以通过response中的数据来对页面进行更新了
• 发起请求
  • 当对象的属性和监听函数设置完成后，最后调用sent方法来向服务器发起请求，可以传入参数作为发送的数据体
• 示例

  const SERVER_URL = "/server"
  //创建xhr对象
  let xhr = new XMLHttpRequest()
  //创建http请求
  xhr.open("GET",SERVER_URL,true)
  xhr.onreadystatechange = function() {
      if(this.readyState !== 4) {
          return
      }
      if(this.status === 200) {
          handle(this.statusText)
      }else{
          console.log(this.statusText)
      }
  }
  xhr.onerror = function() {
      console.log(this.statusText)
  }
  //设置请求头信息
  xhr.responseType = "json"
  xhr.setRequestHeader("Accept","application/json")
  //发送请求
  xhr.send(null)

使用Promise封装Ajax

    function getJSON(url) {
        let promise = new Promise(function(resolve,reject){
            let xhr = new XMLHttpRequest()
            xhr.open("GET",url,true)
            xhr.onreadystatechange = function() {
                if(this.readyState !== 4) return
                if(this.status === 200) {
                    resolve(this.response)
                }else{
                    reject(new Error(this.statusText))
                }
            }
            xhr.onerror = function() {
                reject(new Error(this.statusText))
            }
            xhr.responseType = "json"
            xhr.setRequestHeader("Accept","application/json")
            xhr.send(null)
        })
        return Promise
    }

-----------------------------------------------------------------------------------------------2024.5.6每日一题