ajax
1. 什么是ajax?
ajax不是一种开发语言，它是在现有的js/html/css样式基础上，实现在不重新加载整个页面的情况下，与服务器进行简单的数据交互，通过js操作DOM进行页面局部更新.
2. ajax的应用介绍：搜索建议，表单验证，点击下一页，等等等等
3. ajax概念:
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML （标准通用标记语言的子集）或者是 HTML。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
(了解1)、同步和异步
(了解2)、HTTP
二、ajax原理
1. ajax服务器交互原理?
简单来说通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面
2. ajax进行页面渲染
渲染： 就是向服务器请求数据后，把数据追加到页面中，这个过程就叫渲染
三、(了解)ajax和传统web渲染数据的区别和优缺点
1. 传统web渲染介绍
用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件，然后浏览器从head标签开始逐行解析HTML代码，
遇到link标签又会向服务器请求加载css文件，遇到script标签又会向服务器请求js文件
2. ajax渲染数据的优缺点
优点：
<1>.无刷新更新数据
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，
并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
<2>.异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
优化了Browser（浏览器）和Server（服务端）之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
<3>.前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，
减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，
可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
<4>.基于标准被广泛支持。
AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。
随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，
为那些不支持JavaScript的用户提供替代功能。
<5>.界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、
也更加适用于现在的发布系统。
缺点：
<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
<2>.对搜索引擎支持较弱。
ajax请求不利于搜索引擎优化，一般搜不到ajax添加到页面的信息！
<3>.破坏程序的异常处理机制。
<4>.违背URL和资源定位的初衷。
例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
3. ajax与传统web渲染区别
(1). 客户端处理方式不同：传统web需要重新加载整个页面，才可以实现数据更新.
(2).提交方式不同，传统web向服务交互时，通过浏览提交整个页面，ajax通过javascript中的XMLHttpRequest对象提交.
(3).服务器响应不同:
传统的web返回的整个页面，而ajax只返回极少量的需要的数据.
http://127.0.0.1:5500/
1、 起本地服务 GO LIVE
2、 在本地自己写一个数据 txt
3 <1>.创建XMLHttpRequest对象
var xhr=new XMLHttpRequest();
<2>.对象初始化(配置)
xhr.open(“GET”,“url”,true) // 打开txt文件 复制上面的路径
<3>.向服务器发送请求
xhr.send()
<4>.等服务器响应变化
xhr.onreadystatechange=function(){
if(xhr.readyState4&&xhr.status200)
<5>.读取服务器返回的文本内容
var data=xhr.responseText;
4、把数据渲染到页面上
}
四、 ajax原生实现
1. 原生ajax案例演示
2. XMLHttpRequest对象，步骤
<1>.创建XMLHttpRequest对象
var xhr=new XMLHttpRequest();
<2>.对象初始化(配置)
xhr.open(“GET”,“url”,true)
<3>.向服务器发送请求
xhr.send()
<4>.等服务器响应变化
xhr.onreadystatechange=function(){
if(xhr.readyState4&&xhr.status200)
<5>.读取服务器返回的文本内容
var data=xhr.responseText;
}
3. 服务器返回响应码介绍
readyState为响应码，响应码共5个：
0:未初始化
1:向服务器发送请求
2:服务器已经接收请求
3:服务器正在处理数据
4:服务器准备就绪
4. 服务器http返回的状态码
http返回的状态码有以下几种
404:资源未找到
301:永久重定向
200:一切"ok"
403:拒绝访问
503:能与服务相连但web服务器不能正常工作
500:服务器错误
五、 如何发get|post请求
1. ajax使用get请求
xhr.open(“GET”,“url”,true)
2. ajax使用POST请求
xmlhttp.open(“POST”,“url”,true)
六、 json数据
1. javscript中的数组与对象表示方法
2. json数据文件方法及应用
3. 字符串与json类型相互转换
注：json文件不能写注释，字串必须用双引号，键和值都是双引号
JSON.parse() 将json字符串转换为json对象
JSON.stringify() 将json对象转换为json字符串
七、 原生ajax与json文件案例## 标题
1. 编写json文件表示学生信息数据
2. 原生ajax调用json文件并渲染到页面
jQuery中的ajax技术
1.$.ajax
语法：
$.ajax({
type:"get/post",//提交方式get,post 默认为get
url:"请求的url地址",
data:"要传递参数及值", //uname=李宝裤&usex=男
anysc:true,
success:function(ret){
//ret为服务器返回的数据
}
})
2.$.get()方法
语法：
$.get("url",{参数1:值,参数2:值},function(ret){
//ret为服务器返回数据
},"json")
3.$.post()方法
$.post("url",{参数1:值,参数2:值},function(ret){
//ret为服务器返回数据
},"json")
## 弹性盒子
一、（了解）Flexbox布局功能主要具有以下几点：
1：屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
2：可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
3：可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
4：可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
5：可以控制元素在页面上的布局方向；
6：可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
二、创建Flex容器：
第一步需要将父盒子设置为 display:flex; flex容器
注意: 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
三、基本概念：
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的纵轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
四、容器属性：
以下6个属性设置在容器上。
1、flex-direction 设置项目的排列方向
2、flex-wrap 设置如何换行
3、flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4、justify-content 定义项目在主轴上的对齐方式
5、align-items 定义项目在纵轴上如何对齐
6、align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
1-1、flex-direction 设置项目的排列方向
row (默认) 水平方向起点在左边
row-reverse 水平方向起点在右边
column 竖直方向 起点在上方
column-reverse 竖直方向 起点在下方
2-1、flex-wrap 设置如何换行
nowrap（默认） 不换行
wrap 换行
wrap-reverse 换行，第一行在下方
3-1、flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4-1、justify-content 定义项目在主轴上的对齐方式
flex-start（默认值） 左对齐
flex-end 右对齐
center 居中对齐
space-between 两端对齐 项目之间的间隔相等
space-around 每个项目两侧的间隔相等
5-1、align-items 定义项目在纵轴上如何对齐
stretch（默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-start 纵轴的起点对齐。
flex-end 纵轴的终点对齐。
center 纵轴的中点对齐。
baseline 项目的第一行文字的基线对齐。
6-1、align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-start 与纵轴的起点对齐。
flex-end 与纵轴的终点对齐。
center 与纵轴的中点对齐。
space-between 与纵轴两端对齐，轴线之间的间隔平均分布。
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值） 轴线占满整个交叉轴。
五、项目属性
以下6个属性设置在项目上。
1、order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
2、flex-grow 定义项目的放大比例，默认为0，即如果有剩余空间，也不放大。
3、flex-shrink 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
4、flex-basis
5、flex
6、align-self
1-1、order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
2-1、flex-grow 定义项目的放大比例，默认为0，即如果有剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3-1、flex-shrink 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，
其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
4-1、
CSS3 转换：
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
您可以使用 2D 或 3D 转换来转换您的元素。
一、transform：
2D 转换方法：子属性：translate()、rotate()、scale()、skew()
1.translate(x,y);偏移
a)： translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）。
b)： translateX(x)仅水平方向移动（X轴移动）。
c)： translateY(y)仅垂直方向移动（Y轴移动）。
2.rotate(ndeg):旋转n为数字
3.scale(x,y) 缩放 让元素根据中心原点对对象进行缩放 x,y表示倍数
a)： scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）。
注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
b)： scaleX(x)元素仅水平方向缩放（X轴缩放）。
c)： scaleY(y)元素仅垂直方向缩放（Y轴缩放）。
4.skew(xdeg,ydeg) 倾斜变形
a)：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）。
第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
b)： skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）。
c)： skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）。
二、原点 transform-origin(x,y) x，y可以用百分比来表示 表示原点的横向距离和纵向距离
在没有重置transform-origin改变元素原点位置的情况下，
CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
我们可以通过transform-origin来对元素进行原点位置改变
例： transform-origin: 0 0; 以左上角为原点
50% 0; 以上中为原点
100% 50% 以右中为原点
三、transtion:过渡动画：
transition属性是一个复合属性，主要包括以下几个子属性：
1、transition-property：指定过渡或动态模拟的CSS属性。
所有的css属性用all
2、transition-duration：指定完成过渡所需的时间。
单位是s秒或者ms毫秒
3、transition-timing-function：指定过渡函数。
ease:由快到慢
linear:匀速
ease-in:加速
ease-out:减速
ease-in-out:先加速再减速
4、transition-delay：指定开始出现的延迟时间。
单位是s秒或者ms毫秒。
transition:要改变的属性或all 时间;
例如：transtion:width 2s;
transtion:all 3s
四、@keyframes介绍：
keyframes被称为关键帧，。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果
在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。
第一步：在css样式中，先定义动画样式
@keyframes 动画名{
from{ css样式}
to{ css样式 }
}
或者使用百分号
@keyframes 动画名 {
0%{
left: 0;
top: 0;
}
30%{
left: 800px;
top:0;
border-radius: 50%;
}
60%{
left: 800px;
top:400px;
background-color: red;
border-radius: 50%;
transform: scale(.5);
}
90%{
left: 0;
top:400px;
background-color: green;
border-radius: 50%;
}
100%{
left: 0;
top: 0;
}
}
第二步：使用animation应用动画
animation:动画名
五、animation：
组合写法（简写）：animation: myfirst 5s linear 2s infinite alternate both;
分开写
1、调用动画 animation-name: 主要是用来调用 @keyframes 定义好的动画名
2、设置动画播放时间 animation-duration: 单位：s
3、置动画时间外属性 animation-fill-mode:
none: 默认值，表示动画将按预期进行和结束，在动画完其最后一帧时，动画会反转到初始帧处
forwards: 表示动画结束后继续应用最后的关键帧的位置
backwards: 会在向元素应用动画样式时迅速应用动画的初始帧
both: 元素动画同时具有forwards和backwards效果
4、设置动画播放方式 animation-timing-function: ease(由快到慢）/ linear(匀速) / ease-in(加速) / ease-out(减速) ease-in-out(先加速再减速)
5、设置动画播放之前等待的时间 animation-delay: 单位：s
6、设置动画播放次数 animation-iteration-count: 通常设置为整数, 默认值为1; 取值为infinite，动画将会无限次的播放
7、设置动画播放方向 animation-direction: normal是默认值,动画的每次循环都是向前播放;另一个值是alternate，他的作用是，动画播放在第奇数次向前播放，第偶数次向反方向播放
8、设置动画的播放状态 animation-play-state: paused将正在播放的动画停下来; running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放
- List item