女生学网站建设好学吗,网站开发 职位描述,wordpress怎么破解插件,seo建设招商Ajax_3 Ajax原理 01-Ajax原理-XMLHttpRequest 使用XMLHttpRequest
步骤#xff1a; 创建XMLHttpRequest对象配置请求方法请求url网址监听loadend事件#xff0c;接受响应结果发起请求 需求#xff1a;使用XMLHttpRequest对象与服务器通信
代码示例 // 1. 创建 XMLHttpReq…Ajax_3 Ajax原理 01-Ajax原理-XMLHttpRequest 使用XMLHttpRequest
步骤 创建XMLHttpRequest对象配置请求方法请求url网址监听loadend事件接受响应结果发起请求 需求使用XMLHttpRequest对象与服务器通信
代码示例 // 1. 创建 XMLHttpRequest 对象const xhr new XMLHttpRequest()// 2. 配置请求方法和请求 url 地址xhr.open(GET,http://hmajax.itheima.net/api/province)// 3. 监听 loadend 事件接收响应结果xhr.addEventListener(loadend, () {console.log(xhr.response)// 字符串转对象const data JSON.parse(xhr.response)console.log(data.list)// 数组转字符串console.log(data.list.join(br))// 插入到页面中document.querySelector(.my-p).innerHTML data.list.join(br)})// 4. 发起请求xhr.send()
/script 02-XMLHttpRequest-查询参数 定义浏览器提供给服务器的额外信息让服务器返回浏览器想要的结果。 语法 ?参数名1值1参数名2值2 在问号后面多个值用连接 参数名是接口文档里面设定的哦 需求使用XHR携带查询参数展示某个省下属的城市列表
代码示例 script
// 1、创建xhr实例对象const xhr new XMLHttpRequest()// 2、发起请求xhr.open(GET,http://hmajax.itheima.net/api/city?pname江西省)xhr.addEventListener(loadend, () {console.log(xhr.response)// 对象转字符串const data JSON.parse(xhr.response)console.log(data)// 数组转字符串用换行符分隔console.log(data.list.join(br))// 插入渲染document.querySelector(.city-p).innerHTML data.list.join(br)})xhr.send()/script 03-地区查询 需求 根据省份和城市名字, 查询对应的地区列表 代码示例 script// 注册点击事件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)// 使用toString方法将实例对象转为字符串const queryString paramsObj.toString()console.log(queryString)// 1.创建xhr实例对象const xhr new XMLHttpRequest()// 2.向服务器发送请求xhr.open(GET, http://hmajax.itheima.net/api/area?${queryString})// 3.监听函数监听服务器响应的信息xhr.addEventListener(loadend, () {console.log(xhr.response)// 将返回结果对象转字符串const data JSON.parse(xhr.response)console.log(data.list)// 将数组里面的数据通过map数组映射给标签记得将数组转为大的字符串const htmlStr data.list.map(item {return li classlist-group-item${item}/li}).join()console.log(htmlStr)document.querySelector(.list-group).innerHTML htmlStr})// 4.发送请求xhr.send()})/script 04-XMLHttpRequest-提交数据 需求 通过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)})// 自己配置请求参数xhr.setRequestHeader(Content-Type, application/json)// 准备好提交的数据const userObj {username: liubuzhu,password: 7654321}//将参数对象转为字符串 请求体const userStr JSON.stringify(userObj)// 设置请求体发起请求xhr.send(userStr)})
/script 无论是请求还是查询都需要自己配置对象通过API转换后进行操作 查询参数使用路径传参在?后面。 提交请求参数则自己配置请求对象后在xhr.send请求参数 05-认识 Promise 定义 promise对象用于表示一个异步操作的最终完成或失败 及其结果
promise的好处
逻辑更清晰了解axios函数内部运作机制能解决回调函数低于问题 语法 创建一个promise对象传入resolve和reject参数执行异步任务并传递结果成功传入resolve失败传入reject接受结果成功then方法 失败 catch方法 代码示例 script
const p new Promise((resolve,reject) {// 2.执行异步代码setTimeout(() {// 成功就直接给resolve传入实参resolve(模拟Ajax请求成功结果)// 失败就直接给reject传入实参reject(模拟Ajax请求失败结果)},2000)})// 3.获取结果p.then(result {console.log(result)}).catch(error {console.log(error)})/script 注意第二步的使用。 06-Promise对象的三种状态 作用
了解Promise对象如何关联的处理函数以及代码的执行顺序。 pending状态待定 new Promise() 初始状态既没有被兑现也没有被拒绝fulfilled状态 已兑现 .then回调函数 :意味着操作成功完成rejected状态 已拒绝 .catch(回调函数) : 意味着操作失败
注意Promise对象一旦被 兑现 或者 拒绝就已经被敲定了 状态无法再被改变。 代码示例 script
// Promise对象创建时(待定状态)这里的代码都会被执行console.log(Promise对象内开始执行)// 2. 执行异步代码等待执行结果返回给实参然后兑现 或者 拒绝给结果setTimeout(() {// resolve被调用后 fulfilled状态-已兑现 thenresolve(模拟AJAX请求-成功结果)// reject被调用后rejected状态-已拒绝 catchreject(new Error(模拟AJAX请求-失败结果))}, 2000)
/script了解三种状态的执行时机先是执行Promise里面的同步语句然后调用兑现和拒绝两种状态等到 异步代码执行完结果在返回给两种状态。 07-使用Promise XHR获取省份列表 步骤 * 1. 创建Promise对象 * 2. 执行XHR异步代码获取省份列表 * 3. 关联成功或失败函数做后续处理 代码示例 script// 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,() {// 查看响应状态码// console.log(xhr.status)if (xhr.status 200 xhr.status 300) {resolve(JSON.parse(xhr.response)) //字符串转对象} else {// 错误我们需要创建一个错误实例对象并且给构造函数传递错误信息。当实现传递给对调函数reject(new Error(xhr.response)) }})xhr.send()})// 3. 关联成功或失败函数做后续处理p.then(result {document.querySelector(.my-p).innerHTML result.list.join(br)}).catch(error {// 服务器返回的错误信息返回给页面document.querySelector(.my-p).innerHTML error.message})/script08-封装简易的axios-查询、请求、提交 需求基于Promise XHR 封装 myAxios函数获取省份列表展示。 目标封装_简易axios函数_获取省份列表 1. 定义myAxios函数接收配置对象返回Promise对象 * 2. 发起XHR请求默认请求方法为GET * 3. 调用成功/失败的处理程序 * 4. 使用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))}})if (config.data) {const jsonStr JSON.stringify(config.data)xhr.setRequestHeader(Content-Type, application/json)xhr.send(jsonStr)} else {xhr.send()}})
}
//下面直接调用函数就先使用axios一样的根据实际需求配置 myAxios({url: http://hmajax.itheima.net/api/register,method: POST,data: {usename: myaxios010,password: 99999999}}).then(result {console.log(result)}).catch(error {console.dir(error) })}) 2023年8月7日15:38:27
会有综合案例会单独出一期同时会补全。
