1、概念：
同步交互：用户向服务器端发起请求，直到服务器端进行响应的全过程，用户是不可以做其他事情的（等）
典型：表单提交、网址请求 - 都属于同步交互
异步交互：用户向服务器端发起请求，直到服务器端进行响应的全过程，用户是可以做其他事情的（不等）
典型：ajax请求
2、*****Ajax：Asynchronous JavaScript And XML - 直译：异步的JavaScript和XML - 前端技术 不严格的定义：页面不完全刷新，只会导致页面局部发生改变的技术 其实我们早就见过异步技术/代码了： 1、定时器 - 做特效 2、mongoose操作数据库的增删改查 - 操作数据库 3、ajax - 目的：在不刷新页面的情况下和服务器端进行交互 - 可以将服务器端的数据放到前端（比较验证、数据渲染）
3、如何使用：固定4步： 1、创建ajax核心对象： var xhr=new XMLHttpRequest();
2、建立和服务器端的连接
xhr.open("GET/POST","路由");
3、向服务器端发送请求消息
xhr.send();//但是此方法很特殊：
1、如果你是GET请求，send方法会失效，但是还不能省略，必须写为：
xhr.open("GET","路由?key=value&key=value&...");
xhr.send(null);
2、如果你是POST请求，send方法可用，必须写为：- 暂时不能用
xhr.open("POST","路由");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("key=value&key=value&...");
get：获取 - ajax一般都是使用get，去找服务器端那东西的 - 举例：跟安全性不挂钩的，搜索框
post：发送 - 举例：跟安全性挂钩，登录、注册
4、绑定状态监听事件
xhr.onreadystatechange=()=>{
if(xhr.readyState==4&&xhr.status==200){
xhr.responseText - 服务器端相应的文本，ajax就难在你拿到东西了要干什么
}
}
数据格式： 1、XML： 1、面试题：HTML、XHTML、DHTML、XML分别是什么？ HTML - 网页：预定义了很多标签，我们学习后，就可以使用他们写出网页 XHTML - 更严格的网页：HTML5 -> XHTML -> HTML4.01，比如：、 DHTML - 动态效果网页：在离线端，我们的网页也具有动态的特效：其实不是新技术也不是新概念，而是现有技术的一个整合统称：HTML+CSS+JS(dom) XML - 配置文件|数据格式：没有提供过任何预定义标签！全靠自定义
2、如何使用XML，其实就是一个后缀.xml的文件
1、创建xx.xml文件
2、必须写上声明标签：<?xml version="1.0" encoding="utf-8"?> - 必须放在第一行第一列
version - 版本号：目前有的版本只有1.0和1.1，但是1.1升级并不理想，没有人使用，所以1.0可以说是唯一版本，而且你学了以后都不用在学了，以后都不会更新了，因为已经淘汰了，有更棒的人（JSON）
encoding - 编码格式
3、必须写上一个根标签，而且只能写一个根标签，而且必须是双标签
4、里面你随意，你想放什么就放什么
5、恭喜你，学完了
开发中，正常来说后端会想办法将数据库的数据整理为一个xml格式的文件
前端：依然使用ajax去获取xml
1、路由 写为 "xx.xml"
2、xhr.responseText 换成 xhr.responseXML - 可以使用【核心DOM】去操作你需要的东西 - 淘汰的原因，现在来获取数据都要使用核心DOM，太麻烦了
2、JSON：JavaScript Object Notation：JS对象表示法，本身就是JS的一部分 作用：数据格式 类似于 XML 好处：比XML 更简洁、更快、更容易解析 - 一个优秀的数据格式可以极大的提升我们程序员的开发效率
1、哪些属于JSON字符串：
1、'[1,2,3,4,5]';
2、'{"key":value,...}';
3、'[{},{},{},{}]';
4、'{"names":[1,2,3,4],"ages":[1,2,3,4]}'
2、后端把数据库的数据取出来整理为一个JSON字符串：var jsonTxt=JSON.stringify(jsonObj);
3、前端依然使用ajax去获取响应数据，真正重要的：xhr.responseText;
将JSON字符串解析为一个JSON对象：那么：2种方法 - 脱衣服
1、eval("("+xhr.responseText+")");
2、*JSON.parse(xhr.responseText);
1、Node.js的第三方框架：express，需要使用npm去下载它，express中有两个核心概念
0、下载：在你的项目路径下打开cmd：npm i express
1、引入后发现express是一个函数，创建服务器应用，还要设置监听端口！
var express=require("express");
var app=express();
app.listen(端口号);
2、路由：客户端发来的请求中的一部分，也称呼叫做相对路径，通过判断路由的不同响应不同的内容。
1、app.get("路由",(req,res)=>{//req和res不是以前的req和res，用法会与原生Node有所不同
1、req->依然是请求对象，保存着前端传来的请求消息：req.query.键名;
2、res->依然是响应对象，可以为前端发数据，也可以为前端发页面：
1、发数据：res.send("想要发的东西");
2、发文件：res.sendFile("文件的路径");
})
2、特殊：post请求要稍微麻烦一点点，尤其在于获取前端传到后端的请求消息，因为post是隐式提交，所以需要某些东西才能看得见他
app.post("路由",(req,res)=>{//req和res不是以前的req和res，用法会与原生Node有所不同
1、req->依然是请求对象，保存着前端传来的请求消息：3步
1、需要引入一个第三方模块（中间件的语法）：var bp=require("body-parser")
2、使用中间件的语法：app.use(bp.urlencoded({extended:false}))
3、req.body.键名;
2、res->依然是响应对象，可以为前端发数据，也可以为前端发页面：
1、发数据：res.send("想要发的东西");
2、发文件：res.sendFile("文件的路径");
})
现在不管是form表单还是ajax，都可以自行选择使用get还是post了
如果是全栈开发，一个人随便搞，但是如果是前后端分离开发，那么要沟通，路由是什么
3、中间件：express本身就是一个功能极简的框架，完全路由和中间件两部分构成
中间件其实就是一个函数，但是它也可以访问req和res两个对象，处于路由之前 - 可以理解为是现实生活中的一个保安、保镖、秘书
中间件的功能包括：
可以执行任何代码
可以修改请求和响应对象
可以终止请求
可以放行你到下一个中间件/路由 - 中间件可以写多个
语法：
app.use((req,res,resolve)=>{
一切你想要执行的代码，中间件代码
resolve();//放行的函数
})
固定套路：
1、*获取post的请求消息，见上面 - app.use(bp.urlencoded({extended:false}))
2、*内置中间件加载一切静态资源：app.use(express.static("静态资源的文件夹名"));
2、如何简化ajax：
1、jQuery提供了一个新的ajax：
$.ajax({
url:"路由", - 必写
data:"请求消息", - 可选
dataType:"HTML/XML/JSON", - 可选，默认值为HTML，如果你写了JSON，则可以省略JSON.parse方法
type:"GET/POST", - 可选，默认值为GET
success:(data)=>{ - 必写
data->后端响应的内容，你不需要再写xhr.responseText
}
})
2、jQuery是如何实现的，我们自己也封装一个
1、jQueryUI：
基于jQuery（基于JavaScript的一个框架，是三大框架出现之前，最火的一个，但是现在已经被淘汰了）的开源网页用户界面代码库 - 提供了HTML、CSS、JS的一个插件库 三大框架：Vue（中国人的框架）、React、Angular（在国内几乎没有市场） 组件库：组件，组成网站一部分的部分，代码重用，一般不具备JS功能：比如导航条、图文显示... 插件库：跟组件差不多，只不过带有JS功能 - 选项卡、轮播...
如何使用jQueryUI：
1、下载jQueryUI - 不需要你们做
2、必须在页面上进行引入： - 顺序不能错，一定要先引入jquery.js再引入jquery-ui.js
<link rel="stylesheet" type="text/css" href="jquery-ui-1.13.2.custom/jquery-ui.css"/>
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
3、挑选出你需要的/喜欢的插件，直接梭到你的项目中
4、根据设计图，来修改样式 - 修改不成功，只有一个可能：权重不够
5、使用ajax去获取数据库中的数据，来进行页面渲染
6、千万别忘了调用jQuery提供的xx方法来实现功能
个人比较推荐的JQUI的插件：
1、选项卡/标签页
2、菜单
3、手风琴/折叠面板
4、模糊查询/自动完成
5、JQ动画/特效
6、交互部分自己试试
jQuery中最有魅力的一个方法叫做$：
作用：
1、查找元素：$("css选择器"); - document.querySelectorAll
2、创建元素：$("<标签></标签>"); - document.createElement
3、可以将DOM转为JQ：$(DOM对象)
底层用到了一个人：重载：arguments - 可以通过判断用户传入的实参的不同执行不同的操作
JQ的遍历：
$("一堆人").each((i,val)=>{
})
JQ的样式的操作：
获取：$("xx").css("css属性名");
设置：$("xx").css("css属性名","css属性值");
一句话设置多个样式：
$("xx").css({
css属性名:"css属性值",
...
});
JQ操作属性：
获取：$("xx").attr("属性名");
设置：$("xx").attr("属性名","属性值");
JQ上树：
父亲.append(儿子)
JQ动画：
1、显示 - $("xx").show();
2、隐藏 - $("xx").hide();
3、切换 - $("xx").toggle();
如果不传参数，是瞬间显示，瞬间隐藏
可以传入实参：$("xx").api("动画名称",时长);
JQ不可以用以前DOM的语法，DOM也不可以用JQ的语法，但是两者其实可以互换
