AJAX发送请求

◼ AJAX 是异步的JavaScript 和 XML（Asynchronous JavaScript And XML）
它可以使用JSON，XML，HTML 和text 文本等格式发送和接收数据；
◼ 如何来完成AJAX请求呢？
第一步：创建网络请求的AJAX对象（使用XMLHttpRequest）
第二步：监听XMLHttpRequest对象状态的变化，或者监听onload事件（请求完成时触发）；
第三步：配置网络请求（通过open方法）；
第四步：发送send网络请求；

     //1.新建XMLHttpRequest实例对象
  const XHR = new XMLHttpRequest()
  //2.监听状态的改变(宏任务)
  XHR.onreadystatechange = function(){
    // console.log(XHR.response)
    //2.1 如果我们的状态不是DONE状态直接返回

    if(XHR.readyState !== XMLHttpRequest.DONE){return}
    // 将字符串转成JSON对象
    const resJSON = JSON.parse(XHR.response)
    const banners = resJSON.data.banner
    // console.log(resJSON)
    console.log(banners)
  }
  //3.配置请求
  /*
    1.method:请求方式(get/post/delete/put/patch...)
    2.url:请求的地址
  */
  XHR.open("get","http://123.207.32.32:8000/home/multidata")
  //4.发送请求("浏览器帮助我们发送请求")
  XHR.send()

XMLHttpRequest的state（状态）

  //1.新建XMLHttpRequest对象
  const XHR = new XMLHttpRequest()
  //2.监听状态的改变(宏任务)
  XHR.onreadystatechange = function(){
    //2.1 如果我们的状态不是DONE状态直接返回
    if(XHR.readyState !== XMLHttpRequest.DONE){return}
    // 2.2 确认拿到了数据
    // console.log(XHR.response)
    //2.3将拿到的字符串数据转化为对象
    const resJSON = JSON.parse(XHR.response)
    const lists = resJSON.data.banner.list
    console.log(resJSON)
    console.log(lists)
  }
  //3.配置请求
  /*
    1.method:请求方式(get/post/delete/put/patch...)
    2.url:请求的地址
    3.是否是异步的 true/异步,false/同步,默认是异步的
  */
  // 实际开发要使用异步请求:不会阻塞后续代码的运行
  XHR.open("get","http://123.207.32.32:8000/home/multidata",false)
  //4.发送请求("浏览器帮助我们发送请求")
  XHR.send()
  // 同步必须等待拿到结果执行
  // console.log(XHR.response)
  console.log("--------------")
  console.log("++++++++++++++")
  console.log("**************")

XMLHttpRequest其他事件监听

◼ 除了onreadystatechange还有其他的事件可以监听
loadstart：请求开始。
progress：一个响应数据包到达，此时整个response body 都在response 中。
abort：调用 xhr.abort() 取消了请求。
error：发生连接错误，例如，域错误。不会发生诸如404 这类的HTTP 错误。
load：请求成功完成。
timeout：由于请求超时而取消了该请求（仅发生在设置了timeout 的情况下）。
loadend：在 load，error，timeout 或 abort 之后触发。
◼ 我们也可以使用load来获取数据：
// 使用onload请求数据
XML.onload =function(){
const resJSON = JSON.parse(XML.response)
const lists =resJSON.data.banner.list
console.log(lists)
}

响应数据和响应类型

◼ 发送了请求后，我们需要获取对应的结果：response属性
XMLHttpRequest response 属性返回响应的正文内容；
返回的类型取决于responseType的属性设置；
◼ 通过responseType可以设置获取数据的类型
如果将responseType 的值设置为空字符串，则会使用text作为默认值。
◼ 和responseText、responseXML的区别：
早期通常服务器返回的数据是普通的文本和XML，所以我们通常会通过responseText、responseXML来获取响应结果；
之后将它们转化成JavaScript对象形式；
目前服务器基本返回的都是json数据，直接设置为json即可；

     const XML= new XMLHttpRequest()
  XML.onload =function(){
    // 获取响应数据
    console.log(XML.response)
    // console.log(XML.responseText)
  }
  // 3.告知XHR获取到的数据的类型
    XML.responseType="json"
  //3.配置请求数据
  // XML.open("get","http://123.207.32.32:8000/home/multidata")//-->json
  XML.open("get","http://123.207.32.32:1888/01_basic/hello_json")//-->json
    // XML.open("get","http://123.207.32.32:1888/01_basic/hello_text")//-->text
    // XML.open("get","http://123.207.32.32:1888/01_basic/hello_xml")//-->xml
  //4.发送请求
  XML.send()

HTTP响应的状态status

◼XMLHttpRequest的state是用于记录xhr对象本身的状态变化，并非针对于HTTP的网络请求状态。
◼如果我们希望获取HTTP响应的网络状态，可以通过status和statusText来获取：
const xhr = new XMLHttpRequest()
xhr.onload =function(){
console.log(xhr.response)
console.log(xhr.status)//200
console.log(xhr.statusText)//OK
}
xhr.responseType = "json"
xhr.open("get","http://123.207.32.32:1888/01_basic/hello_json")
xhr.send()

 const xhr = new XMLHttpRequest()
  xhr.onload =function(){
    console.log(xhr.response)
    // 根据状态码判断请求是否成功
    if(xhr.status >=200 && xhr.status<300){
      console.log(xhr.response)
    }else{
      console.log(xhr.status)//200
      console.log(xhr.statusText)//OK
    }
    
  }
  // xhr.onerror =function(){
  //   console.log("error",xhr.status,xhr.statusText)
  // }
  xhr.responseType = "json"
  xhr.open("get","http://123.207.32.32:8000/home/hello_json")
  // xhr.open("get","http://123.207.32.32:8000/home/multidata")
  xhr.send()

GET/POST请求传递参数

◼ 在开发中，我们使用最多的是GET和POST请求，在发送请求的过程中，我们也可以传递给服务器数据。
◼ 常见的传递给服务器数据的方式有如下几种：
方式一：GET请求的query参数
方式二：POST请求x-www-form-urlencoded 格式
方式三：POST请求FormData格式
方式四：POST请求JSON 格式

```

延迟时间timeout和取消请求

◼ 在网络请求的过程中，为了避免过长的时间服务器无法返回数据，通常我们会为请求设置一个超时时间：timeout。
当达到超时时间后依然没有获取到数据，那么这个请求会自动被取消掉；
默认值为0，表示没有设置超时时间；
◼ 我们也可以通过abort方法强制取消请求

<button>取消请求</button>
<script>
  const btnEl = document.querySelector("button")
  const xhr = new XMLHttpRequest()
  xhr.onload = function(){
    console.log(xhr.response)
  }
  // 监听取消
  xhr.onabort=function(){
    console.log("请求被取消了")
  }
  xhr.responseType="json"
  // 浏览器达到过期时间还没拿到对应的结果,取消本次请求
  // 过期时间设置
  xhr.timeout=10000
  xhr.ontimeout=function(){
    console.log("请求过期:timeout")
  }
  xhr.open("get","http://123.207.32.32:1888/01_basic/timeout")
  xhr.send()

  // 手动取消结果
  btnEl.onclick =function(){
    xhr.abort()
  }

posted @ 2024-10-23 20:40 韩德才阅读(119) 评论(0) 收藏举报

刷新页面返回顶部

hdc-web

AJAX发送请求