Ajax第一天
一、服务器
1.服务器的本质：也是一台电脑
2.服务器的作用：
①存储一个网站的文件（HTML、CSS、JS、图片、音乐.....） ②提供网站的文件给用户
3.如何获得服务器
①购买（京东、淘宝……） ②租赁（阿里云、腾讯云……）
4.资源
①服务器上的 网页(html文件)、图片、音乐、视频、字体文件、CSS文件、JS文件等等都称之为资源。所以资源代指服务器上存储的内容。
②通俗的讲，我们浏览网页时，从网络当中看到的内容都叫做资源。
③数据也是资源：网页中的数据，也是服务器对外提供的一种资源。例如股票数据、各行业排行榜等。服务器多数情况都使用数据表的方式来存储数据，和我们平时见到的表格差不多，形式如下：
二、客户端
1.概念：在前端开发中，客户端特指“Web 浏览器”。
2.作用：将互联网世界中的 Web 资源加载、并呈现到浏览器窗口中供用户使用。
3.请大家例举最常见的“客户端浏览器”都有哪些：谷歌、火狐、edge、safari
4.URL 地址（统一资源定位符）：生活中的地址，表示地球上的一个确切的地理位置，URL 地址，表示服务器上每个资源的确切位置。
5.客户端与服务器通信的过程
客户端与服务器之间的通信过程，分为请求 - 响应两个步骤。其中：
（1）请求的概念：客户端通过网络去找服务器要资源的过程，叫做“请求”
（2）响应的概念：服务器把资源通过网络发送给客户端的过程，叫做“响应”
三、Ajax
1.Ajax 是浏览器中的技术：
用来实现客户端网页请求服务器的数据。它的英文全称是 Asynchronous Javascript And XML，简称 Ajax。
Asynchronous（异步）、XML（ 可扩展标示语言 ）
<script>
/*
异步
1 代码是执行， 但是结果不会马上得到
1 你寄出一封信 信 马上到 目的人手中
2 你妈妈出门喊你回家吃饭， 你马上就回到家了
3 你刚刚做上出租车， 你马上到家了？
2 可以同时做多件事
1 你现在再大街上 和 三个大妈在吵架
每一个人 同时在输出 - 你先骂我 - 你骂我了
同步
1 代码是执行了，但是结果会马上得到
1 你同桌 给你一拳 马上就会感觉到痛
2 饮水机大水 一按下按键 水出来
3 你现在把你加 电源开关关掉 立马就断网
2 按顺序一件一件做事
1 核酸检查
排队的一个人一个人在进行
*/
// 同步的代码 （以前学过的程序 绝大部分都是同步的代码 按顺序-马上得出结果）
// console.log( document.querySelector("body") ); // 1 有body
// console.log( document.querySelector("div") ); // 2 没div
// 异步的代码 顺序 -
// 定时器和延时器
// console.log(1);
// setTimeout(() => {
// console.log('延时器');
// }, 0);
// console.log(3);
setInterval(() => {
document.querySelector("h1").innerText = Date.now();
}, 10);
setInterval(() => {
document.querySelector("h2").innerText = Date.now();
}, 10);
/*
异步代码
1 代码是执行了，不能马上得到结果 延迟一点来执行
2 不一定按照正常上下顺序来执行代码 - 同时进行
3 异步代码 定时器和延时器
*/
</script>
2.使用 Ajax 请求数据的 5 种方式
①POST : 向服务器新增数据
②GET : 从服务器获取数据
③DELETE : 删除服务器上的数据
④PUT : 更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）
⑤PATCH : 更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）
3.请求方式小结
（1）操作服务器上的数据除了要使用 URL地址，还需要指定 请求方式
（2）操作服务器上的数据时： ①获取服务器上的数据，需要使用 ________ 方式 ②新增（添加）数据，需要使用 ________ 方式 ③删除数据，需要使用 ________ 方式 ④完整修改（更新）数据，需要使用 ________ 方式 ⑤修改（更新）部分数据，需要使用 ________ 方式
4.Ajax基础用法
（1）说明：通过原生代码，完全可以实现Ajax请求，为了第一天学习方便，我们选择使用 axios 库，原生代码后续学习
（2）axios（发音：艾克C奥斯） 是前端圈最火的、专注于数据请求的库。
（3）在后面的 Vue、React 课程中都会用到 axios 来请求数据。
中文官网地址：www.axios-http.cn/
英文官网地址：www.npmjs.com/package/axi…
（4）axios基础语法
axios({
method:"请求类型"
url："请求url地址"
}).then((result)=>{
// then 用来指定请求成功之后的回调函数
// 形参中的result是请求成功之后的结果
})
（5）案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>02-第一次获取服务器上的数据.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- 1 引入axios -->
<script src="./lib/axios.js"></script>
<script>
/*
想要获取服务器上的数据 url ，它是后端程序员提供
http://www.itcbc.com:3006/api/getbooks 图书数据
我们需要通过代码的方式 把服务器上的数据 变成 一个普通的变量 数组
给我数组了 我就懂得如何去页面渲染了 第三方的一个js的帮助
axios
1 下载 引入到项目中
2 根据url的地址 来编写代码
1 获取数据 -get （ 请求类型 1 get 2 post 3 delete 4 put 5 patch ）
2 编写代码
*/
// 开始向服务器 发送请求 索要数据
axios({
// method:"请求类型",
// url:"资源地址",
method: "get",
url: "http://www.itcbc.com:3006/api/getbooks",
}).then((result) => {
// 如果这个代码可以触发 数据回来了
// console.log(result); // 服务器给我们返回的数据！！
// 数组数据
// 给你了一个数组 arr 数组的格式
const arr = result.data.data; // 字段的名称 id、bookname、author。publisher 固定
// console.log(arr);
// 你 有能力 根据 数组 来 显示到页面中
render(arr);
});
function render(arr) {
let html = arr
.map(
(value) => `
<tr>
<td>${value.id}</td>
<td>${value.bookname}</td>
<td>${value.author}</td>
<td>${value.publisher}</td>
</tr>
`
)
.join("");
document.querySelector("tbody").innerHTML = html;
}
</script>
</body>
</html>
5.根据数组渲染页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>03-根据数组渲染页面.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
const arr = [
{
id: 5653,
bookname: "我就加一条",
author: "练练手",
publisher: "明天就删",
},
{
id: 5654,
bookname: "我就加一条",
author: "练练手",
publisher: "明天就删",
},
{
id: 5655,
bookname: "我就加一条",
author: "练练手",
publisher: "明天就删",
},
];
render();
function render() {
let html = arr
.map(
(value) => `
<tr>
<td>${value.id}</td>
<td>${value.bookname}</td>
<td>${value.author}</td>
<td>${value.publisher}</td>
</tr>
`
)
.join("");
// document.querySelector('tbody').innerHTML = html;
}
</script>
</body>
</html>
6.第一次获取服务器上的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>04-第一次获取服务器上的数据</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>id</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
</tr>
</thead>
<tbody></tbody>
</table>
<!-- 1 引入axios -->
<script src="./lib/axios.js"></script>
<script>
/*
1 资源的地址 问后端要即可
2 我们负责用对 代码 确保 数据可以请求成功
3 不需要纠结 result的数据格式
只需要打印出result ，在里面 resut.data 找到数据
自己截图数据
4 把数据 存在自己的一个数组中
5 使用以前教过知识把数组渲染到页面中
*/
axios({
method: "get",
url: "http://www.itcbc.com:3006/api/getbooks",
}).then((result) => {
console.log(result);
// result 请求成功的结果
// then 固定！！ 是axios封装的一个代码 意思 服务器把数据返回了，then里面的代码就会被触发
// 底层套了两层data 也是后台程序员做的，不用纠结 别人怎么定义的 我只负责如何拿对
const arr = result.data.data; // 字段的名称 id、bookname、author。publisher 固定
render(arr);
});
function render(arr) {
let html = arr
.map(
(value) => `
<tr>
<td>${value.id}</td>
<td>${value.bookname}</td>
<td>${value.author}</td>
<td>${value.publisher}</td>
</tr>
`
)
.join("");
document.querySelector("tbody").innerHTML = html;
}
</script>
</body>
</html>
