HTML5-CSS3动画与Ajax应用（基础）

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 压缩文件。