前言：
如今姐妹们对“ajax方法怎样创数组”可能比较关怀，朋友们都想要分析一些“ajax方法怎样创数组”的相关内容。那么小编在网摘上汇集了一些关于“ajax方法怎样创数组””的相关文章，希望大家能喜欢，小伙伴们快快来学习一下吧！AJAX学习笔记
在现代的Web开发中，AJAX（Asynchronous JavaScript and XML）已经成为不可或缺的一部分。它使我们能够在不刷新整个页面的情况下与服务器进行通信，为用户提供更流畅的体验。然而，要真正掌握AJAX，我们需要了解JavaScript中的同步与异步编程、Promise对象以及如何使用强大的axios库来简化AJAX请求。在这篇推文中，我们将深入探讨这些概念，帮助你更好地理解和利用AJAX的潜力。让我们开始这段AJAX之旅吧！
概念：
定义：AJAX是异步的JavaScript与XML，使用XMLHttpRequest对象与服务器通信；
一、axios的使用：
Axios是一个基于promise构建的一个网络请求库，可以用于浏览器和node.js
1.引入axios.js
<script src=";></script>2.使用axios函数
（1）传入配置对象
（2）使用.then回调函数接收结果，并做后续处理
axios({ url:'目标资源地址'}).then(result=>{ // 对服务器返回的数据做后续处理})3.案例:获取API中的省份列表，并在段落中显示出来；<!doctype html><html lang="zh-cmn-Hans"><head> <meta charset="utf-8"><link rel="icon" href="./img/favicon.ico"> <title>axios使用</title> <script src=";></script></head><body> <p class="my-p"></p></body><script> axios({ url:'; }).then(result=>{ // 对服务器返回的数据做后续处理 console.log(result.data.list.join('<br>')); // 把准备好的省份列表插入到页面 document.querySelector('.my-p').innerHTML = result.data.list.join('<br>'); })</script></html>二、URL统一资源定位符1.URL的概念url是什么？URL是统一资源定位符，用于访问服务器上的资源；结构由协议、域名、资源路径组成；
2.URL查询参数
url参数查询语法：
?参数名1=值1&参数名2=值23.axios查询参数
使用axios提供的params选项：
axios({ url:'目标资源地址', params:{ 参数名:值 }}).then(result=>{ // 对服务器返回的数据做后续处理})实际上axios在运行时会把params中的内容自动拼接到url?参数名=值上面；
4.案例：地区查询
在ES6中如果属性名和变量同名，可以只写一个；
通过省份和城市名查询该城市的所有区县；
document.querySelector('.sel-btn').addEventListener('click',() => { let pname = document.querySelector('.province').value; let cname = document.querySelector('.city').value; // 基于axios获取服务器数据 axios({ url: ";, params: { pname, cname } }).then(result => { let list = result.data.list; // 利用map函数将list映射到新的列表中theLi中 let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('') console.log(theLi); //将结果插入到元素中显示出来 document.querySelector('.list-group').innerHTML = theLi; })})5.常用的请求方法axios配置请求方法怎么写？
GET方法是默认的可以省略，在参数列表中，如果是get方法则用params,如果是post方法则用data；
axios({ url:'目标资源地址', method:'请求方法', params:{ 参数名:值 }}).then(result=>{ // 对服务器返回的数据做后续处理})6.axios错误处理在axios请求错误时，通过调用catch方法传入回调函数并定义形参；例如在用户注册失败时，通过弹窗提示用户错误原因。
axios({ // 请求选项}).then(result=>{ // 对服务器返回的数据做后续处理}).catch(error=>{ // 处理错误})三、http协议1.请求报文Http协议：规定了浏览器发送以及服务器返回内容的格式；
请求报文：浏览器按照Http协议要求的格式，发送给服务器的内容
请求报文的组成部分有：
请求行：请求方法、URL、协议请求头：以键值对的格式携带附加的信息空行：分隔请求头，空行之后是发送给服务器的资源、请求体：发送的资源
在浏览器中怎么查看请求报文：
在浏览器的浏览器开发者工具的网络面板中，选择Fetch/XHR中查看，
请求行和请求头在标头选项中，请求体在载荷选项中；
在故障排查时可以查看请求报文的请求体内容是否正确；
2.响应报文
响应报文的组成部分有:
响应行（状态行）：协议、HTTP响应状态码、状态信息响应头：以键值对的格式携带附加信息，比如：Content-Type空行：分隔响应头，空行之后是服务器返回的资源响应体：返回的资源
HTTP响应状态码：用来表明请求是否成功，主要含义如下：
四.接口文档案例
根据后端的接口文档，前端使用ajax进行调用；
示例API文档：
1.案例-用户登录点击登录时，判断用户名和密码长度；提交数据和服务器通信提示消息
// 点击登录时，用户名和密码长度判断，并提交数据和服务器通信// 定义一个函数用于显示提示框function showAlert(msg, isSuccess) {const alert = document.querySelector(".alert");let alertStyle = isSuccess ? "alert-success" : "alert-danger";alert.innerHTML = msg;alert.classList.add("show");alert.classList.add(alertStyle);// 设置一个定时器3s后隐藏提示框setTimeout(() => {alert.classList.remove("show");alert.classList.remove(alertStyle);}, 3000);}// 登录点击事件document.querySelector(".btn-login").addEventListener("click", function () {// 获取用户名和密码const username = document.querySelector(".username").value;const password = document.querySelector(".password").value;// 对长度做判断if (username.length < 8) {console.log("用户名长度不能低于8");showAlert("用户名长度不能低于8", false);return;}if (password.length < 6) {console.log("密码长度不能低于6");showAlert("密码长度不能低于6", false);return;}axios({method: "post",url: ";,data: { username, password,},}).then((result) => { console.log(result.data.message); showAlert(result.data.message, true);}).catch((error) => { console.log(error.response.data.message); showAlert(error.response.data.message, false);});});2.form-serialize插件使用form-serialize插件快速收集表单元素的值，获取结果的键值对，根据表单元素中的name属性获取键；
语法：
const data = serialize(form, {hash: true, empty:true})/** * 使用serialize函数，快速收集表单元素的值 * 参数1：要获取的表单名称； * 参数2：配置对象 * hash:设置获取数据结构 * - false:获取到的是url查询字符串 * - true:获取到的是JS对象 * empty:设置是否获取空值 * - false: 不获取空值 * - true: 可以获取到空值*/使用方法：
引入插件，调用serialize方法获取到表单元素的值，表单元素的name属性会成为返回对象的属性名；
将上面用户登录的案例利用form-serialize插件获取表单的值，下面是实际的写法：
// 点击登录时，用户名和密码长度判断，并提交数据和服务器通信// 定义一个函数用于显示提示框function showAlert(msg, isSuccess) {const alert = document.querySelector(".alert");let alertStyle = isSuccess ? "alert-success" : "alert-danger";alert.innerHTML = msg;alert.classList.add("show");alert.classList.add(alertStyle);// 设置一个定时器3s后隐藏提示框setTimeout(() => {alert.classList.remove("show");alert.classList.remove(alertStyle);}, 3000);}// 登录点击事件document.querySelector(".btn-login").addEventListener("click", function () {// 使用form-serialize插件const form = document.querySelector(".form-example");const data = serialize(form, { hash: true, empty: true });// 使用解构赋值的方式获取对象中用户名和密码const { username, password } = data;// 对长度做判断if (username.length < 8) {console.log("用户名长度不能低于8");showAlert("用户名长度不能低于8", false);return;}if (password.length < 6) {console.log("密码长度不能低于6");showAlert("密码长度不能低于6", false);return;}axios({method: "post",url: ";,data: { username, password,},}).then((result) => { console.log(result.data.message); showAlert(result.data.message, true);}).catch((error) => { console.log(error.response.data.message); showAlert(error.response.data.message, false);});});3.Bootstrap弹框功能：不离开当前页面，显示单独内容，供用户操作；调用弹窗可以通过两种方式：属性控制和JS控制；
使用方法：
（1）引入bootstrap.css与bootstrap.js
（2）给启动弹框的组件添加bootstrap属性，显示弹框需要两个属性，分别是data-bs-toggle和data-bs-target
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".my-box">显示弹框</button>
（3）通过自定义属性，控制弹框的显示和隐藏，隐藏弹框需要设置属性data-bs-dismiss="modal"
通过属性控制弹窗的显示和隐藏具体写法如下：
<div class="container mt-3"> <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".my-box">显示弹框</button> <!-- 弹框标签 --> <div class="modal my-box" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">请输入姓名</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <span>姓名</span> <input type="text" class="form-contorl" placeholder="默认姓名"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> 取消 </button> <button type="button" class="btn btn-primary"> 保存 </button> </div> </div> </div> </div></div>
通过JS控制，显示或隐藏弹框：
// 创建弹框对象const modalDom = document.querySelector('.my-box');const modal = new bootstrap.Modal(modalDom);// 显示弹框modal.show();// 隐藏弹框modal.hide();4.案例：图书管理管理系统获取图书列表的的API地址
a.获取内容并渲染到网页上
这里重点需要掌握的技巧是使用map将列表对象中的元素映射到html元素中,并进行字符串拼接的过程。map函数可以传入三个参数(element、index、array)，具体用法可见：
window.addEventListener('load',()=>{ const creator = '小雨'; // 封装一个函数，获取并渲染图书列表 function getBookList(){ axios({ url: ';, params: { creator, } }).then(result => { const bookList = result.data.data; console.log(bookList); const bookItemHtml = bookList.map((item,index) => { return `<tr> <td>${index + 1}</td> <td>${item.bookname}</td> <td>${item.author}</td> <td>${item.publisher}</td> <td> <span class="del">删除</span> <span class="edit">编辑</span> </td> </tr>` }).join(''); document.querySelector('.list').innerHTML = bookItemHtml; }) } // 执行函数 getBookList()})b.添加图书信息// 目标2：添加图书信息 // 获取弹窗信息const addModalDom = document.querySelector('.add-modal');const addModal = new bootstrap.Modal(addModalDom);document.querySelector('.add-btn').addEventListener('click',()=>{ // 获取表单信息 const bookItemForm = document.querySelector('.add-form'); const bookItem = serialize(bookItemForm,{hash:true,empty:true}); // 提交表单信息 axios({ url: ';, method: 'post', data:{ // 这里的...是对象展开运算符 ...bookItem, // 这里的creator是一个全局变量 creator } }).then(result => { // 添加成功后请求重新渲染页面 getBookList(); // 重置表单，防止点击添加按钮后，上一次添加的内容还在 bookItemForm.reset(); // 隐藏弹框 addModal.hide(); })});c.删除图书信息思路：
a.绑定点击事件获取图书id
b.调用删除接口
c.刷新图书列表
由于每一行图书信息是动态生成的，如果给每一行图书的删除按钮添加点击事件，则需要委托其父级元素设置点击事件。再定义一个判断条件如果点击的元素中含有del类，则获取其父元素的id。
在渲染图书列表时就给删除按钮的父级元素创建一个自定义属性data-id，在点击事件中，查询父元素的id属性即可通过AJAX删除指定ID的元素列表；
在接口文档中看到需要提供PATH参数，这是一种新的传参方式（路径传参）
将URL改为模板字符串即可。
// 目标3：删除图书信息document.querySelector('.list').addEventListener('click',function(e) { if(e.target.classList.contains('del')){ // 获取图书id const id = e.target.parentNode.dataset.id; console.log(id); // 调用删除接口 axios({ method: 'delete', url: `{id}`, }).then(result =>{ // 刷新图书列表 getBookList(); }); }})d.编辑图书信息实现该功能主要需要完成以下部分的内容：
编辑弹窗的显示和隐藏；
获取当前图书的ID并通过查询接口获取图书信息填充到弹窗中；
点击提交按钮时，提交表单中的内容到后台，并重新渲染前端页面内容；
// 目标4：编辑图书信息// 获取编辑弹窗信息const editModalDom = document.querySelector('.edit-modal');const editModal = new bootstrap.Modal(editModalDom);document.querySelector('.list').addEventListener('click',function(e){ if(e.target.classList.contains('edit')){ // 点击编辑按钮打开弹框 editModal.show(); // 获取图书id const theId = e.target.parentNode.dataset.id; // 获取图书详情信息 axios({ url: `{theId}`, }).then(result => { const bookObj = result.data.data; const keys = Object.keys(bookObj); console.log(keys); keys.forEach(key => { document.querySelector(`.edit-form .${key}`).value = bookObj[key]; }); }); }})// 点击修改按钮后保存数据提交到服务器document.querySelector('.edit-btn').addEventListener('click',function(){ // 获取编辑表单信息 const editForm = document.querySelector('.edit-form'); // 保存修改后的表单内容 const {id,bookname,author,publisher} = serialize(editForm,{hash:true,empty:true}); // 将表单中的内容提交到服务器 axios({ method: 'put', url: `{id}`, data: { id, bookname, author, publisher, creator } }).then(() => { // 刷新页面 getBookList(); // 隐藏弹窗 editModal.hide(); });})5.案例：图片上传图片上传的思路：
（1）获取图片文件对象
给input标签添加一个change事件；
（2）使用FormData携带图片文件
const fd = new FormData()fd.append(参数名,值)
（3）提交表单数据到服务器
通过ajax将图片提交到服务器，并拿到后端返回的图片URL；
document.querySelector('.upload').addEventListener('change',(e)=>{ // 获取图片文件 console.log(e.target.files[0]); // 使用FormData携带图片文件 const fd = new FormData(); fd.append('img',e.target.files[0]) // 提交到服务器 axios({ url: ';, method: 'POST', data: fd }).then(result => { console.log(result.data.data); const imgurl = result.data.data.url; document.querySelector('.my-img').src = imgurl; })})6.案例：更换网站背景实现一个案例，点击按钮上传图片，并替换网页背景，页面刷新后依然不变；
思路：
设置一个file类型的input标签，选中本地图片后，添加一个change事件，将图片以FormData的方式通过Ajax提交到后端服务器；获取后端返回的url,给body标签赋予backgroundImage属性，从而实现背景图片的更换；上传成功后保存url到本地存储localStorage.setItem(key,value)；
window.addEventListener('load',() => { // 逻辑 document.querySelector('.bg-ipt').addEventListener('change',e => { console.log(e.target.files[0]); const fd = new FormData(); fd.append('img',e.target.files[0]) // 通过Ajax将图片传给后端服务器 axios({ method: 'POST', url:';, data: fd, }).then(result => { console.log(result); const imgURL = result.data.data.url; console.log(imgURL); document.querySelector('body').style.backgroundImage = `url(${imgURL})`; // 将URL存到本地 localStorage.setItem('backImg',imgURL); }) }) // 网页运行后获取url地址 const bgUrl = localStorage.getItem('backImg'); bgUrl && (document.querySelector('body').style.backgroundImage = `url(${bgUrl})`);})7.案例：个人信息设置实现效果：
该案例可以分为四个主要步骤：
a.信息渲染
const creator = "xiaoyu";function getProfile() { axios({ url: ';, params:{ creator } }).then(result => { // 获取个人信息 const profile = result.data.data; // 遍历个人信息属性并显示到页面中 Object.keys(profile).forEach(key => { // 对于性别和头像需要特殊处理 if(key === 'avatar'){ document.querySelector('.prew').src = profile.avatar; }else if(key === 'gender'){ const genderList = document.querySelectorAll('.gender'); genderList[profile.gender].checked = true; }else{ document.querySelector(`.${key}`).value = profile[key]; } }); });}b.头像修改在做的这一步的时候，总是提交出错，原因是没有看清api文档中的参数要求
需要在整个FormData对象里append两个对象avatar和creator；
document.querySelector('.upload').addEventListener('change',(e) => { const fd = new FormData(); fd.append('avatar',e.target.files[0]); fd.append('creator',creator); axios({ url: ";, method: "PUT", data:fd, }).then(result => { document.querySelector('.prew').src = result.data.data.avatar; });});c.提交表单这里需要注意给要提交的的对象添加一个属性，以及将字符串型的“0”转为整型的“0”
document.querySelector('.submit').addEventListener('click',() => { const form = document.querySelector('.user-form'); const newProfile = serialize(form,{hash:true,empty:true}); // 对象可以通过赋值的方式添加属性 newProfile.creator = creator; // 将字符串型的“0”转为整型的“0” newProfile.gender = +newProfile.gender; axios({ url: ';, method: 'put', data:{ ...newProfile, } }).then(result => { console.log(result); });});d.结果提示这里需要将提交成功的toast显示出来，如何使用Bootstrap显示提示框呢？
<div class="toast" data-bs-delay="1500"> 提示框内容</div>
const toastDom = document.querySelector('css选择器');// 创建提示框对象const toast = new bootstrap.Toast(toastDom);// 显示提示框toast.show()实际写法：
<!-- toast提示框 --><div class="toast my-toast" data-bs-delay="1500"> <div class="toast-body"> <div class="alert alert-success info-box"> 操作成功 </div> </div></div>
const toastDom = this.document.querySelector('.my-toast');const toast = new bootstrap.Toast(toastDom);toast.show()五、XMLHttpRequest定义：XMLHttpRequest（XHR）对象用于与服务器交互，通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据，这允许网页在不影响用户操作的情况下，更新页面的布局内容。在AJAX编程中被大量使用；
使用XMLHttpRequest的方法：
// 创建xhr对象const xhr = new XMLHttpRequest()xhr.open('请求方法','url网址')xhr.addEventListener('loadend',() => { // 输出响应结果 console.log(xhr.response)})// 正式发送请求xhr.send()使用axios返回的结果是对象，而原生的XHR返回的是JSON字符串，如果需要将JSON字符串转化为对象可以使用JSON.parse()的方式；
XHR如果需要携带查询参数则直接在URL里设置；
1. 案例：使用XHR获取并展示所有省份的名字
document.querySelector('.my-btn').addEventListener('click',() => { const xhr = new XMLHttpRequest(); xhr.open('get',';); xhr.addEventListener('loadend',() =>{ const data = JSON.parse(xhr.response); console.log(xhr.response); document.querySelector('.res').innerHTML = data.list.join('</br>'); }); xhr.send();})2.案例：使用XHR获取并展示制定城市的地区列表知识拓展：对于多参数查询字符串，是可以根据对象名生成的。
// 创建URLSearchParams对象const paramsObj = new URLSearchParams({ 参数名1:值1, 参数名2:值2})// 生成指定格式的查询字符串const queryString = paramsObj.toString()// 结果：参数名1=值1&参数名2=值2document.querySelector('.my-btn').addEventListener('click',() => { const formDom = document.querySelector('.user-form'); const form = serialize(formDom,{hash:true,empty:true}); const pname = form.province; const cname = form.city; // 获取xhr查询参数 const paramsObj = new URLSearchParams({ pname:pname, cname:cname } ); const queryURL = paramsObj.toString(); const xhr = new XMLHttpRequest(); xhr.open('get',`{queryURL}`); xhr.addEventListener('loadend',()=>{ // JSON.parse()将JSON字符串转为JS对象 const resObj = JSON.parse(xhr.response); const resItem = resObj.list.map(function (areaName) { return `<li class="list-group-item">${areaName}</li>` }).join(''); console.log(resItem); document.querySelector('.list-group-item').innerHTML = resItem; }); xhr.send();})3.案例：使用XHR完成数据提交的功能使用方法：
// 告诉服务器需要传递的内容类型是JSON字符串xhr.setRequestHeader('Content-Type','application/json')// JSON.stringify将JS对象转为JSON字符串const user = {key1:value1,key2:value2};const userStr = JSON.stringify(user);// 发送请求体数据xhr.send(userStr)实际用法：
document.querySelector('.my-btn').addEventListener('click',() => { const formDom = document.querySelector('.user-form'); const form = serialize(formDom,{hash:true,empty:true}); const pname = form.province; const cname = form.city; // 获取xhr查询参数 const paramsObj = new URLSearchParams({ pname:pname, cname:cname } ); const queryURL = paramsObj.toString(); const xhr = new XMLHttpRequest(); xhr.open('get',`{queryURL}`); xhr.addEventListener('loadend',()=>{ const resItem = JSON.parse(xhr.response).list.map(function (areaName) { return `<li class="list-group-item">${areaName}</li>` }).join(''); console.log(resItem); document.querySelector('.list-group-item').innerHTML = resItem; }); xhr.send();})六、Promise对象定义：Promise对象用于表示一个异步操作的最终结果值；
使用Promise的好处：
可以链式调用
用法：
// 1.创建Promise对象const p = new Promise((resove,reject) => { // 2.执行异步任务，并传递结果 setTimeout(() => { // resove('模拟成功结果'); // reject(new Error('模拟失败结果')) },2000);})p.then(result => { // 成功 console.log(result);}).catch(error => { // 失败 console.log(error);})1. Promise的三种状态2.案例：使用Promise+XHR获取省份列表需求：使用Promise管理XHR获取省份列表，并展示到页面上
实现：
// 1.创建Promise对象const p = new Promise((resolve,reject) => { // 2.执行XHR异步代码，获得省份列表 const xhr = new XMLHttpRequest(); xhr.open('get',';); xhr.addEventListener('loadend',() => { // 根据XHR返回的结果，转为对象分别给resolve和reject函数作为参数传进去 if(xhr.status >= 200 && xhr.status < 300){ resolve(JSON.parse(xhr.response)); }else{ reject(new Error(xhr.response)); } }); xhr.send();});// 3.关联成功或失败函数做后续处理,result和error为上面传入的参数对象p.then(result => { document.querySelector('.my-p').innerHTML = result.list.join('</br>');}).catch(error => { console.dir(error); document.querySelector('.my-p').innerHTML = error.message;})3.使用XHR与Promise封装自定义的axios案例1：实现获取省份列表需求：通过Promise和XHR实现对axios的自定义封装，完成返回省份列表的获取；
思路：
Step1：封装myAxios函数，传入config配置对象，返回Promise对象；
Step2：发起xhr请求，定义默认方法为get,定义接收URL参数；
Step3：定义成功或失败请求的处理程序，将传入结果对象
Step4：实际调用自封装的函数，检查效果
function myAxios(config) { // 1. 定义myAxios函数,接受配置对象，返回Promise对象 const p = new Promise((resolve,reject) => { // 2.发起xhr请求 const xhr = new XMLHttpRequest(); xhr.open(config.method || 'get',config.url); xhr.addEventListener('loadend',() => { // 3.判断响应结果 if(xhr.status >= 200 && xhr.status < 300){ return resolve(JSON.parse(xhr.response)); }else{ return reject(new Error(xhr.response)); } }); xhr.send(); }); return p; }// 4.调用自封装的my-axiosmyAxios({ url: ';,}).then(result => { document.querySelector('.my-p').innerHTML = result.list.join('</br>');}).catch(error => { document.querySelector('.my-p').innerHTML = error.message;})案例2：实现获取地区列表需求：修改myAxios函数，支持传递params参数，完成地区列表的查询
思路：需要考虑自定义的axios对传入的params参数的支持，可以借助URLSearchParams实现将params参数转为URL连接;
function myAxios(config) { // 1. 定义myAxios函数,接受配置对象，返回Promise对象 return new Promise((resolve,reject) => { // 2.对params进行处理,前提是有params参数 if(config.params){ const paramsObj = new URLSearchParams(config.params); const queryString = paramsObj.toString(); config.url += `?${queryString}`; } // 3.发起xhr请求 const xhr = new XMLHttpRequest(); xhr.open(config.method || 'get',config.url); xhr.addEventListener('loadend',() => { // 4.判断响应结果 if(xhr.status >= 200 && xhr.status < 300){ return resolve(JSON.parse(xhr.response)); }else{ return reject(new Error(xhr.response)); } }); xhr.send(); }); }案例3：实现注册用户功能需求：修改myAxios函数，支持传递请求体数据，完成用户注册功能；
思路：
Step1：myAxios函数调用后，判断data选项
Step2：转换数据类型，在send方法中发送
Step3：使用自己封装的myAxios完成用户注册功能
实现：
function myAxios(config) { // 1. 定义myAxios函数,接受配置对象，返回Promise对象 return new Promise((resolve,reject) => { // 2.对params进行处理,前提是有params参数 if(config.params){ const paramsObj = new URLSearchParams(config.params); const queryString = paramsObj.toString(); config.url += `?${queryString}`; } // 3.发起xhr请求 const xhr = new XMLHttpRequest(); xhr.open(config.method || 'get',config.url); xhr.addEventListener('loadend',() => { // 4.判断响应结果 if(xhr.status >= 200 && xhr.status < 300){ return resolve(JSON.parse(xhr.response)); }else{ return reject(new Error(xhr.response)); } }); // 对data进行处理 if(config.data){ const jsonString = JSON.stringify(config.data); xhr.setRequestHeader('Content-Type','application/json') xhr.send(jsonString); }else{ xhr.send(); } }); }document.querySelector('.my-btn').addEventListener('click',() => { // 5.调用自封装的my-axios myAxios({ url: ';, method: 'post', data: { username: 'xiaoyu1927', password: '7654321' } }).then(result => { console.log(result); alert(result.message); }).catch(error => { console.dir(error); alert(error.message); })})4.案例：天气预报步骤：
Step1：默认获取北京市天气数据，并展示；
这一步其实就是通过axios获取后端数据，并显示到html页面中，${}将网页中的元素替换为JS对象属性值，对于需要批量操作的内容，可以使用map进行映射操作；
Step2：搜索城市列表，展示；
同样是调用axios,需要给搜索框设置对input事件的监听
const searchInput = document.querySelector('.search-city');searchInput.addEventListener('input',() => { // 获取输入框中输入的内容 const searchName = searchInput.value; // 通过axios获取城市列表 myAxios({ url: ';, params:{ city:searchName, } }).then(result => { console.log(result); const cityList = result.data; const cityListStr = cityList.map(item => { return `<li class="city-item">${item.name}</li>`; }).join(''); document.querySelector('.search-list').innerHTML = cityListStr; });});Step3：点击城市，显示对应天气数据
对搜索到的城市列表添加一个点击事件，获取该城市的cityCode，调用前面的方法将结果渲染到页面中；
由于城市列表是动态生成的，如果需要绑定点击事件则需要通过事件委托(绑定父元素并通过e.target.classList.contains来获取元素)
在Step2中添加的城市列表city-item也要添加自定义属性data-code=${item.code}
return `<li class="city-item" data-code="${item.code}">${item.name}</li>`;document.querySelector('.search-list').addEventListener('click',(e) => { // 通过事件委托，判断点击的是否是城市item if(e.target.classList.contains('city-item')){ const cityCode = e.target.dataset.code; getWeather(cityCode) }})最终效果：
七、同步与异步
同步：逐行执行，需要原地等待结果后，才继续向下执行；
异步：不必等待任务完成，在将来完成后触发一个回调函数；
1.回调函数地狱问题：
概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱；
缺点：耦合性严重，异常无法捕获，可读性差；
通过一个案例，理解回调函数地狱问题：
//根据省名称获取城市名称，再根据省名称和城市名称获取地区名称，axios模拟回调函数地狱问题axios({url:';}).then(result => { const pname = result.data.list[0] document.querySelector('.province').innerHTML = pname; axios({url:';,params:{pname}}).then(result => { const cname = result.data.list[0]; document.querySelector('.city').innerHTML = cname; axios({url:';,params:{pname,cname}}).then(result =>{ const areaname = result.data.list[0]; document.querySelector('.area').innerHTML = areaname; }) })})这种嵌套问题，出现异常是无法捕获的；
2.Promise链式调用问题
依靠then()方法会返回一个新生成的Promise对象的特性，继续串联下一环任务，直到结束；
// 将省份变量pname定义为全局变量let pname = '';axios({url:';}).then(result => { pname = result.data.list[0]; document.querySelector('.province').innerHTML = pname; // 关键点是axios结尾返回一个新的Promise对象，这样就可以链式调用了 return axios({url:';,params:{pname}})}).then(result => { const cname = result.data.list[0]; document.querySelector('.city').innerHTML = cname; // 由于这里的pname是在兄弟作用域中，所以将pname定义为全局变量； return axios({url:';,params:{pname,cname}})}).then(result => { const area = result.data.list[0]; document.querySelector('.area').innerHTML = area;})3. 异步编程的终极解决方案-async、await使用async和await关键字后，可以更简洁的写出基于Promise的异步行为，不需要刻意地链式调用Promise；
//获取默认省市区async function getDefaultArea(){ const pObj = await axios({url:';}); const pname = pObj.data.list[0]; const cObj = await axios({url:';,params:{pname}}); const cname = cObj.data.list[0]; const aObj = await axios({url:';,params:{pname,cname}}); const aname = aObj.data.list[0]; // 赋予到页面上 document.querySelector('.province').innerHTML = pname; document.querySelector('.city').innerHTML = cname; document.querySelector('.area').innerHTML = aname;}getDefaultArea();async修饰函数名表明该函数为异步函数，await表明该任务为异步任务，会原地等待后续执行完毕后将结果返回，替代then回调函数的功能；
在使用async函数和await关键字时，如何捕获错误？答案是使用try...catch关键字；
//获取默认省市区async function getDefaultArea() { try { const pObj = await axios({ url: '; }); const pname = pObj.data.list[0]; const cObj = await axios({ url: ';, params: { pname } }); const cname = cObj.data.list[0]; const aObj = await axios({ url: ';, params: { pname, cname } }); const aname = aObj.data.list[0]; // 赋予到页面上 document.querySelector('.province').innerHTML = pname; document.querySelector('.city').innerHTML = cname; document.querySelector('.area').innerHTML = aname; } catch (error) { console.dir(error); }}getDefaultArea();4.事件循环EventLoopJavascript 单线程为了让耗时代码不阻塞其他代码运行，设计了事件循环模型；
执行代码和收集异步任务，在调用栈空闲时，反复调用任务队列里回调函数执行机制；
为什么要有事件循环？
因为JavaScript是单线程的，为了不阻塞JavaScript引擎，而设计执行的代码模型
事件循环的过程:
a.执行同步代码，遇到异步代码交给宿主浏览器环境执行；
b.异步有了结果后，把回调函数放入任务队列排队；
c.当调用栈空闲后，返回调用任务队列里的回调函数；
5.宏任务与微任务
ES6之后引入了promise对象，让JS引擎也能发起异步任务：
宏任务：由浏览器环境执行的异步代码,例如JS脚本事件、定时器、AJAX、用户交互事件
微任务：由JS引擎环境执行的异步代码，例如Promise对象.then()回调；
Promise.then()属于微任务队列，优先级高于宏任务队列；
事件循环经典面试题：
// 回答代码执行顺序console.log(1);setTimeout(() => { console.log(2); const p = new Promise(resolve => resolve(3)); p.then(result => console.log(result))},0);const p = new Promise(resolve => { setTimeout(() => { console.log(4); },0); resolve(5);});p.then(result => console.log(result));const p2 = new Promise(resolve => resolve(6));p2.then(result => console.log(result));console.log(7);答案：1 7 5 6 2 3 4
6.Promise.all静态方法
语法：
const p = Promise.all([Promise对象,Promise对象,...])p.then(result => {// result结果：[Promise对象成功结果，Promise对象成功结果,...]}).catch(error => {// 第一个失败的Promise对象，抛出的异常})案例1：同时获取北上广深四个城市的天气信息const bjPromise = axios({url:';,params:{city:'110100'}})const shPromise = axios({url:';,params:{city:'310100'}})const gzPromise = axios({url:';,params:{city:'440100'}})const szPromise = axios({url:';,params:{city:'440300'}})const p = Promise.all([bjPromise,shPromise,gzPromise,szPromise]);p.then(result => { console.log(result); const weathers = result.map(item => { return `<li>${item.data.data.area}---${item.data.data.weather}</li>`; }).join(''); document.querySelector('.my-ul').innerHTML = weathers }).catch(error => { console.dir(error);})案例2：展示商品到分类页面上思路：遍历所有的一级分类数据；遍历id，创建获取二级分类请求；合并所有二级分类Promise对象；等待同时成功，开始渲染页面。
axios({ url: '; }).then(result => { console.log(result.data.data); // 获取二级列表的Promise对象 const subPromise = result.data.data.map(itemTop => { return axios({ url: ';, params: { id: itemTop.id } }); }) // 合并二级Promise对象 const promiseAll = Promise.all(subPromise).then(result => { console.log(result); const showStr = result.map(item => { const subObj = item.data.data; return `<div class="item"> <h3>${subObj.name} <ul> ${subObj.children.map(item => { return `<li> <a href="javascript:;"> <img src=${item.picture}/> </a> <p>${item.name}</p> </li>` }).join('') } </ul> </h3> </div>` }).join(''); document.querySelector('.sub-list').innerHTML = showStr; }) })案例3：学习反馈-省市区切换// 1.1 设置省份下拉菜单数据// 创建一个全局变量let pname = '';axios({ url: '; }).then(provinceList => { const proinceListStr = provinceList.data.list.map(pname => { return `<option value=${pname}>${pname}</option>` }).join(''); document.querySelector('.province').innerHTML = `<option value="">省份</option>` + proinceListStr;})// 1.2 切换省份document.querySelector('.province').addEventListener('change', async e => { // 用户选中的省份 pname = e.target.value; const cityList = await axios({ url: ';, params: { pname: e.target.value } }); console.log(cityList.data.list); const cityListStr = cityList.data.list.map(cname => { return `<option value=${cname}>${cname}</option>` }).join(''); document.querySelector('.city').innerHTML = `<option value="">城市</option>` + cityListStr; document.querySelector('.area').innerHTML = `<option value="">地区</option>`})// 1.3 切换城市document.querySelector('.city').addEventListener('change', async e => { // 用户选择的城市 const areaList = await axios({ url: ';, params: { pname: pname, cname: e.target.value }}); console.log(areaList.data.list); const areaListStr = areaList.data.list.map(aname => { return `<option value=${aname}>${aname}</option>` }).join(''); document.querySelector('.area').innerHTML = `<option value="">地区</option>` + areaListStr;})// 2.收集数据并提交保存到后端document.querySelector('.submit').addEventListener('click', async () => { // 获取表单中的内容 try{ const form = document.querySelector('.info-form') const formRes = serialize(form, { hash: true, empty: true }); const res = await axios({ url: ';, method: 'post', data: { ...formRes } }); console.log(res); alert(res.data.message) }catch (error){ console.dir(error); alert(error.response.data.message); }})至此，关于JavaScript AJAX相关知识就介绍到这里，感谢你的阅读~
本文配套源码以及图片资源可见：
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #ajax方法怎样创数组 #一个ajax的建立过程 #ajaxhash方法 #ajax可视区域加载插件 #ajax在路径传id怎么传
