AJAX的基础知识点

AJAX是异步的JavaScript和XML。简单来说就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是他的异步 特性,也就是说它可以在不刷新页面的情况下,交换数据或更新页面

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

axios的使用

语法:

  1. 引入axios.js https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

  2. 使用axios函数,传入配置对象

    axios({
    url:"目标资源地址"

    }).then(result=>{
    //对服务器传入的资源进行处理
    })

认识URL

URL就是统一资源定位符,用于访问网址上的资源

URL有三部分组成

  1. 协议:超文本传输协议,规定浏览器和服务器之间传输数据的格式
  2. 域名:标记服务器在互联网中的方位
  3. 资源路径:标记资源在服务器中的方位
URL查询参数

浏览器提供个服务器的额外信息,让服务器返回浏览器想要的信息

https://xxx.com/xxx/xxx?参数名=值1&参数名2=值2

axios({
  url://目标的资源地址
  params:{
    参数名:值
  }
}).then(result=>{
  //对服务器返回的数据进行后续处理
})
常用的请求方法
  1. get 获取数据

  2. post 提交数据

  3. put 修改数据(全部)

  4. delete 删除数据

  5. patch 修改数据(部分)

    axios({
    url://目标资源地址
    method:
    data:{
    参数名:值
    }
    }).then({
    //对数据的后续处理
    })

axios的核心配置
  • url:请求url的网址
  • method:请求方法,get可以省略
  • params:查询参数
  • data:提交数据
axios的报错处理
axios({
  //请求选项
}).then(result=>{
  //处理数据
})/catch(error=>{
  //处理错误
})
HTTP协议-请求报文

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

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

Content-Type:浏览器携带的内容类型

在浏览器的开发者工具中的网络可以找到错误报文,更容易找到错误

由四部分组成:请求行,请求头,空行,请求体

HTTP协议-响应报文

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

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

由四部分组成:响应行,响应头,空行,响应体

HTTP响应状态码:

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

接口文档

接口文档是后端工程师定义的来描述接口的文章

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

form-serialize插件

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

先引入form-serilize插件

表单元素应该设置name属性,name属性会作为对象的属性名

建议name的属性值和接口文档的参数名一致

const form = document.querySelector('.example-form')
const data=  serialize(form,{hash:true,empty:true})

hash:设置获取数据结构 -true:返回的是JS对象 -false:查询字符串

empty:设置是否获取空值

Bootstrap弹框

功能:不离开当前页面,显示单独内容,供用户操作

  1. 引入bootstrap.css和bootstrap.js

  2. 准备弹框标签,确认结构

  3. 通过自定义属性,控制弹框的显示和隐藏

    <button data-bs-toggle = '弹框名称' data-bs-target = '弹框的的css选择器'> </button> <button data-bs-dismiss = 'modal'></button>//隐藏弹框

通过JS来控制弹框的显示和隐藏

当需要其他JS代码的时候用JS来控制弹框的显示和隐藏

  1. 先创建弹框对象

  2. 用弹框对象的显示方法

  3. 用弹框对象的隐藏方法

    <button type='button' class='btn btn-primary edit-btn'>编辑姓名</button>
    const MOdalDom = document.querySelector('modal')
    const modal = new bootstrap.Modal(MOdalDom)

    点击编辑姓名->弹框显示
    const edit = document.quertSelector('.edit-btn')
    edit.addEventListener('click',()->{
    modal.show()
    })

图片上传
  1. 获取图片文件

  2. 使用FormData携带图片文件

  3. 提交到服务器,获取图片url网址使用

    document.querySelector('').addEventListener('change',e=>{
    //获取图片文件
    console.log(e.target.files[0])
    //使用FormData携带图片文件
    const fd = new FormData()
    fd.append('img',e.taregt.files[0])
    axios({
    url:''
    method:'post'
    data:fd
    }).then(result=>{
    console.log(result)
    const imgurl = result.data.data.url
    document.querySelector('') = imgUrl
    })
    })

AJAX的原理

XMLHttpRequest

XMLHttpRequest对象用于与服务器交互,通过XMLHttpRequest可以在不刷新页面的情况下特定URL获取数据。这允许页面在不影响用户操作的情况下,更新页面内容。XMLHttpRequest在AJAX编程中被大量使用

使用XMLHttpRequest
  1. 创建XMLHttpRequest对象

  2. 配置请求方法和请求url地址

  3. 监听loadend事件,接收响应结果

  4. 发起请求

    const xhr = new XMLHttpRequest()
    xhr.open('请求方法','请求地址')
    xhr.addEventListener('loadend',()=>{
    //响应结果
    console.log(xhr.response)
    })
    xhr.send()

URLSearchParams对象

urlSearchParams可以帮助我们生成指定格式的查询参数

const paramObj = new URLSearchParams({
  参数名1:值1,
  参数名2:值2
})
const queryObj = paramObj.toString()
fetch

调用GET请求

fetch('请求网址').then(response=>{
  return response.json()
}).then(myJson=>{
  CONSOLE.LOG(myJson)
})

fetch返回的结果是一个Promise对象

调用POST请求

fetch默认发起的是GET请求,如果想要发送POST请求

fetch(
  '请求网址',{
	method:'POST'
  }).then(response=>{
  return response.json()
}).then(myJson=>{
  console.log(myJson)
})
Promise

Promise是异步编程的一种解决方案,之前异步编程是通过回调函数来实现的

const oReq = new XMLHttpRequest()
oReq.addEventListener('load',()=>{
  console.log(this.responseText)
})
oReq.open(
  'GET',
  '请求网址'
)
oReq.send

以上是老版AJAX的使用方法,以后几乎用不到

使用这种方法先创建xhr对象然后通过addEventListener监听load事件,然后触发后面的回调函数,如果在回调函数中继续加入setTimeout或者addEventListener监听代码,就会出现多层嵌套,也叫做 回调地狱

而Promise对象可以通过.then触发回调函数,返回的response.json()也是一个Promise对象

Promise将嵌套型回调调整为平铺型回调,完美的解决了回调地狱的问题

相关推荐
zl0_00_06 分钟前
xss-lab
前端·网络·xss
爱上你家菜包12 分钟前
Electron一小时快速上手
前端·javascript·electron
陈琦鹏13 分钟前
Vue3+Vite开发Electron桌面端问题记录
前端·javascript·electron
什么什么什么?35 分钟前
el-input实现金额输入
javascript·vue.js·elementui
xiaoyustudiowww1 小时前
JSP + Servlet 实现 AJAX(纯JS版)
java·javascript·servlet
狼性书生2 小时前
uniapp vue3实现的一款数字动画调节器件,支持长按、单点操作,提供丝滑的增减动画效果
前端·vue.js·微信小程序·小程序·uni-app
Jelena157795857922 小时前
爬虫获取微店商品快递费 item_feeAPI 接口的完整指南
开发语言·前端·爬虫
总是学不会.2 小时前
从“记住我”到 Web 认证:Cookie、JWT 和 Session 的故事
java·前端·后端·开发
xinran_Yi3 小时前
XSS-labs靶场通关
前端·xss
前端代码仔3 小时前
JS继承的几种实现方式
前端·javascript