概念：
1. 同步交互：用户向服务器端发起请求，直到服务器端响应的过程，在此期间用户是不能做其他事情的
2. 异步交互：用户向服务器端发起请求，直到服务器端响应的过程，在此期间用户是可以做其他事情的
ajax：Asynchronous JavaScript And XML
- 不严格的定义：页面不会完全刷新只会导致局部发生变化
- 如何使用：
第一步先创建；
var xhr=new XMLHttpRequest
创建数据库连接
xhr.open("GET/post","路由")
向服务器端发送信息
特殊
GET：send方法会失效但是还是不能省略
xhr.send(null)
POST
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("key=value&...");
绑定监听事件
xhr.onreadystatechchang=()=>{
if(xhr.readstate==4&&xhr.status==200){
xhr.responseTEXT
}
}
数据格式
XML更严格的网页，数据格式|文件配置网页，未知的标签，全靠自己定义
如何使用XML
必须声明标签
再加上跟标签
里面想写什么都可以
开发中：正常来说后端会想办法将数据库中的数据整理为一个.xml的文件。
前端：依然使用ajax去获取xml
路由："xx.xml"
xhr.reponseTEXT换成xhr.responHTML
JSON：JavaScript Object Notation：JS对象表示法，本身就是JS的一部分
好处：比xml更简洁，更简单，更快
1、哪些属于JSON字符串？
'[1,2,3,4,5]';
'{"key":value,}'
'[{},{},{},{}]'
'{"names":[],"ages":[],"salaries":[]}'
2、后端把数据库的数据取出来整理为一个JSON字符串
res.end(JSON.stringify(rs));
echo(JSON.stringify(rs))
3、前端依然使用Ajax去获取相应到的数据，真正重要的：
xhr.reponseText将JSON字符串解析为一个对象：那么方法：2个
1、eval("("+xhr.reponseText+")");
2、JSON.parse(xhr.reponseText);
jQuery UI
jQuery UI是基于jQuery的的开源网页用户界面的代码插件库-提供了HTML,CSS,JS的一个插件库
三大框架：
vue，react和Angular
1、百度搜索jQueryUI官网进行下载 - 不需要你们做，袍哥发给你们
2、必须在页面上进行引入 - 模板
<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、一定要等页面渲染完毕后再去掉插件的API
jQuery：简化了【核心DOM】
使用jQuery之前，必须先引入：<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
jQuery之中最有魅力的一个方法叫做 $ 或 jQuery：工厂函数
作用：
查找元素：$("jq选择器")
创建元素：$(<elem 属性名="${变量}">${变量}</elem>)
可以将DOM转为JQ：只有一个点this和e.target，他们自动得到的就是一个DOM对象，用不了JQ的API，所以找转：$(DOM)
代替window.onload ===>$(callback)
1、查找元素：
直接查找：$("jq选择器")
通过 关系网：前提：至少先找到一个人才可以使用关系
父亲：parent
儿子：children
前一个兄弟：prev()
后一个兄弟：next()
其他兄弟:sibings()
2、操作元素：
内容
获取：$("xx").html/text/value
设置:$("xx").html/text/value("新内容")
属性
获取:$("xx").attr("属性名")
设置:$("xx").attr("属性名","属性值")
删除：$("xx").removeAttr("属性名")
样式：
可以操作class：
添加class：$("xx").addClass("新class")
2、删除class：
$("xx").removeClass();//删全部
$("xx").removeClass("d2");//只删除d2这个class
3、切换class：
$("xx").toggleClass("d2");//在有d2和没有d2之间做切换
2、直接操作css：- 设置时依然设置的是内联，因为优先级最高，获取时，不在乎你是哪里的样式，他只会获取你生效的样式
获取：$("xx").css("属性名");
设置：$("xx").css({
属性名:"值",
...
})
3、创建元素&上树
$("父").append($(`<elem 属性名="${变量}">${变量}</elem>`));
4、删除：
$("xx").remove
5、JQ动画：
显示：$("xx").show()
隐藏：$("xx").hide()
切换:$("xx").toggle()
6、JQ不可以使用以前DOM的语法，DOM也不可以使用JQ的语法，但是其实两者可以互换
JQ:$(DOM)
绑定事件
$("xx").事件名(callback)
获取下标
$("xx").index()
node.js第三方框架express
使用npm下载安装
核心概念(2):
下载:在项目路径下打开cmd，输入npm i espress
引入后发现是一个函数
var express=require("express")
var app=express()
app.listen(80)
3、路由：客户端发来的请求中的一部分，也称呼叫做文件的相对路径，通过判断路由的不同，响应不同的内容
1、GET方式：
app.get("路由名",(req,res)=>{
1、req->依然是请求对象，保存着前端传来的请求消息：req.query.键名;（不光可以得到GET表单提交的，还可以得到GET的ajax提交的消息）
2、res->依然是响应对象，可以向前端发送数据，也可以向前端发送文件
发送数据：res.send(json字符串);
发送文件：res.sendFile("文件路径");
})
2、特殊：POST请求要稍微麻烦一点点，尤其是在获取前端传到后端的请求消息，因为post是隐式提交，所以需要某些操作才能看得到它
app.post("路由",(req,res)=>{
1、req->依然是请求对象，保存着前端传来的请求消息：3步
1、下载引入一个第三方模块：var bp=require("body-parser");
2、使用【中间件】的语法：app.use(bp.urlencoded({extended:false}));
3、req.body.键名;
2、res->依然是响应对象，可以向前端发送数据，也可以向前端发送文件
发送数据：res.send(json字符串);
发送文件：res.sendFile("文件路径");
})
4、中间件：其实就是一个函数，但是它也可以访问到req和res两个对象，必须处于【路由之前】
中间件的功能包括：
1、可以执行任何代码
2、可以修改请求和响应对象
3、可以终止请求
4、可以放行道下一个中间件/路由 - 中间件可以写多个
语法：
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，衣服就不需要自己再脱了
type:"GET/POST", - 可选，默认值为GET
success:data=>{ - 必写
data->后端响应给你的，拿到数据要干什么，必须放在这个回调函数里面
}
})
2、jQuery是如何实现的，我们自己也来封装一个！
function jQuery(){
}
var $=jQuery
$.ajax=function({type="GET",url,data="",dataType="HTML",success}){
var xhr=new XMLHttpRequest()
if(type=="GET"){
xhr.open(type,url+"?"+data)
xhr.send(null)
}else{
xhr.open(type,url)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send(data)
}
xhr.onreadystatechange=()=>{
if(xhr.readyState==4&&xhr.status==200){
if(dataType=="HTML"){
success(xhr.responseText)
}else if(dataType=="XML"){
success(xhr.responseXML)
}else if(dataType=="JSON"){
success(JSON.parse(xhr.responseText))
}
}
}
}
