前端开发_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 回调函数接收结果，并做后续处理

   axios({
       url:'目标资源地址'
   }).then((result)=>{
       //对服务器返回的数据做后续处理
   })
   

url

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

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

查询参数

url查询参数：

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

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

axios查询参数：

使用 axios 提供的 params 选项

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

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

请求方法

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

常用请求方法：

请求方法	操作
GET	获取数据
POST	数据提交
PUT	修改数据（全部）
DELETE	删除数据
PATCH	修改数据（部分）

axios({
    url:'目标资源地址',
    method:'请求方法'	//小写，可省略
}).then((result)=>{
    //对服务器返回的数据做后续处理
})

数据提交

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

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

axios错误处理

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

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

Http协议

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

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

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

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

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

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

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