目录
CSS3动画
一、transition过渡动画
1、过渡动画
2、3D动画
（1）transform
（2）perspective
（3）perspective-origin
（4）transform-origin
二、切屏动画
三、animation动画
1、定义场景
2、定义动画
Ajax应用
一、get请求
1、Ajax介绍
2、创建 XMLHttpRequest 对象
3、get、post请求
4、url传参
5、HTTP状态码
（1）就绪状态-readyState属性
（2）响应状态-status状态
（3）响应结果-responseText属性
二、post请求
1、MIME编码类型
2、post请求方式
（1）指定服务器端处理页面
（2）指定服务器端处理页面
（3）发送请求
三、json数据处理
1、json介绍
2、json使用
（1）json取值
（2）json赋值
3、json数组
（1）json数组
（2）json数值取值
4、json系统函数
（1）JSON.parse
（2）JSON.stringify()
5、json在Ajax中的应用
CSS3动画
一、transition过渡动画
1、过渡动画
功能：可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分
语法：transition:样式名 时间 动画类型 延时;
说明：
样式名：property指定要过渡的样式属性，比如width、height、background-color等。
时间：duration指定过渡的持续时间，以秒（s）或毫秒（ms）为单位。例如，1s表示过渡持续1秒，500ms表示过渡持续500毫秒。
动画类型：timing-function指定过渡的动画类型。它可以取以下值：
linear：线性动画效果，匀速进行过渡。ease：动画开始缓慢，然后加速进行，在结束时再次缓慢。ease-in：动画开始缓慢，然后加速进行。ease-out：动画开始较快，然后减速进行。ease-in-out：动画开始缓慢，然后加速进行，在结束时再次缓慢。step-start：立即过渡到最终状态，没有过渡效果。step-end：平滑地过渡到最终状态。
延时：delay指定过渡的延迟时间，以秒（s）或毫秒（ms）为单位。
2、3D动画
（1）transform
功能：transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
语法：transform:转换方法();
（2）perspective
功能：perspective 属性定义 3D 元素距视图的距离，以像素计。这个属性可以允许我们改变 3D 元素查看 3D 元素的视图。而当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
语法：perspective: number | none;
（3）perspective-origin
功能：perspective-origin 属性可以定义 3D 元素所基于的 X 轴和 Y 轴。当为元素定义 perspective-origin 属性时，它的子元素会获得透视效果，而不是元素本身。另外需要注意的是该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素
语法：perspective-origin：x轴上的位置 y轴上的位置;
（4）transform-origin
功能：设置被转换元素的基点位置。
语法：transform-origin: x轴上的位置 y轴上的位置 轴上的位置;
以下是transform应用于元素的2D或3D转换方法：
| none | 定义不进行转换。 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) | 定义 2D 转换。 |
| translate3d(x,y,z) | 定义 3D 转换。 |
| translateX(x) | 定义转换，只是用 X 轴的值。 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 |
| scale(x[,y]?) | 定义 2D 缩放转换。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) | 为 3D 转换元素定义透视视图。 |
二、切屏动画
切屏动画简单解释一下：我们以四图全屏切屏为例，先制作一个大的div，设置其宽高分别为100%，即全屏显示。然后制作4个子元素可以是<div><span><img>等等，依次放入4张图片，并且设置图片的宽高同父级的一样。将父级元素整体向上移动一屏之后，将显示出第2张图片，依次方法显示第3、第4张图片，即现实切屏。
三、animation动画
1、定义场景
语法：@keyframes 场景名称 {
from{
样式名:值;
}to{
样式名:值;
}
}
说明：@keyframes：定义动画效果的关键帧。
场景名称：自定义的动画名称，可用于将动画应用于元素。
from：表示动画的起始状态，可用百分比(0%)代替。
to：表示动画的结束状态，可用百分比(100%)代替。
样式名: 值：在每个关键帧中指定要应用的样式和属性值。
2、定义动画
语法：animation:场景名称 播放时长 动画类型 播放次数;
说明：播放时长：单位为秒。默认值是 0。
动画类型：linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
播放次数：数字| infinite。
infinite为无限次播放
Ajax应用
一、get请求
1、Ajax介绍
Ajax全称Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种在 Web 应用中通过异步发送 HTTP 请求向服务器获取内容，并使用这些新内容更新页面中相关的部分，而无需重新加载整个页面的 Web 开发技术。通俗来讲Ajax就是在不重新加载整个页面的情况下去和服务器交换数据并更新部分网页。这可以让网页更具有响应性，因为只请求了需要更新的部分。另外，它不是新的编程语言，而是一种使用现有标准的新方法。
2、创建 XMLHttpRequest 对象
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
语法：var 请求对象 = new XMLHttpRequest();
指定接收响应结果的函数：请求对象.onreadystatechange = function(){
处理我返回结果的代码
};
3、get、post请求
将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法、
语法：open(请求的类型,地址,布尔值);
send(string);（string：必须，仅用于 POST 请求；如果是GET请求方式，可用null）
功能：规定请求的类型、URL 以及是否异步处理请求。
将请求发送到服务器。
4、url传参
功能：向服务器上文件的传递数据。通过传递的数据获得相对应的值。
语法：地址?变量=值&变量=值
5、HTTP状态码
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
三种：就绪状态，响应状态，响应结果
（1）就绪状态-readyState属性
每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest的状态信息。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
（2）响应状态-status状态
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。因此当 readyState 等于 4 且状态为 200 时，表示响应已就绪。
200: "OK"
404: 未找到页面
（3）响应结果-responseText属性
responseText获得字符串形式的响应数据。
二、post请求
1、MIME编码类型
MIME (Multipurpose Internet Mail Extensions) 是一种在互联网上标识文件类型的标准。每个文件都有一个 MIME 类型，用于指示该文件的内容类型。MIME 类型通常由一个主类型和一个子类型组成，用斜杠分隔。MIME 类型以字符串的形式表示，如 "text/html" 或 "image/jpeg"。
常见的 MIME 类型：
-
文本类型：
- "text/plain"：纯文本文件。
- "text/html"：HTML 文档。
- "text/css"：CSS 样式表。
- "text/javascript"：JavaScript 脚本。
- "application/json"：JSON 数据。
-
图像类型：
- "image/jpeg"：JPEG 图像。
- "image/png"：PNG 图像。
- "image/gif"：GIF 图像。
-
音频类型：
- "audio/mpeg"：MPEG 音频文件。
- "audio/wav"：WAV 音频文件。
- "audio/midi"：MIDI 音频文件。
-
视频类型：
- "video/mp4"：MP4 视频文件。
- "video/quicktime"：QuickTime 视频文件。
- "video/webm"：WebM 视频文件。
-
应用程序类型：
- "application/pdf"：PDF 文件。
- "application/msword"：Microsoft Word 文档。
- "application/zip"：ZIP 压缩文件。
在进行文件传输、文件下载、解析文件等情境中，MIME 类型被广泛使用，以确保正确地处理和解释文件的内容。
2、post请求方式
POST请求是一种常见的HTTP请求类型之一，用于向服务器提交数据。与GET请求不同，POST请求将数据作为请求的主体发送，而不是作为URL的一部分。
POST请求的特点：数据传输方式，数据长度限制，数据安全性请求传输方式
（1）指定服务器端处理页面
功能： 规定请求的类型、URL 以及是否异步处理请求
语法：open(请求的类型,地址,布尔值)
（2）指定服务器端处理页面
功能：用于指定传输数据编码类型，即服务器需要我们传送的数据类型
语法：setRequestHeader("content-type","编码类型");
（3）发送请求
功能：将请求发送到服务器。
语法：send(变量名=值&变量名=值……);
get与post比较：get请求：使用url传参数明文、相对安全性低。
post请求：数据加密提交，相对安全性高。
在以下情况中，使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
三、json数据处理
1、json介绍
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
语法：var 对象名 = {"名":"值" , "名":"值" ……};
功能：定义json对象。
2、json使用
（1）json取值
语法：var 变量名 = 对象名.名;
功能：在json对象中取一个值并赋值给变量。
（2）json赋值
语法：对象名.名 = 值;
功能：修改json对象中的值。
3、json数组
（1）json数组
语法：var json对象 = [
{ "名":"值" , "名":"值",…… },
{ "名":"值" , "名":"值",…… },
…
];
功能：定义json数组
（2）json数值取值
语法：var 变量名= json对象[下标]. 名;;
功能：向json数组中取一个值并赋值给变量。
4、json系统函数
（1）JSON.parse
语法：JSON.parse(json字符串);
功能：JSON.parse() 方法将json字符串数据转换为 json对象。
（2）JSON.stringify()
语法：JSON.stringify(json对象);
功能：JSON.stringify() 方法将json对象数据转换为 json字符串。
5、json在Ajax中的应用
JSON是一种非常灵活、易读且易操作的数据格式，在Ajax中广泛应用于数据的传输、通信和存储。在Ajax中，JSON常用于将服务器返回的数据以结构化的方式传递给客户端，并且可以轻松地在JavaScript中解析和操作。
在Ajax中，使用JSON的步骤：
1、服务器端生成JSON格式的数据：服务器端根据需求生成JSON格式的数据，可以是一个单独的对象，也可以是一个对象数组。
2、服务器端将JSON数据发送给客户端：服务器将生成的JSON数据作为响应发送给客户端。可以通过使用Ajax中的XMLHttpRequest对象发送请求并接收服务器的响应。
3、客户端解析JSON数据：在客户端，使用JavaScript中的JSON.parse()方法将服务器返回的JSON数据解析为JavaScript对象或数组。
4、客户端使用解析后的数据：得到解析后的JavaScript对象或数组后，可以根据需要在客户端进行数据的操作和展示。
