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);
})
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);
})
原文地址：https://blog.csdn.net/wozhaonue_w/article/details/143652254
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！