Ajax技术：Ajax：Asynchronous JavaScript And XML - 异步的JavaScript和XML
1、概念：
同步交互：用户向服务器端发起请求且响应的全过程，用户只能等待资源加载。
异步交互：用户向服务器端发起请求且响应的全过程，用户可以做其它操作
常见的Ajax技术：
1、定时器 - 做特效
2、Node操作mongo的增删改查 - 后端交互数据库的
3、ajax - 比较验证，数据渲染
2、使用的固定步骤：
1、创建ajax核心对象：
let xhr=new XMLHttpRequest();
2、建立和 服务器 的连接
xhr.open("GET/POST","路由");
3、根据向服务器端发送请求消息的方式的不同，有不同的发送方式：
(1) GET：
xhr.open("GET","路由?name=value&...");
xhr.send(null);
(2) POST：
xhr.open("POST","路由");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("name=value&...");
4、绑定状态监听事件
xhr.onreadystatechange=()=>{
if(xhr.readyState==4&&xhr.status==200){
let data=xhr.responseText; //返回数据
操作;//对数据进行操作
}
}
数据格式：XML和JSON
1、XML
使用步骤：
（1）创建一个后缀.xml的文件
（2）必须写上声明标签：，就可以往里面进行添加数据。
在添加数据时的注意点：
1.必须写上一个根标签，而且只能写一个根标签，而且必须是双标签
前端获取xml数据：依然使用ajax去获取xml
1、路由：写为"xx.xml";
2、xhr.responseText 换成 xhr.responseXML
2、JSON：JavaScript Object Notation：JS对象表示法，本身就是JS的一部分
优点：比XML 更简洁、更快、更容易解析 - 一个优秀的数据格式可以极大的提升程序员的开发效率
（1）、JSON字符串的常见格式：
1、'[1,2,3,4,5]'
2、'{"key":value}'
3、*'[{},{},{},{}]'
4、'{"names":["袍哥","钟哥","苗姐"],"ages":[18,19,20]}'
（2）、前端依然使用ajax去获取响应的数据：
注意：在数据库数据会自动生成一个JSON0数据，但是需要转为字符串进行传输，然后再前端进行转为JSON数据：JSON。stringfy（rs）
将JSON字符串解析为一个对象，那么方法：
1、eval("("+JSONtxt+")")
2、*JSON.parse(JSONtxt)
jQueryUI：基于jQuery（基于JavaScript的一个框架。
使用步骤：
1、下载jQueryUI 并引入相应文件（注意：顺序不能错，一定要先引入jQuery的JS，再引入jQueryUI的JS）
3、挑选出你需要的插件，复制代码到自己的项目中去
4、根据设计图，来修改样式 （注意：权重问题）
5、使用ajax去获取数据库中的数据，来进行页面渲染；调用jQuery提供的xx方法来实现功能！
个人比较常用的JQUI的插件：
1、选项卡
2、菜单
3、手风琴
4、模糊查询
5、JQ动画/
简化DOM操作：
工厂函数$ 或者 jQuery：
作用：
1、查找元素：$("JQ选择器")
底层原理：document.querySelectorAll();
2、创建元素：$(<标签 属性>内容</标签>) -
底层原理：document.createElement("");
3、可以将DOM转为JQ：只有两个点this和target，$(DOM对象);
4、代替了window.onload - $(callback)，
1、查找元素：
1、除了直接查找：$("JQ选择器")
2、通过 关系 查找：至少要先找到一个人才可以使用关系：
父：parent();
子：children();
前一个兄弟：prev();
后一个兄弟：next();
其他兄弟：siblings();
2、操作元素：
内容：
获取：$("xx").html/text/val();
设置：$("xx").html/text/val("新内容");
属性：
获取：$("xx").attr("属性名");
设置：$("xx").attr("属性名","属性值");
删除：$("xx").removeAttr("属性名");
样式：
1、可以操作class
1、添加class：$("xx").addClass("新class") - JS中没有此操作，只能替换
2、删除class：
$("xx").removeClass()
如果不传实参，则删除所有class
如果传入实参，则删除指定class
3、切换class：
$("xx").toggleClass("d3")
2、直接操作css
获取：$("xx").css("css属性名");
设置：$("xx").css({
css属性名:"css属性值",
...
});
3、JQ遍历 - 一般只用于获取（JQ默认只能获取第一的东西，想要获取到所有必须遍历）
$("一堆人").each((i,val)=>{操作}) //i是下标val是遍历到的东西
4、上树：$("父").append(儿子)
删除：$("xx").remove();
5、JQ动画：
1、显示：$("xx").show();
2、隐藏：$("xx").hide();
3、切换：$("xx").toggle();
如果不传参数，是瞬间显示和隐藏
如果传入参数$("xx").api("动画名称",时长); - 一定要搭配jQueryUI才可以
JQ与DOM的相互转换：
DOM->JQ：$(dom)
JQ->DOM：jq对象[下标]
jQuery的组成部分：
1、jQuery.js
2、jQueryUI.js
3、jQueryMobile
4、Qunit
滚动加载数据：
关键点：判断滚动条距离页面的高度
语法：window.scrollY+innerHeight==document.body.clientHeight
