谷歌,IE/Edge , Safari
协议 主机名 端口号 资源存放路径
http: 使用明文传输 不安全
https: s 表示 SS L加密协议,安全
默认端口号
http: 80
https: 443
在 URL 地址中不允许出现中文、空格等特殊字符,因此浏览器会自动对 URL 地址内的中文进行转换处理。例如上面的地址:
浏览器内置了 encodeURI()
和 decodeURI()
两个方法,用来实现 URL:
Ajax 是浏览器中的技术:用来实现客户端网页请求服务器的数据。 它的英文全称是 Asynchronous Javascript And
请求方式 | 描述 |
---|---|
POST | 向服务器新增数据 |
GET | 从服务器获取数据 |
DELETE | 删除服务器上的一条数据 |
PUT | 更新服务器上的数据(侧重于完整更新)全量更新 |
PATCH | 更新服务器上的数据(侧重于部分更新)打补丁 局部更新 |
是前端圈最火的、专注于数据请求的。
axios({
method: '请求的类型',
url: '请求的URL地址'
}).then((result) => {
// .then 用来指定请求成功之后的回调函数
// 形参中的 result 是请求成功之后的结果
})
axios({
method : 'GET', // 请求方式
url : 'http://www.liulongbin.top:3009/api/getbooks' // 请求地址
}).then(result => {
console.log(result)
})
// 发起get请求,并传入查询参数
// 查询参数的本质 : 把参数 以?拼接在url后面 key = value 即 url?key=value
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3009/api/getbooks',
params: { // 查询参数
id : 1
}
}).then(result => {
console.log(result)
})
/*
// 上面这种写法就相当于:
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3009/api/getbooks?id=1'
}).then(result => {
console.log(result)
})
*/
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3009/api/getbooks',
params: {
id : 1,
publisher: '北京图书出版社'
}
}).then(result => {
console.log(result.data)
})
/*
// 上面这种写法就相当于:
// 两个及以上参数用&符进行连接
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3009/api/getbooks?id=1&publisher=%E5%8C%97%E4%BA%AC%E5%9B%BE%E4%B9%A6%E5%87%BA%E7%89%88%E7%A4%BE'
}).then(result => {
console.log(result)
})
*/
示例图:
所以需要对result进行解构赋值:
axios({
method : 'GET', // 请求方式
url : 'http://www.liulongbin.top:3009/api/getbooks' // 请求地址
}).then(({data:{data}}) => { // 深层解构
console.log(data)
})
let btnPOST = document.querySelector('#btnPOST')
btnPOST.addEventListener('click', function () {
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3009/api/addbook',
data: {
bookname: '美人是如何炼成的',
author: 'Tricia',
publisher: '个人出版社'
}
}).then(({ data: res }) => {
console.log(res)
})
})
由于提交的数据太多,所以没有把数据拼接到 URL 的末尾;而是放到了独立的请求体中。
let btnPOST = document.querySelector('#btnPOST')
btnPOST.addEventListener('click', function () {
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3009/api/addbook',
data: {
bookname: '美人是如何炼成',
author: 'Tricia',
publisher: '个人出版社'
}
}).then(({ data: res }) => {
console.log(res)
})
})
请求报文由请求行(request line)、请求头部( header )、空行 和 请求体 4 个部分组成。图示如下:
注意:
响应报文由状态行、响应头部、空行 和 响应体 4 个部分组成。图示如下:
概念:
http 响应状态码(Status Code)由三位数字组成,用来标识响应成功与否的状态。
作用:
客户端浏览器根据响应状态码,即可判断出这次 http 请求是成功还是失败了。
状态码 | 状态码描述 | 说明 |
---|---|---|
200 | OK | 请求成功。 |
201 | Created | 资源在服务器端已成功创建 |
304 | Not Modified | 资源在客户端被缓存,响应体中不包含任何资源内容 |
400 | Bad Request | 客户端的请求方式、或请求参数有误导致的请求失败 |
401 | Unauthorized | 客户端的用户身份认证未通过,导致的此次请求失败 |
404 | Not Found | 客户端请求的资源地址错误,导致服务器无法找到资源 |
500 | Internal Server Error | 服务器内部错误,导致的本次请求失败 |
正确区分响应状态码和业务状态码的不同,是保证使用 Ajax 不迷茫的必要前提。从如下 3 个方面进行区分: ① 所处的位置
② 表示的结果
③ 通用
使用 Ajax 请求数据时,被请求的 URL 地址,就叫做数据接口(简称:接口或 API 接口)。 同时,每个接口必须有对应的请求方式。例如: