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.listconsole.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.listconsole.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")//-->jsonXML.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)//200console.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)//200console.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 格式
