axios请求及HTTP协议

发送请求的语法：

axios({
  url:'接口地址',
  methods:'请求方法',
  data:{
    参数名：参数值
   }
 }).then(()=>{}).catch(()=>{})

传递参数的语法：

接口地址?参数名=参数值 & 参数名=参数值

常用的请求方法有GET,POST,PUT,DELETE,PATCH

axios中的data,params两个配置项

params配置项常用于GET请求,用于将参数添加到URL的查询字符串中

axios({
  url:'',
  method:'GET',
  params:{
    参数名：参数值
   }
 })
 

data用于将参数添加到请求体中，通常用于POST请求

axios({  
  url:'',
  method:'POST',
  data:{
    参数名：参数值
   }
 }）

form-serialize插件：

能够快速地获取表单内容

语法：

先引入插件 利用<script src=""></script>

const data=serialize(form对象，{hash:true,empty:true})

data即为收集到的表单数据，会以对象的形式存在，form是表单对象

bootstrap弹框：

先引入Bootstrap.css和Bootstrap.js

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

准备弹框标签，给点击按钮绑定属性data-bs-toggle="modal" data-bs-target="需要打开的弹框的类名"

<!-- 显示弹框 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".myBox">
  显示弹框
</button>

关闭弹框：

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

通过js控制弹框显示隐藏：

创建弹框对象

const modalDom=document.querySelector('弹框的类名/id名')

const modal=new bootstrap.Modal(modalDom)

显示弹框

modal.show()

隐藏弹框

modal.hide()

XMLHttpRequest

xhr对象用于与服务器交互

语法：

xhr对象--携带查询参数

语法： 当只有一个参数需要携带时：

const xhr=new XMLHttpRequest()
xhr.open('GET','地址?参数名=参数值')
xhr.send()
//由于获取到的数据是json格式的，所以不可以直接渲染在页面上，需要先转化成js对象格式(利用JSON.parse()转化)
const data=JSON.parse(xht.response)
//data就是转化后的数据

再进行渲染

当不止一个参数时：

语法:

const 对象名=new URLSearchParams({
     参数名1：参数值1，
     参数名2：参数值2
   })
   
const 参数= 对象名.toString()

const xhr=new XMLHttpRequest()
xhr.open('GET','地址?${参数}')
xhr.send()
//由于获取到的数据是json格式的，所以不可以直接渲染在页面上，需要先转化成js对象格式(利用JSON.parse()转化)
const data=JSON.parse(xhr.response)

//data就是转化后的数据

再进行渲染页面

xhr对象，携带请求体参数

一般通过设置请求头，请求体携带JSON字符串

语法：

xhr.setRequestHeader('content-Type','application/json')

const 数据名={}

//将数据转化成json字符串格式
const 参数名=JSON.stringfy(数据名)

xhr.send(参数名)

HTTP协议--请求报文

HTTP协议：规定了浏览器发送及服务器返回的数据格式。

请求报文：指浏览器按照HTTP协议要求的格式，发送给服务器的内容。

请求报文的组成: 请求行+请求头部+空行+请求体

请求行格式：

 <method><request-URI><HTTP-version>
 
 //即<请求方法><请求资源的标识符><使用的HTTP协议版本>

HTTP协议--响应报文

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

由响应行，响应头，空行，响应体组成。