前端开发_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 服务端错误
相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰7 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪7 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy8 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom9 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试