Ajax 的基础用法
概念
Ajax 是浏览器中的技术,用来实现客户端网页请求服务器的数据。
它的英文全称是 Asynchronous Javascript And XML,简称 Ajax。
使用 Ajax 请求数据的 5 种方式
序号 | 请求方式 | 描述 |
---|---|---|
1 | POST | 向服务器新增数据 |
2 | GET | 从服务器获取数据 |
3 | DELETE | 删除服务器上的数据 |
4 | PUT | 更新服务器上的数据(侧重于完整更新:例如更新用户的完整信息) |
5 | PATCH | 更新服务器上的数据(侧重于部分更新:例如只更新用户的手机号) |
post请求
- post请求侧重点:增加数据/向服务器新增数据
- 如果希望将本地数据添加到服务端 --- 通过Ajax发送post请求,到服务器
get请求
- get是用来获取数据的,如果本地没有数据,希望将服务器的数据得到 --- 通过Ajax发送get请求,到服务器
- get请求侧重点:获取数据/从服务器获取数据
delete请求
- DELETE 请求用于删除服务器上的数据
put请求
- PUT 请求用于更新服务器上的数据(侧重于完整更新:例如更新用户的完整信息)
patch请求
- PATCH 请求用于更新服务器上的数据(侧重于部分更新:例如只更新用户的手机号)
Ajax使用
使用纯粹的原生js实现Ajax请求
利用第三方提供的js库实现
jQuery(了解)
jQuery实现Ajax请求步骤
- 必须先引入jQuery文件(jQuery文件本质是一个js文件)
- 使用jQuery提供的语法实现Ajax请求
语法:
$.ajax({
// 1. 必须设置请求方式,type是固定写法
type: '请求方式',
// 2. 必须设置url地址
url: '请求地址',
// 3. 获取fwq响应结果
success: function(形参) {
// 形参就是服务器响应结果
}
})
<!-- 点击按钮获取服务端数据 --> <input type="button" value="按钮"> <script src="./lib/jquery.js"></script> <script> // 1. 按钮注册事件 let btn = document.querySelector('input') btn.addEventListener('click', function () { // 2. 发送Ajax请求 $.ajax({ type: 'get', url: 'http://www.liulongbin.top:3006/api/getbooks', // success: function(res) { // // res形参就是服务器响应结果 success: function({data:res}) { console.log(res) } }) }) </script>
axios(推荐使用)
axios(发音:艾克C奥斯) 是前端圈最火的、专注于数据请求的库。
基本语法如下:
axios({
method: '请求类型',
url: '请求的URL地址'
}).then(function(*形参*){
// .then 用来指定请求成功之后的回调函数
// 形参就是服务器响应结果
})
基于 axios 发起 GET 请求
axios({ method: 'get', url: 'http://www.liulongbin.top:3006/api/getbooks', }).then(function(res){ // res服务器端应结果 console.log(res) })
上面代码查询回来的是所有图书的列表数据,如果想指定查询的条件,可以通过 params 选项来指定查询的参数
在使用 Ajax 发起 GET 请求时, params中的参数,会以 ?键=值 的形式拼接到 URL 地址的末尾
http://www.liulongbin.top:3006/api/getbooks?id=2
注意:? 后面的都是查询参数,查询参数的键和值之间使用 = 进行分隔
axios({ method: 'get', url: 'http://www.liulongbin.top:3006/api/getbooks', params: {//查询参数 id : 2, } }).then(function(res){ // res服务器端应结果 console.log(res) })
如果要携带多个参数,只需要在 params 对象中指定多个查询参数项即可。
最终,在 URL 地址的末尾,多个查询参数之间使用 & 符号进行分隔:
http://www.liulongbin.top:3006/api/getbooks?id=2&bookname=红楼梦
axios({ method: 'get', url: 'http://www.liulongbin.top:3006/api/getbooks', params: {//查询参数 id : 2 bookname : '红楼梦', } }).then(function(res){ // res服务器端应结果 console.log(res) })
注意:
- 请求方式,get大小写都可以
- 现在get请求默认获取服务端所有数据
- 如何根据自己设定条件获取数据
a)将用户自己设置的条件发送给服务端
b)在axios中,通过params设置查询条件 ----查询参数
c)params对象中的键值对,键不可自己乱写,按照后端程序员要求设置
d)设置多个查询条件时,多个查询参数是且的关系,都需要满足的数据才能返回
e)查询参数一定要和后端程序员配合,人家实现了的,我们才能使用,没实现不能用
URL 编码*
在 URL 地址中不允许出现中文、空格等特殊字符,因此浏览器会自动对 URL 地址内的中文进行转换处理
浏览器内置了 encodeURI() 和 decodeURI() 两个方法,用来实现 URL 的编码和解码处理:
将汉字进行编码的方法: encodeURI('汉字')
将编码后的结果进行解码: decodeURI('编码')
console.log(encodeURI('红楼梦')) console.log(decodeURI('%E7%BA%A2%E6%A5%BC%E6%A2%A6'))
基于 axios 发起 POST 请求
post请求:向服务器增加数据,一般用户注册会使用post请求
使用 axios 发起 POST 请求时,只需要将 method属性的值设置为 'POST' 即可:
axios({ method: 'post', url: 'http://www.liulongbin.top:3006/api/post', // data:向服务端添加的数据 data: { uname: '小明', age: 123, pwd: 666666 } }).then(function(res){ console.log(res) })
模拟器查看ajax请求数据
get请求与post请求的区别:
get请求
a)get请求的侧重点是向服务端要数据(获取数据)
b)get请求在获取数据同时也可以向服务端发送数据,通过查询参数发送
c)get请求通过查询参数发送数据时,可以将查询参数键值对拼接到url后面,有固定格式 ?键=值&键=值
d)get请求安全性比post请求低(数据拼接到url后面,用户可见)
post请求
a)post请求的侧重点是向服务端增加数据(给与数据)
b)post请求本身就要向服务端发送数据,通过数据体data发送数据
c)post请求通过数据体data发送数据时,不会将查询参数拼接到url后面
d)post请求安全性比get请求安全性高
请求报文 & 响应报文
请求报文 -
格式
请求报文由请求行(request line)、请求头部( header )、空行 和 请求体 4 个部分组成。图示如下:
请求报文:记录了客户端向服务端发送数据相关信息(就是一个记录的作用)
请求头:请求方式,请求路径,协议类型
请求体:Host : 主机名,Content-Type: 请求数据类型 ,Connection: 网络状态
注意:
在浏览器中,GET 请求比较特殊,它只有请求头,没有请求体。
在浏览器中,POST、PUT、PATCH、DELETE 请求既有请求头,又有请求体。
响应报文
格式
响应报文由状态行、响应头部、空行 和 响应体 4 个部分组成。图示如下:
响应报文:记录了服务端向客户端返回数据的相关信息(就是一个记录的作用)
状态行:协议类型 状态码 对状态的描述
响应头:Content-Type:服务端对客户端返回响应数据类型 Connection:请求完成后的网络状态
响应体:Response 记录了响应数据
状态码
响应状态码
概念:http 响应状态码(Status Code)由三位数字组成,用来标识响应成功与否的状态
简单来说:状态码是响应报文中的一个数字(只有发送ajax请求才会出现状态码)
作用:用来描述当前ajax请求状态(是否成功),客户端浏览器根据响应状态码,即可判断出这次 http 请求是成功还是失败了。
状态码分类:
-
以数字2开头的状态码, 2XX 表示客户端和服务端通信是成功的
-
以数字3开头的状态码, 3XX 表示客户端和服务端通信时,服务端资源路径发生了改变(重定向)
-
以数字4开头的状态码, 4XX 表示客户端在发送ajax请求时发生错误,导致服务端无法正确返回响应结果
-
以数字5开头的状态码, 5XX 表示服务端发生错误,导致服务端无法返回响应结果
常见的 http 响应状态码
业务状态码
http 响应状态码 Vs 业务状态码
-
所处的位置不同:
在响应头的状态行中所包含的状态码,叫做“响应状态码”
在响应体的数据中所包含的状态码,叫做“业务状态码”
-
表示的结果不同:
响应状态码只能表示这次请求的成功与否(成功地失败了)
业务状态码用来表示这次业务处理的成功与否
-
通用性不同:
响应状态码是由 http 协议规定的,具有通用性。每个不同的状态码都有其标准的含义,不能乱用。
业务状态码是后端程序员自定义的,不具有通用性。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性