Ajax入门+aixos+HTTP协议

一.Ajax入门

概念:AJAX是浏览器与服务器进行数据通信的技术

axios使用:

• 引入axios.js
• 使用axios函数:传入配置对象,再用.then回调函数接受结果,并做后续处理

二.URL

1.概念

概念:统一资源定位符,简称网址,用于访问网络上的资源

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

---

2.URL查询参数

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

---

3.axios-查询参数

语法:使用axios提供的params选项

注意:axios在运行时把参数名和值,会拼接到url?参数名=值

---

三.案例_地区查询

  
  
  
  
  
  



  

    

      
      

        省份名字
        
      
      
      

        城市名字
        
      
    
    查询
    


    
地区列表: 
    

      
      
东城区
    
  
  
  

注意:let theLi = list.map(areaName => `

${areaName}

`).join('')

这段代码中用的是反引号

反引号（`）是用于创建模板字符串的特殊字符

---

四.常用请求方法和数据提交

1.请求方法

请求方法:对服务器资源,要执行的操作

2. axios请求配置

• url:请求的URL网址
• method:请求的方法,GET可以省略(不区分大小写)
• data:提交数据

3.数据提交-注册账号

需求:通过axios提交用户名和密码,完成注册功能

请求方法:POST

参数名:

username用户名(中英文和数字组成,最少8位)

password密码(最少6位)

  
  
  
  



  注册用户
  
  

注意:数据提交之后服务器上就已经存在了,再次运行会报错

---

五.axios错误处理

场景:在上面的案例中再次注册相同的账号,会遇到报错信息

处理:用更直观的方式,给普通用户展示错误信息

        注册案例,重复注册时通过弹框提示用户错误原因

语法:在then方法的后面,通过点语法调用catch方法,传入回调函数并定义形参

  
  
  
  



  注册用户
  
  

---

六.HTTP协议-请求报文

HTTP协议:规定了浏览器发送及服务器返回内容的格式

请求报文:浏览器按照HTTP协议要求的格式,发送给服务器的内容

1.请求报文的格式

请求报文的组成部分有:

1. 请求行:请求方法,URL,协议
2. 请求头:以键值对的格式携带的附加信息,比如:Content-Type
3. 空行:分隔请求头,空行之后的是发送服务器的资源
4. 请求体:发送的资源

2.请求报文-错误排查

---

七.HTTP协议-响应报文

响应报文:服务器按照HTTP协议要求的格式,返回给浏览器的内容

1. 响应行(状态行):协议,HTTP响应状态码,状态信息
2. 响应头:以键值对的格式携带的附加信息,比如: Content-Type
3. 空行:分隔响应头,空行之后是服务器返回的资源
4. 响应体:返回的资源

---

HTTP响应状态码:用来表明请求是否成功完成

比如:404(服务器找不到资源)

---

八.接口文档

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

接口:使用AJAX和服务器通讯时,使用的URL,请求方法,以及参数

---

九.form-serialize插件

作用:快速收集表单元素的值

语法:

使用serialize函数，快速收集表单元素的值
参数1：要获取哪个表单的数据

• 表单元素设置name属性，值会作为对象的属性名
• 建议name属性的值，最好和接口文档参数名一致

参数2：配置对象
hash 设置获取数据结构

• - true：JS对象（推荐）一般请求体里提交给服务器
• - false: 查询字符串

empty 设置是否获取空值

• - true: 获取空值（推荐）数据结构和标签结构一致
• - false：不获取空值