Ajax
服务器相关的基础概念
服务器
服务器的本质：也是一台电脑。
服务器的作用：
存储一个网站的文件（HTML、CSS、JS、图片、音乐.....）
提供网站的文件给用户
数据
服务器多数情况都使用数据表的方式来存储数据，和我们平时见到的表格差不多，形式如下：
客户端
概念：在前端开发中，客户端特指“Web 浏览器”。
作用：将互联网世界中的 Web 资源加载、并呈现到浏览器窗口中供用户使用。
客户端与服务器小结
- 服务器的本质是：一台电脑
- 在前端开发中，客户端指的是：浏览器
- 网页中用到的资源存储在服务器
资源与 URL 地址
URL 地址（统一资源定位符）
生活中的地址，表示地球上的一个确切的地理位置
URL 地址，表示服务器上每个资源的确切位置。
服务器上的每个资源，都对应着独一无二的URL地址
数据也是服务器上的资源
对数据的操作（增删改查），也对应着不同的URL地址
URL 地址小结
通过URL是可以访问到服务器上的资源
对服务器上的数据进行远程操作（查询、新增、删除、修改）是需要对应的URL
客户端与服务器通信
客户端与服务器之间的通信过程，分为请求 - 响应两个步骤。其中：
请求的概念：客户端通过网络去找服务器要资源的过程，叫做“请求”
响应的概念：服务器把资源通过网络发送给客户端的过程，叫做“响应”
请求是由客户端发送的
响应由服务器做出
数据对于一个网页来是非常重要的
数据是网页的灵魂！！！离开数据之后，哪怕这个网页做的再漂亮，也没有实际的作用。
在网页中如何使用服务器的数据 那需要用到的技术就是Ajax
什么是 Ajax
Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。
通俗来说就是客户端向服务器发起数据请求 服务器得到响应过后 最后再把结果给到客户端
异步---同步
1.异步
- 代码是执行，但是结果不会马上得到
- 可以同时做很多件事
- 不一定按照上下顺序来执行代码
2.同步
- 代码是执行了，但是不会马上得到结果
- 按顺序一件一件做事
小结：ajax
- 先服务器请求数据的代码--异步
- 数据格式 是json数据格式--字符串
请求方式
客户端浏览器在请求服务器上的数据时，根据操作性质（增删改查）的不同，可以分为以下 5 种常见的操作
| 序号 | 请求方式 | 描述 |
|---|---|---|
| 1 | POST | 向服务器新增数据 |
| 2 | GET | 从服务器获取数据 |
| 3 | DELETE | 删除服务器上的数据 |
| 4 | PUT | 更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息） |
| 5 | PATCH | 更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号） |
GET 请求
GET 请求用于从服务器获取数据：
POST 请求
POST 请求用于向服务器新增数据：
DELETE 请求
DELETE 请求用于删除服务器上的数据：
PUT 请求
PUT 请求用于更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）：
PATCH 请求
PATCH 请求用于更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）：
请求方式小结
- 操作服务器上的数据除了要使用 URL地址，还需要指定---请求方式
- 操作服务器上的数据时：
- 获取服务器上的数据，需要使用 GET 方式
- 新增（添加）数据，需要使用 POST 方式
- 删除数据，需要使用 DELETE方式
- 完整修改（更新）数据，需要使用 PUT方式
- 修改（更新）部分数据，需要使用 PATCH方式
axios
axios（发音：艾克C奥斯） 是前端圈最火的、专注于数据请求的库。
Vue、React 中都会用到 axios 来请求数据。
中文官网地址：www.axios-http.cn/
英文官网地址：www.npmjs.com/package/axi…
axios 的基础语法
axios 的基本语法如下：
基于 axios 发起 GET 请求
测试 GET 请求的 URL 地址为 www.itcbc.com:3006/api/getbook…
第一次获取服务器上的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>第一次获取服务器上的数据</title>
</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>
/*
想要获取服务器上的数据 uel ，它是后端程序员提供
http://www.itcbc.com:3006/api/getbooks 图书数据
我们需要通过代码的方式 把服务器上的数据 变成 一个普通的变量---》 数组
然后把数组渲染到网页上 需要引入第三方的js帮助
axios
1.下载 引入导到项目中
2.根据url的地址 来编写代码
（1）先服务端获取数据 --get
（2）编写代码*/
axios({
// method:'请求类型',
// url:'请求URL地址',
method: "get",
url: "http://www.itcbc.com:3006/api/getbooks",
}).then((result) => {
//如果这里的代码触发 数据就请求回来了
// console.log(result); //服务器 给我们返回的数据
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>
Ajax 的基础用法
GET 请求的查询参数
刚才查询回来的是所有图书的列表数据，如果想指定查询的条件，可以通过 params 选项来指定查询的参数：
params是固定的 不可改写
id是可变的
-
在实际开发中，我们可以在前端 指定参数来查询对应的数据
-
指定参数的 参数代码写法必须写在params 对象中，以键值对的形式存在
-
params 对象中，写什么样的键值对 规定要由后端来决定 不懂可以去问后端
<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> axios({ // 请求方式 method: "get", //请求地址 url: "http://www.itcbc.com:3006/api/getbooks", //请求的参数 parent:{ //固定的 //键值对 是需要问后端程序员的 // id:1314 后端就会返回id为1314的那一条参数 // bookname:'怪物奇语' 后端就会返回 书名为 怪物奇语的一堆的数据 // 前提是后端那边写了这个怪物奇语这个数据，要不然就是不存在的数据 } }).then((result) => { //如果这里的代码触发 数据就请求回来了 // console.log(result); //服务器 给我们返回的数据 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>在 GET 请求中携带多个查询参数
如果要携带多个参数，只需要在 params 对象中指定多个查询参数项即可。示例代码如下：
补充直接拼接参数
这两者是等价的的关系
多个参数演示 这两者也是等价关系
语法？属性名=属性值&属性名=属性值
实际开发还是推荐第一种
基于 axios 发起 POST 请求
使用 axios 发起 POST 请求时，只需要将 method 属性的值设置为 'POST' ，URL地址改为 '/api/addbook'：
<body>
<button>新增数据</button>
<script src="./lib/axios.js"></script>
<script>
const button = document.querySelector("click", function () {
//执行 post 新增数据
axios({
method: "post", //post请求
url: "http://www.itcbc.com:3006/api/addbook", //url
//参数
data: {
//这里的数据不能乱写 属性名和属性值
bookname: "幻城",
author: "郭敬明",
publisher: "春风文艺出版社",
},
}).then((result) => {
//会告诉我们 当前操作成功与否
console.log(result);
});
});
</script>
</body>
案例
接口相关的基础概念
接口的概念
使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）。
同时，每个接口必须有对应的请求方式。例如：
www.itcbc.com:3006/api/getbook… 获取图书列表的接口(GET 请求)
http://www. itcbc.com:3006/api/addbook 添加图书的接口（POST 请求）
接口文档的概念
接口文档就是接口的使用说明书，它是我们调用接口的依据。
接口文档是后端程序员编写的
接口文档的格式
| 接口文档的格式 | 说明 |
|---|---|
| 接口名称 | 接口的名称，用来快速区分每个接口的作用。如：登录接口、添加图书接口 |
| 接口 URL | 客户端发起 Ajax 调用此接口时，请求的 URL 地址 |
| 请求方式 | 接口的请求方式，如：GET、POST、PUT、DELETE 等 |
| 请求参数 | 请求此接口时，需要发送到服务器的查询参数或请求体 |
| 返回示例 | 当接口请求成功后，服务器响应回来的数据的基本格式 |
| 返回参数说明 | 接口响应结果的详细描述 |
network工具
介绍
- network，翻译为 “网络”
- 浏览器的开发者工具中，有一个面板为 network。（新版的chrome浏览器是中文版本的）
- 该工具可以抓取到所有的网络请求，当然包括ajax请求
- 我们可以使用该工具，查看当前Ajax请求的详细信息
- 查看请求方式
- 查看请求的URL地址
- 查看请求参数
- 查看响应结果
注意：有关Ajax方面的错误，不应只查看 “Console”面板，必须通过 “Network”面板进行排查
最后来个小案例 根据接口文档要求 渲染新闻数据即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>根据接口文档要求 渲染新闻数据</title>
<style>
table{
border-collapse: collapse;
text-align: center;
margin: 0 auto;
}
td{
padding: 15px;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>id</th>
<th>标题</th>
<th>来源</th>
<th>总数</th>
<th>图片</th>
<th>时间</th>
</tr>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</thead>
</table>
<script src="./lib/axios.js"></script>
<script>
axios({
//请求类型
method:'get',
//请求地址
url:'http://www.itcbc.com:3006/api/news',
}).then((result)=>{
// console.log(result);
const arr = result.data.data;
// console.log(arr);
render(arr);
})
function render(arr){
let html = arr.map((value)=>`
<tr>
<td>${value.id}</td>
<td>${value.title}</td>
<td>${value.source}</td>
<td>${value.cmtcount}</td>
<td> <img src="http://www.itcbc.com:3006${value.img}" alt=""> </td>
<td>${value.time}</td>
</tr>`).join(''); //数组拼接成字符串
document.querySelector('tbody').innerHTML = html;
}
</script>
</body>
</html>
根据接口文档 渲染电竞赛事新闻数据即可
``
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
border-collapse: collapse;
/* white-space: nowrap; */
background-color: bisque;
border: 2px solid #000;
font-weight: 700;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>新闻唯一ID</th>
<th>发布时间</th>
<th>文章标题</th>
<th>文章描述</th>
<th>文章来源</th>
<th>封面图片</th>
<th>文章地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
<script src="./lib/axios.js"></script>
<script>
axios({
method: "get",
url: "http://api.tianapi.com/esports/index",
params: {
key: "fb343d04fb667c84a00261653e4384a7",
num: "10",
},
}).then((result) => {
console.log(result);
const arr = result.data.newslist;
// console.log(arr);
render(arr);
});
function render(arr) {
let html = arr
.map(
(value) => `
<tr>
<td>${value.id}</td>
<td>${value.ctime}</td>
<td>${value.title}</td>
<td>${value.description}</td>
<td>${value.source}</td>
<td><img src="${value.picUrl}" alt=""></td>
<td><a href="${value.url}">文章地址</a></td>
</tr>`
)
.join("");
document.querySelector("tbody").innerHTML = html;
}
</script>
</body>
</html>
服务器原因导致图片未正常显示
