ajax
同步与异步
同步交互：用户向服务器端发起请求，直到服务器端进行响应的全过程，用户是不可以做其他事情的（等）
典型：网址提交、表单提交 - 都是属于同步交互
异步交互：用户向服务器端发起请求，直到服务器端进行响应的全过程，用户是可以做其他事情的（不等）
典型：Ajax请求
学过的异步技术
定时器 - 做特效
Node操作mongo的增删改查 - 后端技术
ajax - 目的：在不刷新页面的情况下和服务器端进行交互 - 可以将服务器端的数据放到前端（比较验证、数据渲染）
如何使用ajax
1、创建ajax核心对象
var xhr=new XMLHttpRequest();
2、前端建立和服务器端的连接
xhr.open("GET/POST","/路由");
3、向服务器端发送请求消息
xhr.send("key=value&...");
特殊：
1、GET：send方法会失效，但是还不能省略，必须写为null
xhr.open("GET","/路由?key=value&...");
xhr.send(null);
2、POST：send方法可用，必须写为：- 暂时不用
xhr.open("POST","/路由");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("key=value&...");
4、绑定状态监听事件
xhr.onreadystatechange=()=>{
if(xhr.readyState==4&&xhr.status==200){
xhr.responseText;//得到后端响应的内容，难就难在这个点，你拿到了数据要干什么？
}
}
面试题
HTML、XHTML、DHTML、XML分别是什么？
HTML - 网页：预定义了很多很多标签，我们学习后，就可以只是用前辈们预定义好的标签做出网页
XHTML - 是更严格的网页：HTML5->XHTML->HTML4.01，比如：<br />、<input disabled="disabled" />
DHTML - D:dynamic：动态效果的静态网页，在离线端，我们的网页依然也具有动态特效，其实并不是新技术也不是新概念，而是现有技术的一个整合统称：HTML+CSS+JAVASCRIPT
XML - 配置文件|数据格式：未知的标签，没有提供过任何预定义标签！全靠自定义
如何使用XML
必须写上声明标签：<?xml version="1.0" encoding="utf-8"?>
version - 版本号，目前只有1.0和1.1版本，但是1.1版本升级并不理想，没有人使用，所以说1.0版本是唯一的版本，而且你学了以后就不会在学了。以后都不会更新，已经被淘淘乐，有更棒的人代替了他（JSON）
encoding - 编码格式
必须写上一个根标签，而且只能写一个根标签，而且必须是双标签，只有双标签里面才可以再放其他标签
里面你随意，你想放什么就放什么
前端：依然使用ajax去获取xml
1、路由：写为"xx.xml";
2、xhr.reponseText 换成 xhr.responseXML - 可以使用【核心DOM】去操作你需要的东西，淘汰的原因是要使用核心DOM的语法操作数据太麻烦了
建议：后端接口没有准备好的，自己先用死数据渲染，到时候换成真数据就可以了
JSON：JavaScript Object Notation：JS对象表示法，本身就是JS的一部分
后端把数据库的数据取出来整理为一个JSON字符串：res.end(JSON.stringify(rs));
前端依然使用Ajax去获取相应到的数据，真正重要的：xhr.reponseText将JSON字符串解析为一个对象：那么方法：2个
eval("("+xhr.reponseText+")");
JSON.parse(xhr.reponseText);
jQueryUI的使用
百度搜索jQueryUI官网进行下载
必须在页面上进行引入 - 模板：
挑选出你需要的插件，直接梭到你的项目之中
4、根据你的设计图去修改样式 - 修改不成功，只有一个可能：权重不够
5、*使用ajax去获取数据库中的数据，来进行页面渲染。
6、一定要等页面渲染完毕后再去掉插件的API
<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>
推荐的jqui的插件
选项卡&标签页
菜单
手风琴&折叠面板
模糊查询&自动完成
特效-尤其是爆炸
jQuery
使用jQuery之前，必须先引入：<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
作用
查找元素：
$("JQ选择器") - 包含了一切css选择器，甚至提供了更多新的，不需要你去记忆 -
1、直接查找：$("JQ选择器")
2、通过 关系网：前提：至少先找到一个人才可以使用关系
父：parent(); ===> parentNode
子：children(); ===> children
前一个兄弟：prev(); ===> previousElementSibling;
后一个兄弟：next(); ===> nextElementSibling;
其他兄弟：*siblings(); ===> JS没有
JQ自带隐式迭代：不需要遍历，可以直接对着集合做操作 ===> JS不能直接对集合做操作，要么下标拿到某一个，要么遍历拿到每一个才可以操作
www.w3school.com.cn/jquery/jque…
创建元素：
$(`<elem 属性名="${变量}">${变量}</elem>`);
底层：document.createElement
操作元素：
内容：底层：innerHTML/innerText/value
获取：$("xx").html/text/val();
设置：$("xx").html/text/val("新内容");
属性：底层：getAttribute/setAttribute/removeAttribute
获取：$("xx").attr("属性名");
设置：$("xx").attr("属性名","属性值");
删除：$("xx").removeAttr("属性名");
样式：
1、可以操作class
1、添加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({
属性名:"值",
...
})
以将DOM转为JQ
只有一个点this和e.target，他们自动得到的就是一个DOM对象，用不了JQ的API，所以找转：$(DOM)
代替window.onload
===> $(callback)
创建元素&上树
$("父").append($(`<elem 属性名="${变量}">${变量}</elem>`));
删除：
$("xx").remove();
jq动画：
1、显示：$("xx").show();
2、隐藏：$("xx").hide();
3、切换：$("xx").toggle(); === show+hide
注意：
如果不传参数，是瞬间显示和瞬间隐藏
如果传入参数：$("xx").toggle("动画名称",时长); - 一定要搭配jQueryUI，jQueryUI对这三个方法进行了增强！
jq和dom的转化
*DOM->JQ：$(DOM);
JQ->DOM：jq对象[下标]
绑定事件
$("xx").事件名(callback)
获取下标
$("xx").index();
简化jquery
1、下载：在你的项目路径下打开cmd：npm i express
2、引入后发现express是一个函数对象，用于创建服务器应用的，当然还要设置监听端口
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("文件路径");
})
中间件：
其实就是一个函数，但是它也可以访问到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("静态资源的文件夹名"))
简化ajax
1、jQuery提供了一个新的ajax方法：
$.ajax({
url:"路由", - 必写
data:"请求消息", - 可选
dataType:"HTML/XML/JSON", - 可选，默认值为HTML（普通字符串），如果你写了JSON，衣服就不需要自己再脱了
type:"GET/POST", - 可选，默认值为GET
success:data=>{ - 必写
data->后端响应给你的，拿到数据要干什么，必须放在这个回调函数里面
}
})
自己封装jquery的$.ajax()
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));
}
}
}
}
