XMLHttpRequest以及Promise对象的使用

AJAX原理

通过[XHR]XMLHttpRequest对象来和服务器进行交互，axios库的底层也是通过XMLHttpRequest来和服务器进行交互，只是将实现细节进行了封装，让操作更加简洁

可以用于某些只需和服务器进行少次交互的静态网站进行使用，减少代码的体积

如何使用XMLHttpRequest

创建对象
配置请求方法和url地址–对象.open('请求方法','请求url地址')
监听loadend事件–即为该对象绑定loadend事件，通过回调函数接收响应结果
通过对象.send()来发起请求

通过获取省份来进行这个对象的使用

/*** 目标：使用XMLHttpRequest对象与服务器通信*  1. 创建 XMLHttpRequest 对象*  2. 配置请求方法和请求 url 地址*  3. 监听 loadend 事件，接收响应结果*  4. 发起请求*///创建对象const xhr = new XMLHttpRequest();//通过open方法配置请求方法和请求url地址xhr.open('GET', 'http://hmajax.itheima.net/api/province');//为该对象绑定loadend事件xhr.addEventListener('loadend', () => {//获取响应结果console.log(xhr.response);//由于返回的结果为json格式的数据，所以需要转换为对象格式的数据const data = JSON.parse(xhr.response);console.log(data.list.join('<br>'));document.querySelector('.province').innerHTML = data.list.join('<br>');})//发起一次请求xhr.send();

XMLHttpRequest如何添加查询参数

在地址后面加上?变量名=变量值&变量名=变量值...

地区查询

步骤

为查询按钮绑定点击事件
获取省份名字和城市名字
创建XMLHttpRequest对象并发起请求
将获取的地区列表进行map()方法的调用,将每个元素变为一个li标签，并通过join()方法实现拼接变成字符串
获取要插入标签，并将字符串插入其中

代码：

 /*** 目标: 根据省份和城市名字, 查询对应的地区列表*///为查询按钮绑定点击事件document.querySelector('.btn-primary').addEventListener('click', () => {//获取省份名字和城市名字const provincedata = document.querySelector('.province').value;const citydata = document.querySelector('.city').value;// console.log(provincedata);// console.log(citydata);//创建XMLHttpRequest对象并发起请求const xhrwhere = new XMLHttpRequest();xhrwhere.open('GET', `http://hmajax.itheima.net/api/area?pname=${provincedata}&cname=${citydata}`);xhrwhere.addEventListener('loadend', () => {// console.log(xhrwhere.response);console.log(JSON.parse(xhrwhere.response).list);//将获取的地区列表进行map()方法的调用,将每个元素变为一个li标签，并通过join()方法实现拼接变成字符串const wherestr = JSON.parse(xhrwhere.response).list.map(function (ele) {return `<li class="list-group-item">${ele}</li>`}).join('');//获取要插入标签document.querySelector('.list-group').innerHTML = wherestr;})xhrwhere.send();})

如何发起请求的同时进行数据提交

首先得设置请求头，表明要传输数据的格式 setRequestHeader

在发起请求的时候要同时将要传的数据通过参数进行传输 send(data)

小知识：将对象转为JSON字符串格式

const str = JSON.stringify(obj);

数据提交案例之注册用户

步骤：

为注册按钮绑定点击事件
创建xhr对象
带上请求方法和地址
为xhr绑定loadend事件，并通过回调函数接收响应结果
配置请求头，如传输数据格式
发送请求并携带要提交的数据

代码：

 /*** 目标：使用xhr进行数据提交-完成注册功能*///为注册按钮绑定点击事件document.querySelector('.reg-btn').addEventListener('click', () => {//创建xhr对象const xhr = new XMLHttpRequest();//带上请求方法和地址xhr.open('POST', 'http://hmajax.itheima.net/api/register');//为xhr对象绑定loadend事件，以便返回响应结果xhr.addEventListener('loadend', () => {//获取响应结果console.log(xhr.response);})//配置请求头信息 -- 由于要传数据给服务器xhr.setRequestHeader('Content-Type', 'application/json');//设置请求体数据const user = {username: "lhwoaini",password: "1234567"};//将数据转换为json格式const userStr = JSON.stringify(user);//发送请求并携带json格式数据xhr.send(userStr);})

认识Pormise

一个对象，用于表示一个异步操作的最终完成或失败及其结果值

作用

成功和失败程序，可以关联对应处理程序
了解axios内部原理

如何使用

创建一个Promise对象
在构造函数中调用resolve和reject函数
在Promise对象的回调函数中进行异步操作，并通过判断来执行对应resolve还是reject函数
分别进行已兑现和已拒绝状态进行不同的关联处理then(result => {}) catch(error => {})

注册用户成功与否来印证Promise对象的作用

步骤

为注册按钮绑定点击事件
创建Promise对象
创建xhr对象
带上请求方法和地址
为xhr对象绑定loadend事件，以便返回响应结果
由于响应结果为JSON格式的字符串，无法进行判断，因此进行数据类型替换
对响应结果进行判断，以此来判断调用哪个函数 – reslove or reject
配置请求头信息 – 要传数据给服务器，由于响应结果为JSON格式的字符串，无法进行判断，因此进行数据类型替换
将数据转换为json格式
分别调用then和catch进行关联状态的函数

/*** 目标：使用xhr进行数据提交-完成注册功能*///为注册按钮绑定点击事件document.querySelector('.reg-btn').addEventListener('click', () => {//创建Promise对象const p = new Promise((resolve, reject) => {//创建xhr对象const xhr = new XMLHttpRequest();//带上请求方法和地址xhr.open('POST', 'http://hmajax.itheima.net/api/register');//为xhr对象绑定loadend事件，以便返回响应结果xhr.addEventListener('loadend', () => {//获取响应结果console.log(xhr.response);//由于响应结果为JSON格式的字符串，无法进行判断，因此进行数据类型替换const reData = JSON.parse(xhr.response);console.log(reData);//对响应结果进行判断if (reData.code == 10000) {resolve('成功注册');} else {reject('因为各种原因注册失败了');}})//配置请求头信息 -- 由于要传数据给服务器xhr.setRequestHeader('Content-Type', 'application/json');//设置请求体数据const user = {username: "lhwoain1111",password: "1234567"};//将数据转换为json格式const userStr = JSON.stringify(user);//发送请求并携带json格式数据xhr.send(userStr);})//分别调用then和catch进行关联状态的函数p.then(result => {console.log(result);}).catch(error => {console.log(error);})})

案例之是否成功获取省份列表

代码:

 /*** 目标：使用Promise管理XHR请求省份列表*  1. 创建Promise对象*  2. 执行XHR异步代码，获取省份列表*  3. 关联成功或失败函数，做后续处理*///创建Promise对象const p = new Promise((resolve, reject) => {//创建xhr对象const xhr = new XMLHttpRequest();//配置地址以及请求方法xhr.open('GET', 'http://hmajax.itheima.net/api/province');//绑定loadend事件，并返回响应结果xhr.addEventListener('loadend', () => {console.log(xhr.response);//将JSON格式的字符串转换为对象，并获取省份列表const datalist = JSON.parse(xhr.response);console.log(datalist.list);//获取要写入标签并写入document.querySelector('.my-p').innerHTML = datalist.list.join('<br>')//判断是否获取省份成功，并调用对应函数if (datalist.message === '获取省份成功') {resolve('成功了')} else {reject('因为不知名原因出错哩')}})//发起请求xhr.send();})//为p的两种状态分别配置两种不同的处理函数p.then(result => {alert(result);}).catch(error => {//大多数报错不用让用户显性知道内容console.log(error);})