前端开发_AJAX基本使用

AJAX概念

AJAX是异步的JavaScript和XML(Asynchronous JavaScript And XML)。

简单点说,就是使用XMLHttpRequest对象与服务器通信。

它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。

AJAX最吸引人的就是它的"异步"特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。

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

使用AJAX:使用axios库与服务器进行数据通信

axios使用

axios基于 XMLHttpRequest 封装、代码简单

基本使用

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

  2. 使用 axios 函数

    • 传入配置对象
    • 再用 .then 回调函数接收结果,并做后续处理
    javascript 复制代码
    axios({
        url:'目标资源地址'
    }).then((result)=>{
        //对服务器返回的数据做后续处理
    })

url

统一资源定位符,简称网址

组成:协议+域名+资源路径

查询参数

url查询参数:

接在资源路径后用问号?隔开,参数之间用&连接

示例:http://xxx.com/xxx/xxx?参数1=值1&参数值2=值2

axios查询参数:

使用 axios 提供的 params 选项

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

javascript 复制代码
axios({
    url:'目标资源地址',
    params:{
        参数名:值
    }
}).then((result)=>{
    //对服务器返回的数据做后续处理
})

请求方法

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

常用请求方法:

请求方法 操作
GET 获取数据
POST 数据提交
PUT 修改数据(全部)
DELETE 删除数据
PATCH 修改数据(部分)
javascript 复制代码
axios({
    url:'目标资源地址',
    method:'请求方法'	//小写,可省略
}).then((result)=>{
    //对服务器返回的数据做后续处理
})

数据提交

使用data选项将数据传给服务端

javascript 复制代码
axios({
    url:'目标资源地址',
    method:'请求方法',
    data:{
        参数名:值
    }
}).then((result)=>{
    //对服务器返回的数据做后续处理
})

axios错误处理

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

javascript 复制代码
axios({
    //请求选项
}).then(result=>{
    //处理数据
}).catch(error=>{
    //处理错误
})

Http协议

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

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

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

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

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

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

状态码 说明
1xx 信息
2xx 成功
3xx 重定向消息
4xx 客户端错误
5xx 服务端错误
相关推荐
ssshooter7 分钟前
Tauri 2 Linux 上 asset://localhost 访问返回 403 避坑指南
前端·后端·架构
半世轮回半世寻10 分钟前
这 5 个 Elements 小技巧,真的能提高调试效率
前端·浏览器
kyriewen11 分钟前
for...of 的秘密:迭代器与可迭代对象,你也能创造“可循环”的东西
前端·javascript·面试
SuperEugene12 分钟前
前端 Git 协作规范实战:commit message + 分支管理 + 合并流程,告别冲突与混乱|工程化与协作规范篇
前端·javascript·vue.js·git·前端框架
泯仲13 分钟前
Zustand 状态管理实战详解:轻量高效的React状态方案
前端·javascript·react.js
Arthur147261228654713 分钟前
useTemplateRef 详解
前端·vue.js
张一凡9314 分钟前
做了一个AI聊天应用后,我决定试试这个状态管理库
前端·javascript·react.js
竹林81821 分钟前
从轮询到监听:我在NFT铸造项目中优化合约事件订阅的完整踩坑记录
前端·javascript
luckyCover21 分钟前
TypeScript 学习系列(初):充分认识 TypeScript
前端
进击的雷神31 分钟前
攻克JSON接口分页与对象数组处理:基于AJAX数据源的精准博客爬虫设计
爬虫·ajax·json·spiderflow