AJAX学习记录

AJAX

是异步的JS和XML，本质上就是使用XMLHttpRequest对象与服务器通信

怎么使用AJAX

1. 使用axios库，与服务器进行数据通信
2. 在学习XMLHttpRequest对象的使用，了解AJAX的使用原理

认识url

统一资源定位符 俗称网页地址

协议+域名+资源路径

• http:// 钥匙 - 协议 超文本传输协议 规定了浏览器和服务器之间的传输数据的格式
• 地址 - 域名 标记服务器在互联网中的方位
• 摆放位置 - 资源路径 标记资源在服务器下的具体位置

URL查询参数

浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

http://hmajax.itheima.net/api/province？参数名1=值1&参数名2=值2

axios({
      url: 'http://hmajax.itheima.net/api/city',
      params: {
        pname: '河北省'
      }
    }).then(result => {
      console.log(result)
      document.querySelector('p').innerHTML = result.data.list.join('<br>')
    })

常用请求方法

axios请求配置

• url：请求的URL网址
• method：请求的方法，GET可以省略
• data：提交数据
• params:查询参数

GET

查询数据

POST

提交数据

PUT

DELETE

PATCH

axios错误处理

再次注册相同的账号，会遇到报错信息

axios({}).then(result=>{}).catch(error=>{})

请求报文

响应报文

服务器按照HTTP协议要求的格式，返回给浏览器的内容

• 响应行（状态行）：协议、HTTP响应状态码，状态信息
• 响应头：以键值对的格式携带的附加信息
• 空行：分割响应头，空行之后的是服务器返回的资源
• 响应体：返回的资源、

响应状态码：表明请求是否成功完成

状态码	说明
1xx	信息
2xx	成功
3xx	重定向信息
4xx	客户端错误
5xx	服务端错误

eg：404 服务器找不到资源

接口文档

描述接口的文章

接口：使用AJAX和服务器通讯时，使用的URL，请求方式，以及参数

由后端提供的描述接口的文章

form-serialize插件

• 先引入form-serialize.js
• const data = serialize(form,{hash:true,empty:true})

参数	true	false
hash：设置获取数据结构	js 对象	查询字符串
empty：设置是否获取空值	可以查询空值	不查询空值

案例：登录界面

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
//引入serialize
<script src="./lib/form-serialize.js"></script>
  <script>
    const myAlert = document.querySelector('.alert')
    function alertFn(msg, isSuccess) {
      //1.显示提示框
      //2.不同提示文字，成功绿色 失败红色
      //3.过2秒之后，让提示框自动消失
      myAlert.classList.add('show')
      myAlert.innerHTML = msg
      const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
      myAlert.classList.add(bgStyle)
      //过两秒隐藏
      setTimeout(function () {
        myAlert.classList.remove('show')
        myAlert.classList.remove(bgStyle)
      }, 2000)
    }
    const loginform = document.querySelector('.login-form')
    document.querySelector('.btn-login').addEventListener('click', () => {
      const data = serialize(loginform, { hash: true, empty: true })
      const { username, password } = data
      if (username.length < 8) {
        alertFn('用户名必须大于等于8位', false)
        return
      }
      if (password.length < 6) {
        alertFn('密码必须大于等于6位', false)
        return
      }
      axios({
        url: 'http://hmajax.itheima.net/api/login',
        method: 'post',
        data: {
          username,
          password
        }
      }).then(result => {
        console.log(result.data.message)
        alertFn('登录成功', true)
      }).catch(error => {
        console.log(error.response.data.message)
        alertFn('账号密码不正确', false)
      })
    })