汕头网站公司,一个公司的网站怎么做,做外贸的网站怎么建立,深圳建模板网站一、XMLHttpRequest基本使用
XMLHttpRequest#xff08;XHR#xff09;对象用于与服务器交互。 二、XMLHttpRequest-查询参数
语法: 用 符号分隔的键/值对列表 三、XMLHttpRequest-数据提交 核心步骤 : 1. 请求头 设置 Content-Type 2. 请求体 携带 符合要求 的数…一、XMLHttpRequest基本使用
XMLHttpRequestXHR对象用于与服务器交互。 二、XMLHttpRequest-查询参数
语法: 用 符号分隔的键/值对列表 三、XMLHttpRequest-数据提交 核心步骤 : 1. 请求头 设置 Content-Type 2. 请求体 携带 符合要求 的数据 四、Promise 定义Promise 对象用于表示一个异步操作的最终完成或失败及其结果值。 概念: 管理异步操作的对象可以获取成功或失败的结果 使用步骤: 1. 实例化Promise对象 2. 执行异步操作并传递结果 3. 获取结果 五、Promise的三种状态 1. 待定pending : 初始状态 既没有被兑现也没有被拒绝 2. 已兑现fullfilled : 意味着操作 成功 完成 3. 已拒绝rejected : 意味着操作 失败 注意: Promise对象一旦被 兑现/拒绝 就是 已敲定 了状态 无法再改变 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title认识-Promise/title
/headbodyh2认识-Promise/h2script/*** Promise* 浏览器的内置对象管理异步操作接收成功或失败的结果* */// 基于一个对象 可以写.then(正常结果) .catch(异常结果)// 实例化一个Promise对象 才能抛出结果// const p new Promise(函数)const p new Promise((resolve, reject) {// Promise 的结果 不能改变reject(失败了嘤嘤嘤)resolve(成功了哈哈哈哈)})p.then(res{console.log(res)}).catch(error{console.log(error)})/script
/body/html 六、例.使用 PromiseXHR 获取省份列表 !DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title案例-使用 PromiseXHR 获取省份列表/title
/headbodyh2案例-使用 PromiseXHR 获取省份列表/h2button classsuccess请求成功/buttonbutton classerr请求异常/buttondiv classbox/divscript// 把xhr和Promise结合 → then 和 catch 拿结果const p new Promise((resolve, reject) {const xhr new XMLHttpRequest()xhr.open(get, https://hmajax.itheima.net/api/province)xhr.addEventListener(loadend, function() {// console.log(xhr.response)// 如果成功了resolve 否则reject → if// [200 -300) 都是成功否则就是失败if (xhr.status 200 xhr.status 300) {// resolve(真实数据-不能json字符串)resolve(JSON.parse(xhr.response))} else {reject(xhr.response)}})xhr.send()})p.then(res {console.log(成功的结果, res)}).catch(error {console.log(失败的结果, error)})/script
/body/html 七、封装-简易axios-获取省份列表
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title封装-简易axios函数-获取省份列表/title
/headbodyh2封装-简易axios-获取省份列表/h2div classbox/divscript/*** 封装-简易axios-获取省份列表* */// promise对象.then().catch() -- 上午最后的例子// aixos().then().catch()// 为什么axios() promise对象 → 说明函数调用拿到的就是Promise对象// 函数基本语法函数调用会拿到啥 → 函数的返回值 → 封装函数返回值是Promise对象// 返回值是Promise对象 负责干啥 → 发类似axios一样的网络请求拿数据 → xhr// axios({url: }).then().catch()function HMAxios(config) {// console.log(config)return new Promise((resolve, reject) {const xhr new XMLHttpRequest()// xhr.open(请求方法, url)xhr.open(config.method || get, config.url)xhr.addEventListener(loadend, function() {// console.log(xhr.response)if (xhr.status 200 xhr.status300) {resolve(JSON.parse(xhr.response))} else {reject(xhr.response)}})xhr.send()})}// 请求省份HMAxios({url: https://hmajax.itheima.net/api/province,// method: get}).then(res {console.log(res)}).catch(error{console.log(error)})// 请求新闻HMAxios({url: https://hmajax.itheima.net/api/news,method: get}).then(res{console.log(res)})/script
/body/html
八、封装-简易axios函数-获取地区列表
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title封装-简易axios函数-获取地区列表/title
/headbodyh2封装-简易axios函数-获取地区列表/h2div classbox/divscript/*** 封装-简易axios函数-获取地区列表*/// https://hmajax.itheima.net/api/areafunction HMAxios (config) {return new Promise((resolve, reject) {const xhr new XMLHttpRequest()// xhr.open(请求方法, 请求地址)// config.url 原来默认的地址 查询参数if (config.params) {const params new URLSearchParams(config.params) // 类似于对象 请求地址要字符串格式// console.log(params)const str params.toString()// console.log(str)config.url config.url ? str// console.log(config.url)}xhr.open(config.method || get, config.url)xhr.addEventListener(loadend, function() {// console.log(xhr.response)if (xhr.status200xhr.status300) {resolve(JSON.parse(xhr.response))} else {reject(xhr.response)}})xhr.send()})}HMAxios({url: https://hmajax.itheima.net/api/area,// method: xx,params: {pname: 河北省,cname: 唐山市}}).then(res{console.log(res)})HMAxios({url: https://hmajax.itheima.net/api/lol/search,// params: {// q: 安妮// }}).then(res{console.log(res)})/script
/body/html
九、封装-简易axios函数-注册用户
!DOCTYPE html
html langzh-CNheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title封装-简易axios函数-注册用户/title
/headbodyh2封装-简易axios函数-注册用户/h2button classbtn注册用户/buttonscript/*** 封装-简易axios函数-注册用户*/function HMAxios(config) {return new Promise((resolve, reject) {const xhr new XMLHttpRequest()// config.url 原来默认的地址 查询参数if (config.params) {const params new URLSearchParams(config.params) // 类似于对象 请求地址要字符串格式// console.log(params)const str params.toString()// console.log(str)config.url config.url ? str// console.log(config.url)}xhr.open(config.method || get, config.url)xhr.addEventListener(loadend, function() {// console.log(xhr.response)if (xhr.status 200 xhr.status 300) {resolve(JSON.parse(xhr.response))} else {reject(JSON.parse(xhr.response))}})// 有body参数(data)send(json格式的data数据) 否则 send()if (config.data) {xhr.setRequestHeader(content-type, application/json)xhr.send(JSON.stringify(config.data))} else {xhr.send()}})}HMAxios({url: https://hmajax.itheima.net/api/register,method: post,data: {username: daqiang8888,password: 123456}}).then(res {console.log(res)}).catch(error {console.log(error)})/script
/body/html
十天气预报 主要代码
// 默认渲染 - 天气 → 北京
function getWeather(city){// 发请求拿数据 → 渲染HMAxios({url: https://hmajax.itheima.net/api/weather,params: {city}}).then(res{console.log(res.data)const data res.data// 日期document.querySelector(.title).innerHTML span classdate${data.date}/spanspan classcalendar农历nbsp;span classdateLunar${data.dateLunar}/span/span// 替换城市名document.querySelector(.area).innerHTML data.area// 今日温度document.querySelector(.weather-box).innerHTML div classtem-boxspan classtempspan classtemperature${data.temperature}/spanspan°/span/span/divdiv classclimate-boxdiv classairspan classpsPm25${data.psPm25}/spanspan classpsPm25Level${data.psPm25Level}/span/divul classweather-listliimg src${data.weatherImg} classweatherImg altspan classweather${data.weather}/span/lili classwindDirection${data.windDirection}/lili classwindPower${data.windPower}/li/ul/div// 一周天气const week data.dayForecastconsole.log(week)document.querySelector(.week-wrap).innerHTML week.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 classwindPowerlt;${item.windPower}/span/div/li}).join()})
}// 有参数 → 城市id → 北京城市id110100 string
getWeather(110100)// 用户输入 → 请求对应的城市 → 渲染城市// 引入库文档中搜索函数使用 _.xx() → 返回值
// _.debounce(函数, 延迟时间)
// 这里是函数表达式写法 const fn 匿名函数 → 顺序先定义后使用
const fn _.debounce(function() {// console.log(11)HMAxios({url: https://hmajax.itheima.net/api/weather/city,params: {city: document.querySelector(.search-city).value}}).then(res {console.log(res.data)document.querySelector(.search-list).innerHTML res.data.map(item {// data-code 点击的时候按code值发请求渲染城市天气return li classcity-item data-code${item.code}${item.name}/li}).join()})
}, 800)document.querySelector(.search-city).addEventListener(input, fn)// 用户选中某个城市发请求 → 得到这个城市的天气 → 渲染天气 → getWeather(城市id)
document.querySelector(.search-list).addEventListener(click, function(e) {if (e.target.classList.contains(city-item)) {getWeather(e.target.dataset.code)}
})
