XHR

请求发送

四步完成

创建网络请求的AJAX对象
监听XMLHttpRequest对象状态的变化,或监听onload事件
配置网络请求(通过open方法)
发生send网络请求

<script>
  //1.创建XMLHttpRequest对象
  const xhr = new XMLHttpRequest()

  //2.监听状态的改变(宏任务)
  xhr.onreadystatechange = function(){
      console.log(xhr.response);
      const resJSON = JSON.parse(xhr.response)
  }
  //3.配置请求open
  //参数 method,url, async:true默认,异步请求
  xhr.open("get","http:xxxx")

  //4.发送请求
  xhr.send()
</script>

XHR的state

0:UNSENT:代理被创建,但尚未调用open()方法

1:OPENED:open()方法已经被调用

2:HEADERS_RECEIVED:send()方法已经被调用,并且头部和状态已经可获得

3:LOADING:下载中,responseTEXT已经包含部分数据

4:DONE:下载操作已完成

XHR其他时间监听

除了onreadystateechange还有其他时间可以监听

loadstart:请求开始
progress:一个响应数据包到达,此时整个response body都在response中
abort:调用xhr.abort()取消了请求
error:发生连接错误,例如,域错误.不会发生诸如404这类的HTTP错误
load:请求成功完成
timeout由于请求超时而取消了请求
loadend:在load,error,timeout或abort之后触发

响应数据和响应类型

如果告知类型和实际类型不符,则取到的数据为null

1	xhr.responseType="json" //告诉xhr获取到的数据的类型是json,不然默认是text

获取Http statuts

xhr.onload = function() {
    if(xhr.status >=200 && xhr.status<300){
        console.log(xhr.response)
    } else {
        console.log(xhr.status, xhr.statusText)
    }
	
}

客户端传递参数的四种方式

GET请求的query参数
POST请求x-www-form-urlencoded格式
POST请求FormData格式
POST请求JSON格式

<script>
  //方式1:get -> query
  xhr.open("get","http://123.2021.32.32/get?name=alugg&age=18")

  //方式2:post -> urlencoded
  xhr.open("post","23.2021.32.32/posturl")
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

  //方式3:post -> formdata
  xhr.open("post","23.2021.32.32/postformxx")
  const formData = new FormData(formEl)//formEL:表单Dom对象
  xhr.send(formData)

  //方式4:post -> json
  xhr.open("post","23.2021.32.32/postjson")
  xhr.setRequestHeader("Content-type", "application/json")
  xhr.send(JSON.stringify({name:"why", age:18, height:1.88}))
</script>

Ajax请求封装练习

function hyajax({
  url,
  method = "get",
  data = {},
  timeout = 10000,
  headers = {},
  success
} = {}) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()

    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status<300){
        resolve(xhr.response)
      } else {
        reject ({status:xhr.status, message: xhr.statusText})
      }
    }

    xhr.responseType = "json"

    if (method.toUpperCase() === "GET") {
      const queryStrings = []
      for (const key in data) {
        queryStrings.push(`{key}=${data[key]}`)
      }
      url = url + "?" + queryStrings.join("&")
      xhr.open(method, url)
      xhr.send()
    } else {
      xhr.open(method, url)
      xhr.setRequestHeader("Content-type", "application/json")
      xhr.send(JSON.stringify(data))
    }
  })
}

hyajax({
  url:"http://123123/hjoms/",
  method: "GET",
  data:{
    name:"xixi",
    age:18
  }
}).then(res => {
  console.log("res:", res);
}).catch(err => {
  console.log("err", err);
})

超时设置

1	xhr.timeout =3000

文件上传

XHR可以监控上传进度

Fetch不能

Fetch

可以看作是XHR的一种替代方案

返回值是一个Promise,请求成功时调用resolve回调then,请求失败,调用reject回调catch
不像XMLHttpRequest一样,所有操作都在一个对象上

//1.fetch发送get请求
async function getData() {
  const response = await fetch("xxurl")
  const res = await response.json()
  console.log("res", res);
}
//2.fetch发送Post
async function getData2(){
  const response = await fetch("urlxx", {
    method: "post",
    headers: {
      "Content-type":"application/json"
    },
    body: {
      name:"why",
      age: 18
    }
  })
  
  const res = await response.json()
  console.log(res);
}

Alugg's Blog

Frontend-Day19——Ajax

XHR