Ajax_01笔记
前置知识点
在JavaScript中
问题1:将数组转为字符串,以及字符串转为数组的方式。
问题2、将对象转为字符串,以及字符串转为对象的方法。
方法:
问题1:
- 将数组转为字符串可以使用
join()
方法。例如:var array = [1, 2, 3]; var str = array.join(',');
,将数组[1, 2, 3]
转为字符串"1,2,3"
。- 将字符串转为数组可以使用
split()
方法。例如:var str = "1,2,3"; var array = str.split(',');
,将字符串"1,2,3"
转为数组[1, 2, 3]
。问题2:
- 将对象转为字符串可以使用
JSON.stringify()
方法。例如:var obj = {name: "John", age: 25}; var str = JSON.stringify(obj);
,将对象{name: "John", age: 25}
转为字符串"{\"name\":\"John\",\"age\":25}"
。- 将字符串转为对象可以使用
JSON.parse()
方法。例如:var str = "{\"name\":\"John\",\"age\":25}"; var obj = JSON.parse(str);
,将字符串"{\"name\":\"John\",\"age\":25}"
转为对象{name: "John", age: 25}
。请注意,字符串必须符合 JSON 格式的要求。
01_什么是Ajax和axios使用
定义
- Ajax(Asynchronous JavaScript and XML)是一种用于创建交互式Web应用程序的技术。它通过在不重新加载整个页面的情况下与服务器通信,实现异步数据传输和更新。使用Ajax,可以在用户与网页交互时,向服务器发送请求并接收响应,然后使用JavaScript动态更新页面的部分内容。这样可以提供更流畅和高效的用户体验,减少了不必要的页面刷新。Ajax广泛用于创建各种Web应用,如动态表单验证、自动补全搜索、实时更新等。它基于Web标准技术,包括HTML、CSS、JavaScript和XML/JSON数据格式。
怎么学习Ajax?
- 先使用axios 库,与服务器进行数据通行。
- 基于XMLHttpRequest封装、代码简单使用次数高。
- Vue、React项目中都会用到axios。
- 在学习XMLHttpRequest对象的使用,了解Ajax底层原理。
axios的使用
语法:
引入axios.js官方库地址 : https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 得到一个全局的axios函数。
使用axios函数:
- 传入配置对象。
- 在用.then回调函数接收服务器返回的结果,并做出后续处理。
代码示例
需求:请求目标资源地址,拿到省份列表数据,显示到页面。
目标资源地址:http://hmajax.itheima.net/api/province
html<body> <!-- axios库地址: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 省份数据地址: http://ajax-api.itheima.net/api/province 目标:使用axios库,获取省份列表数据,展示到页面上 --> <p class="isP"></p> <!-- 引入axios库 --> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // 引入后得到一个axios函数,并使用axios函数 axios({ // 资源路径地址 url: 'http://ajax-api.itheima.net/api/province' }).then(result => { //result为回调函数的形参 // 查看服务器返回的调函数 console.log(result) // 查看返回值里面的内容 console.log(result.data.data) // 查看返回中message的返回状态 console.log(result.data.message) // 将返回的数组转为字符串 console.log(result.data.data.join('<br>')) // 插入到标签容器中,渲染视图 document.querySelector('.isP').innerHTML = result.data.data.join('<br>') }) </script> </body>
02_认识URL
URL:统一资源定位符,简称网址,用于访问网络上的资源。
新闻数据地址: http://hmajax.itheima.net/api/news
- http是协议
- hmajax.itheima.net是域名
- api/news是资源路径地址
03_查询参数
params查询参数
- params是一个查询参数对象:语法格式为params: {参数名:值} 。参数名是接口文档中提供的。
-
作用:使用查询参数提供额外信息,获取对应的数据。
使用params ,里面添加携带的参数名和参数值即可。
- 代码演示
html<p></p> <!-- 城市列表: http://hmajax.itheima.net/api/city 参数名: pname 值: 省份名字 --> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> axios({ url: 'http://hmajax.itheima.net/api/city', // 携带查询参数 params: { pname: '浙江省' //后期这里输入的查询值就是让 用户输入的。 } }).then(result => { console.log(result.data.list) document.querySelector('p').innerHTML = result.data.list.join('<br>') }) </script>
04_查询地区案例
- 需求:根据用户输入的省份和市区,查询该市区的数据,并渲染到容器视图中。
代码示例
javascript<script> /* 获取地区列表: http://hmajax.itheima.net/api/area 查询参数: pname: 省份或直辖市名字 cname: 城市名字 */ // 获取用户需要查询的内容值 const province = document.querySelector('.province') const city = document.querySelector('.city') // 1、这个模块功能是从用户点击事件开始,所以先绑定点击事件 document.querySelector('.sel-btn').addEventListener('click', () => { // 2、点击完后,就执行axios函数 axios({ // 3、向服务器发送查询请求 url: 'http://hmajax.itheima.net/api/area', // 4、携带用户输入的查询参数 params: { pname: province.value, cname: city.value } }).then(result => { console.log(result.data.list) console.log(result.data.message) const list = result.data.list // 5、将返回的数组使用map方法操作插入到标签中然后返回新的数组,将新的数组转为字符串形式 const res = list.map(item => `<li class="list-group-item">${item}</li>`).join('') //得到了操作后的新数组,在转字符串 // 6、 将map返回的新数组插入到页面视图中 document.querySelector('.list-group').innerHTML = res console.log(res) }) }) </script>
map语句的详细解释:
首先,我们有一个
res
数组。通过map
方法,对数组中的每个元素进行处理。箭头函数表达式(item =>
${item}
)
接收一个参数item
,并返回一个字符串模板,生成一个带有item
值的<li>
元素。然后,通过
join('')
方法将所有处理后的字符串连接在一起,形成一个字符串。最终,我们得到一个名为
theLi
的字符串,其中包含了循环处理后的<li>
元素。
05_常用请求方法和数据提交
method: 请求方法,GET可以省略不写(不区分大小写)
data:提交数据
需求: 注册用户: url: 'http://hmajax.itheima.net/api/register,
请求方法: POST
参数名:
username: 用户名 (中英文和数字组成, 最少8位)
password: 密码 (最少6位)
目标: 点击按钮, 通过axios提交用户和密码, 完成注册
代码示例
javascript// 1、注册点击事件 document.querySelector('.btn').addEventListener('click', () => { // 2、使用axios函数发送请求 axios({ url: 'http://hmajax.itheima.net/api/register', // 3、声明请求方法 method: 'POST', // 4、提交数据 data: { username: 'itheima007', password: '7654321' } }).then(result => { // 5、查看浏览器响应的结果 // 浏览器响应状态信息 console.log(result.data.message) //无账号 console.log(result.data) }) })
需要提交数据,就得使用post 同时使用data携带需要提交的参数 (params是查询的参数,不要混淆了)
06_axios错误处理
在then方法后面写一个catch方法,传入回调函数并定义形参
代码示例
javascript
.then(result => {
console.log(result)
}).catch(error => {
// 错误信息处理
console.log(error)
console.log(error.response.data.message)
})
console.log(error.response.data.message) 就能得到具体的错误信息
我们可以将返回的信息通过弹窗返回给用户
07_HTTP协议-请求报文
http协议:规定了浏览器发送及服务器返回内容的格式。
请求报文
请求报文:浏览器按照http协议要求的格式,发送给服务器的内容(就是axios里面的内容)。
请求报文的组成
- 请求行:请求方法、URL、协议
- 请求头:以键值对的格式携带的附加信息,比如:Content-Type
- 空行:分隔请求头,空行之后的是发送给服务器的资源
- 请求体:发送的资源
通过chrome 开发者工具中的网络来进行查看
08_请求报文-错误排查
在保证自己测试没问题的时候,使用开发者工具中的网络选项卡进行查看我们报错的信息,观察后对代码进行改进(这样精确定位提高效率)
09_HTTP协议-响应报文
http协议:规定了浏览器发送及服务器返回内容的格式。
响应报文
- 响应报文:服务器按照http协议要求的格式,返回非浏览器的内容
响应报文的组成
- 响应行:(状态行):协议、http响应状态码,返回给浏览器的内容
- 响应头:以键值对的格式携带的附加信息,比如:Content-Type
- 空行:分隔请求头,空行之后的是发送给服务器的资源
- 响应体:返回的资源
响应状态码
状态码 | 说明 |
---|---|
1xx | 信息 |
2xx | 成功 |
3xx | 重定向消息 |
4xx | 客户端错误 |
5xx | 服务端错误 |
例如;404表示(服务器找不到资源)
可以再网络中的响应中查看服务器相应的结果
10_接口文档
接口文档:描述接口的文章
接口:使用Ajax和服务器通讯时,使用的URL,请求方法,以及参数。
重点:就是在于学会看着接口文档的需求来编写代码。
11_用户登录案例
需求
- 点击登录时,判断用户名和密码长度
- 提交数据和服务通信
- 响应提示消息渲染
代码示例
javascript<script> // 目标1:点击登录时,用户名和密码长度判断,并提交数据和服务器通信 document.querySelector('.btn-login').addEventListener('click', () => { // 1、获取用户名和密码框以及value值 const username = document.querySelector('.username').value const password = document.querySelector('.password').value console.log(username,password) // 2、点击登录时,判断用户名和密码长度 if (username.length < 8 || username.length > 16) { alert('用户名不合法') return } else if (password.length < 6 || password.length > 16) { alert('密码不合法') return } else { axios({ url: 'http://hmajax.itheima.net/api/login', method: 'post', data: { username, password } }).then((result) => { // 返回服务器响应的状态 alert(result.data.message) }).catch((error) => { // 返会服务器响应的错误信息 alert(error.response.data.message) }) } }) </script>
优化提示框后的代码
直接上代码
javascript<script> // 目标1:点击登录时,用户名和密码长度判断,并提交数据和服务器通信 // 目标2:使用提示框,反馈提示消息 /* * 提示框需求分析 * 1、获取提示框标签 * 2、封装一个函数,用于渲染视图。 * 3、设置提示文字,以及对应的颜色,成功为绿色,失败为红色 * 4、为了让提示框自动隐藏,我们添加一个延迟函数 */ // 1.获取提示框标签 const Alert = document.querySelector('.alert-success') function getAlert(message, flag) { // 3.设置提示文字,以及对应的颜色 Alert.innerHTML = message Alert.classList.add('show') // flag ? 'alert-succes' : 'alert-danger' // console.log(flag ? 'alert-succes' : 'alert-danger') Alert.classList.add(flag ? 'alert-succes' : 'alert-danger') // 4.声明一个延迟函数,用于一定事件后隐藏提示框(也就是移除类名) setTimeout(() => { Alert.classList.remove('show') // 提示框颜色类名重置,也就是本次使用完清除 Alert.classList.remove(flag ? 'alert-succes' : 'alert-danger') }, 2000) } // 1.1 登录-点击事件 document.querySelector('.btn-login').addEventListener('click', () => { // 1.2 获取用户名和密码 const username = document.querySelector('.username').value const password = document.querySelector('.password').value // console.log(username, password) // 1.3 判断长度 if (username.length < 8) { // 调用函数,渲染当前提示信息 getAlert('用户名必须大于等于8位', false) console.log('用户名必须大于等于8位') return // 阻止代码继续执行 } if (password.length < 6) { // 调用函数渲染当前提示信息 getAlert('密码必须大于等于6位', false) console.log('密码必须大于等于6位') return // 阻止代码继续执行 } // 1.4 基于axios提交用户名和密码 // console.log('提交数据到服务器') axios({ url: 'http://hmajax.itheima.net/api/login', method: 'POST', data: { username, password } }).then(result => { // 调用提示框渲染函数,然后将返回值当做实参 getAlert(result.data.message,true) console.log(result) console.log(result.data.message) }).catch(error => { // 调用提示框渲染函数,然后将返回值当做实参 getAlert(error.response.data.message,false) console.log(error) console.log(error.response.data.message) }) }) </script>
12_form-serialize插件使用
作用:
作用: 快速收集表单元素的值
语法
语法: const data = serialize(form,{hash: true,empty: true})
- serialize函数里面的form可以获得表单中所有name属性标签的值
- 把插件引入到自己的网页中
2、 使用serialize函数,快速收集表单元素的值
参数1、需要获取哪个表单的数据
表单元素设置 name 属性,值会作为对象的属性名
建议 name 属性的值,最好和接口文档参数名一致
参数2、配置对象
- hash 设置获取数据结构
true: js对象 (推荐使用true,因为将获得的对象可以提交给服务器)
false: 查询字符串
- empty 设置是否取空值
true: 获取空值(推荐)
false: 不获取空值
目标
目标:在点击提交时,使用form-serialize插件,快速收集表单元素值
代码示例
html<form action="javascript:;" class="example-form"> <input type="text" name="username"> <br> <input type="text" name="password"> <br> <input type="button" class="btn" value="提交"> </form> <!-- 引入serizlize插件 --> <script src="../lib/form-serialize.js"></script> <script> //获取按钮标签,注册点击事件 document.querySelector('.btn').addEventListener('click', () => { const form = document.querySelector('.example-form') const data = serialize(form,{hash: true,empty: true}) //写这种即可哦 // const data = serialize(form,{hash: false ,empty: true}) // const data = serialize(form,{hash: false ,empty: true}) console.log(data) }) </script>
- 对参数有问题可以看上面的语法
serialize案例
使用插件替代原生js 获取元素的写法。
代码演示
将serialize获取到的js对象,通过 对象解构 拿到里面的值。然后直接传递给axios函数里面的提交数据给服务器
javascript// 3.1 使用serialize插件 const form = document.querySelector('.form') const data = serialize(form, { hash: true, empty: true }) console.log(data) //{username: 'itheima007', password: '7654321'} // 3.2 利用对象 解构 进行取值 由于属性名和属性值相同,此处简写 const { username, password} = data // 1.2 获取用户名和密码 // const username = document.querySelector('.username').value // const password = document.querySelector('.password').value console.log(username, password)
- serialize函数里面的form可以获得表单中所有name属性标签的值