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