网站关键词整体方案,word 发布到wordpress,永州建设网站,汉中建设工程招标网最新公告Ajax学习笔记#xff0c;第一节#xff1a;语法基础
一、概念
1、什么是Ajax
使用浏览器的 XMLHttpRequest 对象 与服务器通信2、什么是axios
Axios是一个基于Promise的JavaScript库#xff0c;支持在浏览器和Node.js环境中使用。相较于Ajax#xff0c;Axios提供了更多…Ajax学习笔记第一节语法基础
一、概念
1、什么是Ajax
使用浏览器的 XMLHttpRequest 对象 与服务器通信2、什么是axios
Axios是一个基于Promise的JavaScript库支持在浏览器和Node.js环境中使用。相较于AjaxAxios提供了更多的功能如拦截请求和响应、转换请求和响应数据、取消请求等
这使得开发者能够更方便地处理和管理HTTP请求。Axios相较于Ajax兼容性更好支持现代浏览器而Ajax在一些旧版本浏览器中可能会出现一些兼容性问题。在安全性方面Axios支持防御XSRF跨站请求伪造而Ajax本身并不直接支持这一防御机制。3、认识URL
·URL的组成协议域名资源路径
URL 组成有很多部分我们先掌握这3个重要的部分即可·http协议超文本传输协议。规定了浏览器和服务器传递数据的格式·域名标记服务器在互联网当中的方位网络中有很多服务器你想访问哪一台就需要知道它的域名。·资源路径一个服务器内有多个资源用于标识你要访问的资源具体的位置4、准备
https://www.apifox.cn/apidoc/project-1937884
这里 有 现成的后端服务我们在练习时直接使用即可二、Axios使用
1、初步使用
1 引入 axios.js 文件到自己的网页中https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js2 语法axios({url: 请求路径,method: 请求方法,data:{参数名:值}}).then((res){//对服务器返回的数据做处理});bodyh31、省份列表/h3p classmy-provs/ph3新闻列表/h3p classmy-news/pscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptaxios({url: https://hmajax.itheima.net/api/province}).then((res) {console.log(res);if (res ! undefined) {let provList res.data.list;document.querySelector(.my-provs).innerHTML provList.join(br);}});axios({url: https://hmajax.itheima.net/api/news}).then((res) {console.log(res);if (res ! undefined) {let newsList res.data.data;let newsInnerHtml ;newsList.forEach(ele {newsInnerHtml newsInnerHtml a ele.title /abrimg src ele.img br/ ;});console.log(newsInnerHtml);document.querySelector(.my-news).innerHTML newsInnerHtml;}})/script
/body2、携带查询参数
语法
axios({url:请求路径,params:{//查询参数 params 或在URL后拼接成?xxxyyyoooddd格式}
}).then((res){//结果处理
});//注意
参数中 当属性名和value位置变量名同名即可简写bodyh3城市列表/h3 input typetext namecitynameinput typebutton classslt-btn value点我p classmy-city/pscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptlet cliBtn document.querySelector(.slt-btn);cliBtn.addEventListener(click, () {let inputVal document.querySelector(input[namecityname]);axios({url: https://hmajax.itheima.net/api/city,params: {pname: inputVal.value}}).then(res {console.log(res);if (res ! undefined) {let cityList res.data.list;document.querySelector(.my-city).innerHTML cityList.join(br/);}})});/script
/body3、常用请求方法和数据提交
请求方法是一些固定单词的英文例如GETPOSTPUTDELETEPATCH
这些都是http协议规定的每个单词对应一种对服务器资源要执行的操作axios内部设置了默认请求方法就是GET请求方法操作GET获取数据POST数据提交PUT修改数据全部DELETE删除数据PATCH修改数据部分
#语法
axios({url: 目标资源地址,method: 请求方法,data: { //注意这里是data 而不是 params参数名: 值}
}).then(result {// 对服务器返回的数据做后续处理
})bodylabel forun用户名:/labelinput typetext nameusername idunlabel forpwd密码:/labelinput typepassword namepassword idpwdinput typebutton value注册 classbtnscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptlet submitBtn document.querySelector(.btn);submitBtn.addEventListener(click, () {let username document.querySelector(#un).value;let password document.querySelector(#pwd).value;if (username ! undefined password ! undefined) {axios({url: https://hmajax.itheima.net/api/register,method: POST,data: { //注意这里是data 不是 paramsusername,password}}).then(res {console.log(res.data);if (res.data undefined) {alert(注册失败);return;}if (res.data.code 10000) {alert(账号注册成功);} else {alert(res.data.message);}});} else {alert(请输入用户名和密码);}});/script
/body4、Axios错误处理
##语法
axios({// ...请求选项
}).then(result {// 处理成功数据
}).catch(error {// 处理失败错误
})scriptlet submitBtn document.querySelector(.btn);submitBtn.addEventListener(click, () {let username document.querySelector(#un).value;let password document.querySelector(#pwd).value;if (username ! undefined password ! undefined) {axios({url: https://hmajax.itheima.net/api/register,method: POST,data: { //注意这里是data 不是 paramsusername,password}}).then(res {console.log(res.data);if (res.data undefined) {alert(注册失败);return;}if (res.data.code 10000) {alert(账号注册成功);} else {alert(res.data.message);}}).catch(error {console.log(error.message);console.log(error.response.data);console.log(error.response.data.message);alert(error.response.data.message);});} else {alert(请输入用户名和密码);}});/script5、form-serialize插件
我们前面收集表单元素的值是一个个标签获取的
如果一套表单里有很多很多表单元素如何一次性快速收集出来呢.
使用 form-serialize 插件提供的 serialize 函数就可以办到语法
serialize参数1,参数2参数1要获取的form表单标签对象要求表单元素需要有name属性用来作为收集的数据中属性名
参数2配置对象hash:true收集出来是一个JS对象结构false收集出来是一个查询对象格式empty:true收集空值false不收集空值bodyform actionjavascript:; classmy-forminput typetext nameusernamebrinput typetext namepasswordbrinput typebutton classbtn value提交/formscript src./js/form-serialize.js/scriptscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptlet btn document.querySelector(.btn);btn.addEventListener(click, () {let myForm document.querySelector(.my-form);const data serialize(myForm, { hash: true, empty: false });const { username, password } data;axios({url: https://hmajax.itheima.net/api/login,method: POST,data: {username,password}}).then(res {alert(res.data.message);})})/script
/body三、Ajax原理解析
1、XMLHttpRequest 简单请求
·AJAX 是浏览器与服务器通信的技术采用 XMLHttpRequest 对象相关代码
·axios 是对 XHR 相关代码进行了封装让我们只关心传递的接口参数#语法
const xhr new XMLHttpRequest()
xhr.open(请求方法, 请求url网址)
xhr.addEventListener(loadend, () {// 响应结果console.log(xhr.response)
})
xhr.send()
h3省份/h3
p classmy_prov/p
script//1、通过XMLHttpRequest实现查询省份的接口//1-1、创建xhr对象const xhr new XMLHttpRequest();//1-2、设置请求路径和方式xhr.open(GET, http://hmajax.itheima.net/api/province);//1-3、监听回调xhr.addEventListener(loadend, () {console.log(xhr.response);//JSON解析let res JSON.parse(xhr.response);console.log(res);const my_prov document.querySelector(.my_prov);my_prov.innerHTML res.list.join(br)});//监听loadend事件//1-4、发送请求xhr.send();//发送请求
/script##拓展
进度事件的种类
进度事件用来描述资源加载的进度主要由 AJAX 请求img、audio、video、style、link
等外部资源的加载触发继承了ProgressEvent接口。它主要包含以下几种事件。·abort外部资源中止加载时比如用户取消触发。如果发生错误导致中止不会触发该事件。
·error由于错误导致外部资源无法加载时触发。
·load外部资源加载成功时触发。
·loadstart外部资源开始加载时触发。
·loadend外部资源停止加载时触发发生顺序排在error、abort、load等事件的后面。
·progress外部资源加载过程中不断触发。
·timeout加载超时时触发。2、XMLHttpRequest 请求参数简单参数
#实现http://xxxx.com/xxx/xxx?参数名1值1参数名2值2const xhr2 new XMLHttpRequest();
xhr2.open(GET, http://hmajax.itheima.net/api/city?pname河北省);
//1-3、监听回调
xhr2.addEventListener(loadend, () {console.log(xhr2.response);//JSON解析let res JSON.parse(xhr2.response);console.log(res);const my_city document.querySelector(.my_city);my_city.innerHTML res.list.join(br)
});//监听loadend事件
//1-4、发送请求
xhr2.send();//发送请求3、XMLHttpRequest 请求参数多个
##语法
let queryParams new URLSearchParams({pname: 河北省,cname: 邯郸市
});
let queryString queryParams.toStrng();//3、通过XMLHttpRequest实现查询区县的接口多个参数const xhr3 new XMLHttpRequest();let queryParams new URLSearchParams({pname: 河北省,cname: 邯郸市});xhr3.open(GET, https://hmajax.itheima.net/api/area? queryParams.toString());//1-3、监听回调xhr3.addEventListener(loadend, () {console.log(xhr3.response);//JSON解析let res JSON.parse(xhr3.response);console.log(res);const my_area document.querySelector(.my_area);my_area.innerHTML res.list.join(br)});//监听loadend事件//1-4、发送请求xhr3.send();//发送请求4、XMLHttpRequest数据提交
##语法
xhr4.setRequestHeader(Content-Type, application/json);
let data { username: username, password: password };
let dataStr JSON.stringify(data);
xhr4.send(dataStr);const registBtn document.querySelector(.btn);
registBtn.addEventListener(click, function () {let username document.querySelector(#un).value;let password document.querySelector(#pwd).value;if (username undefined || password undefined) {alert(请输入用户名和密码);return;}const xhr4 new XMLHttpRequest();xhr4.open(POST, https://hmajax.itheima.net/api/register);xhr4.addEventListener(loadend, () {console.log(xhr4.response);let res JSON.parse(xhr4.response);if (res ! undefined res.code ! 10000) {alert(res.message);} else {alert(账号注册成功.id为 res.data.id);}})xhr4.setRequestHeader(Content-Type, application/json);let data { username: username, password: password };let dataStr JSON.stringify(data);xhr4.send(dataStr);
});
