最大的域名注册网站是那个,win7怎么做网站服务器吗,会展免费网站模板,seo网站运营知者乐水#xff0c;仁者乐山。
XMLHttpRequest
AJAX原理 - XMLHttpRequest 前面与服务器交互使用的不是axios吗#xff1f;
ajax并不等于axios
我们使用的axios的内部#xff0c;实际上对XHR对象/原理 的封装
为什么还要学习ajax#xff1f;
①在一些静态网站项目中…
知者乐水仁者乐山。
XMLHttpRequest
AJAX原理 - XMLHttpRequest 前面与服务器交互使用的不是axios吗
ajax并不等于axios
我们使用的axios的内部实际上对XHR对象/原理 的封装
为什么还要学习ajax
①在一些静态网站项目中与服务器交互只有一到两处可以采用XHR对象几行代码就能与服务器交互
②也能了解axios内部是如何与服务器交互了解axios内部原理。
使用 XMLHttpRequest 使用XMLHttpRequest实践获取数据代码如下 返回的是对象结构的json字符串。
以前使用axios请求返回的不是一个对象吗这里为何是json字符串
前面使用axios会帮你把json字符串转成对象。
这里需要自己转化JSON.parse() 以前axios请求的结果里面有很多对key和value包括data去哪了
axios内部把结果转化完以后挂载到结果对象有很多其他key和value的data属性下。
这里响应结果为简单对象的json字符串还需要自己转化。
转化后使用它取出数据拼接展示 总结 XMLHttpRequest - 查询参数 携带查询参数 案例 打印查询参数对象转化得来的查询参数字符串出现的%××%××%××不是乱码
它叫做url编码
为什么要进行url编码因为url网址有个规定只能出现英文数字以及特殊符号。
那为什么浏览器上边的搜索框/地址栏有中文
因为浏览器会对其进行格式化可显示中文
但是当在代码中和服务器沟通时传递的url网址需要在网络进行传输
就会进行一种编码url编码 在url解码网站中进行解码 案例实操代码/效果 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title案例_地区查询/titlelink relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap5.1.3/dist/css/bootstrap.min.cssstyle:root {font-size: 15px;}body {padding-top: 15px;}/style
/headbodydiv classcontainerform ideditForm classrow!-- 输入省份名字 --div classmb-3 collabel classform-label省份名字/labelinput typetext value北京 nameprovince classform-control province placeholder请输入省份名称 //div!-- 输入城市名字 --div classmb-3 collabel classform-label城市名字/labelinput typetext value北京市 namecity classform-control city placeholder请输入城市名称 //div/formbutton typebutton classbtn btn-primary sel-btn查询/buttonbrbrp地区列表: /pul classlist-group!-- 示例地区 --li classlist-group-item东城区/li/ul/divscript srchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript/*** 目标: 根据省份和城市名字, 查询对应的地区列表*/// 1. 查询按钮-点击事件document.querySelector(.sel-btn).addEventListener(click, () {// 2. 收集省份和城市名字const pname document.querySelector(.province).valueconst cname document.querySelector(.city).value// 3. 组织查询参数字符串const qObj {pname,cname}// 查询参数对象 - 查询参数字符串const paramsObj new URLSearchParams(qObj)const queryString paramsObj.toString()console.log(queryString)// 4. 使用XHR对象查询地区列表const xhr new XMLHttpRequest()xhr.open(GET, http://hmajax.itheima.net/api/area?${queryString})xhr.addEventListener(loadend, () {console.log(xhr.response)const data JSON.parse(xhr.response)console.log(data)const htmlStr data.list.map(areaName {return li classlist-group-item${areaName}/li}).join()console.log(htmlStr)document.querySelector(.list-group).innerHTML htmlStr})xhr.send()})/script
/body/html
XMLHttpRequest - 数据提交 实操代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleXMLHttpRequest_数据提交/title
/headbodybutton classreg-btn注册用户/buttonscript/*** 目标使用xhr进行数据提交-完成注册功能*/document.querySelector(.reg-btn).addEventListener(click, () {const xhr new XMLHttpRequest()xhr.open(POST, http://hmajax.itheima.net/api/register)xhr.addEventListener(loadend, () {console.log(xhr.response)})// 设置请求头-告诉服务器内容类型JSON字符串xhr.setRequestHeader(Content-Type, application/json)// 准备提交的数据const userObj {username: itheima007,password: 7654321}const userStr JSON.stringify(userObj)// 设置请求体发起请求xhr.send(userStr)})/script
/body/html
可以在“网络”中 标头 看到我们的请求头设置 可以在“网络”中 载荷 看到我们的请求体携带数据 重复提交会被提醒“账号被占用” Promise
认识promise 语法
1.借助浏览器内置的promise构造函数并传入一个回调函数promise提供了resolve和reject两个函数。
在回调函数中执行异步代码异步代码有了结果之后可以做一个判断成功调用resolve方法失败调用reject方法。
2.promise对象使用then方法传入回调函数接受promise对象内成功的结果。
3.继续使用catch方法传入回调函数接受promise对象内失败的结果。
实操代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title认识Promise/title
/headbodyscript/*** 目标使用Promise管理异步任务*/// 1. 创建Promise对象const p new Promise((resolve, reject) {// 2. 执行异步代码setTimeout(() {// resolve(模拟AJAX请求-成功结果)reject(new Error(模拟AJAX请求-失败结果))}, 2000)})// 3. 获取结果p.then(result {console.log(result)}).catch(error {console.log(error)})/script
/body/html
总结 Promise - 三种状态 迅速打开控制台查看发现promise在高压柜台为“pending” promise创建时构造函数传入的回调函数里的代码会立刻执行先于console.log(p)。 如果等到resolve结果打印出来再查看状态变为fullfilled 总结 使用Promise XHR 获取省份列表 如果请求结果直接在promise构造函数的参数回调函数中打印 promise对象的一个好处异步结果有成功与失败
调用resolve和reject关联结果处理函数在then和catch回调中做后续处理
xhr如何判断响应成功还是失败——响应状态码 打印xhr对象我们可以看到status属性
如果响应状态码是2××就说明响应成功 实操代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title案例_使用PromiseXHR_获取省份列表/title
/headbodyp classmy-p/pscript/*** 目标使用Promise管理XHR请求省份列表* 1. 创建Promise对象* 2. 执行XHR异步代码获取省份列表* 3. 关联成功或失败函数做后续处理*/// 1. 创建Promise对象const p new Promise((resolve, reject) {// 2. 执行XHR异步代码获取省份列表const xhr new XMLHttpRequest()xhr.open(GET, http://hmajax.itheima.net/api/province)xhr.addEventListener(loadend, () {// xhr如何判断响应成功还是失败的// 2xx开头的都是成功响应状态码if (xhr.status 200 xhr.status 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})// 3. 关联成功或失败函数做后续处理p.then(result {console.log(result)document.querySelector(.my-p).innerHTML result.list.join(br)}).catch(error {// 错误对象要用console.dir详细打印console.dir(error)// 服务器返回错误提示消息插入到p标签显示document.querySelector(.my-p).innerHTML error.message})/script
/body/html
成功的情况 失败的情况url添加无用多余数字字符 在浏览器控制台查看请求
状态码变成404 响应结果为h1标签 错误对象比较特殊要用console.dir进行详细打印
①使用console.log进行打印对象无法展开查看其属性和方法 ②使用console.dir进行打印 将错误响应结果插入到p标签 封装简易版 axios
简易初始版 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title封装_简易axios函数_获取省份列表/title
/headbodyp classmy-p/pscript/*** 目标封装_简易axios函数_获取省份列表* 1. 定义myAxios函数接收配置对象返回Promise对象* 2. 发起XHR请求默认请求方法为GET* 3. 调用成功/失败的处理程序* 4. 使用myAxios函数获取省份列表展示*/// 1. 定义myAxios函数接收配置对象返回Promise对象function myAxios(config) {return new Promise((resolve, reject) {// 2. 发起XHR请求默认请求方法为GETconst xhr new XMLHttpRequest()xhr.open(config.method || GET, config.url)xhr.addEventListener(loadend, () {// 3. 调用成功/失败的处理程序if (xhr.status 200 xhr.status 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})}// 4. 使用myAxios函数获取省份列表展示myAxios({url: http://hmajax.itheima.net/api/province}).then(result {console.log(result)document.querySelector(.my-p).innerHTML result.list.join(br)}).catch(error {console.log(error)document.querySelector(.my-p).innerHTML error.message})/script
/body/html
修改支持传递查询参数 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title封装_简易axios函数_获取地区列表/title
/headbodyp classmy-p/pscript/*** 目标封装_简易axios函数_获取地区列表* 1. 判断有params选项携带查询参数* 2. 使用URLSearchParams转换并携带到url上* 3. 使用myAxios函数获取地区列表*/function myAxios(config) {return new Promise((resolve, reject) {const xhr new XMLHttpRequest()// 1. 判断有params选项携带查询参数if (config.params) {// 2. 使用URLSearchParams转换并携带到url上const paramsObj new URLSearchParams(config.params)const queryString paramsObj.toString()// 把查询参数字符串拼接在url后面config.url ?${queryString}}xhr.open(config.method || GET, config.url)xhr.addEventListener(loadend, () {if (xhr.status 200 xhr.status 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})}// 3. 使用myAxios函数获取地区列表myAxios({url: http://hmajax.itheima.net/api/area,params: {pname: 辽宁省,cname: 大连市}}).then(result {console.log(result)document.querySelector(.my-p).innerHTML result.list.join(br)})/script
/body/html 修改支持传递请求体数据 点击两次按钮发送两次请求一次成功一次失败。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title封装_简易axios函数_注册用户/title
/headbodybutton classreg-btn注册用户/buttonscript/*** 目标封装_简易axios函数_注册用户* 1. 判断有data选项携带请求体* 2. 转换数据类型在send中发送* 3. 使用myAxios函数完成注册用户*/function myAxios(config) {return new Promise((resolve, reject) {const xhr new XMLHttpRequest()if (config.params) {const paramsObj new URLSearchParams(config.params)const queryString paramsObj.toString()config.url ?${queryString}}xhr.open(config.method || GET, config.url)xhr.addEventListener(loadend, () {if (xhr.status 200 xhr.status 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})// 1. 判断有data选项携带请求体if (config.data) {// 2. 转换数据类型在send中发送const jsonStr JSON.stringify(config.data)xhr.setRequestHeader(Content-Type, application/json)xhr.send(jsonStr)} else {// 如果没有请求体数据正常的发起请求xhr.send()}})}document.querySelector(.reg-btn).addEventListener(click, () {// 3. 使用myAxios函数完成注册用户myAxios({url: http://hmajax.itheima.net/api/register,method: POST,data: {username: itheima999,password: 666666}}).then(result {console.log(result)}).catch(error {console.dir(error)})})/script
/body/html
案例 - 天气预报 核心代码
/*** 目标1默认显示-北京市天气* 1.1 获取北京市天气数据* 1.2 数据展示到页面*/
// 获取并渲染城市天气函数
function getWeather(cityCode) {// 1.1 获取北京市天气数据myAxios({url: http://hmajax.itheima.net/api/weather,params: {city: cityCode}}).then(result {console.log(result)const wObj result.data// 1.2 数据展示到页面// 阳历和农历日期const dateStr span classdateShort${wObj.date}/spanspan classcalendar农历nbsp;span classdateLunar${wObj.dateLunar}/span/spandocument.querySelector(.title).innerHTML dateStr// 城市名字document.querySelector(.area).innerHTML wObj.area// 当天气温const nowWStr div classtem-boxspan classtempspan classtemperature${wObj.temperature}/spanspan°/span/span/divdiv classclimate-boxdiv classairspan classpsPm25${wObj.psPm25}/spanspan classpsPm25Level${wObj.psPm25Level}/span/divul classweather-listliimg src${wObj.weatherImg} classweatherImg altspan classweather${wObj.weather}/span/lili classwindDirection${wObj.windDirection}/lili classwindPower${wObj.windPower}/li/ul/divdocument.querySelector(.weather-box).innerHTML nowWStr// 当天天气const twObj wObj.todayWeatherconst todayWStr div classrange-boxspan今天/spanspan classrangespan classweather${twObj.weather}/spanspan classtemNight${twObj.temNight}/spanspan-/spanspan classtemDay${twObj.temDay}/spanspan℃/span/span/divul classsun-listlispan紫外线/spanspan classultraviolet${twObj.ultraviolet}/span/lilispan湿度/spanspan classhumidity${twObj.humidity}/span%/lilispan日出/spanspan classsunriseTime${twObj.sunriseTime}/span/lilispan日落/spanspan classsunsetTime${twObj.sunsetTime}/span/li/uldocument.querySelector(.today-weather).innerHTML todayWStr// 7日天气预报数据展示const dayForecast wObj.dayForecastconst dayForecastStr dayForecast.map(item {return li classitemdiv classdate-boxspan classdateFormat${item.dateFormat}/spanspan classdate${item.date}/span/divimg src${item.weatherImg} alt classweatherImgspan classweather${item.weather}/spandiv classtempspan classtemNight${item.temNight}/span-span classtemDay${item.temDay}/spanspan℃/span/divdiv classwindspan classwindDirection${item.windDirection}/spanspan classwindPower${item.windPower}/span/div/li}).join()// console.log(dayForecastStr)document.querySelector(.week-wrap).innerHTML dayForecastStr})
}// 默认进入网页-就要获取天气数据北京市城市编码110100
getWeather(110100)/*** 目标2搜索城市列表* 2.1 绑定input事件获取关键字* 2.2 获取展示城市列表数据*/
// 2.1 绑定input事件获取关键字
document.querySelector(.search-city).addEventListener(input, (e) {console.log(e.target.value)// 2.2 获取展示城市列表数据myAxios({url: http://hmajax.itheima.net/api/weather/city,params: {city: e.target.value}}).then(result {console.log(result)const liStr result.data.map(item {return li classcity-item data-code${item.code}${item.name}/li}).join()console.log(liStr)document.querySelector(.search-list).innerHTML liStr})
})/*** 目标3切换城市天气* 3.1 绑定城市点击事件获取城市code值* 3.2 调用获取并展示天气的函数*/
// 3.1 绑定城市点击事件获取城市code值
document.querySelector(.search-list).addEventListener(click, e {if (e.target.classList.contains(city-item)) {// 只有点击城市li才会走这里const cityCode e.target.dataset.codeconsole.log(cityCode)// 3.2 调用获取并展示天气的函数getWeather(cityCode)}
})
