AJAX发送请求

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 格式

``` 
 <body>

  //<form class="info">
   // <input type="text" name="username">
  //  <input type="password" name="password">
  //</form>
  <button class="send">发送请求</button>
  
  <script>
    const formEl = document.querySelector(".info")
    const sendBtn = document.querySelector(".send")
    sendBtn.onclick = function() {
      // 创建xhr对象
      const xhr = new XMLHttpRequest()

      // 监听数据响应
      xhr.onload = function() {
        console.log(xhr.response)
      }

      // 配置请求
      xhr.responseType = "json"

      // 1.传递参数方式一: get -> query
      // xhr.open("get", "http://123.207.32.32:1888/02_param/get?name=why&age=18&address=广州市")

      // 2.传递参数方式二: post -> urlencoded
      // xhr.open("post", "http://123.207.32.32:1888/02_param/posturl")
      // // 发送请求(请求体body)
      // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
      // xhr.send("name=why&age=18&address=广州市")

      // 3.传递参数方式三: post -> formdata
      // xhr.open("post", "http://123.207.32.32:1888/02_param/postform")
      // // formElement对象转成FormData对象
      // const formData = new FormData(formEl)
      // xhr.send(formData)

      // 4.传递参数方式四: post -> json
      xhr.open("post", "http://123.207.32.32:1888/02_param/postjson")
      xhr.setRequestHeader("Content-type", "application/json")
      xhr.send(JSON.stringify({name: "why", age: 18, height: 1.88}))
    }
    
  </script>

```

延迟时间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()
  }