ajax

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，比如：<input />、<input disabled="disabled"/>
DHTML - 动态效果网页：在离线端，我们的网页也具有动态的特效：其实不是新技术也不是新概念，而是现有技术的一个整合统称：HTML+CSS+JS(dom) XML - 配置文件|数据格式：没有提供过任何预定义标签！全靠自定义

2、如何使用XML，其实就是一个后缀.xml的文件

1、创建xx.xml文件
2、必须写上声明标签： - 必须放在第一行第一列
version - 版本号：目前有的版本只有1.0和1.1，但是1.1升级并不理想，没有人使用，所以1.0可以说是唯一版本，而且你学了以后都不用在学了，以后都不会更新了，因为已经淘汰了，有更棒的人（JSON）
encoding - 编码格式
3、必须写上一个根标签，而且只能写一个根标签，而且必须是双标签
4、里面内容随意，你想放什么就放什么

开发中，正常来说后端会想办法将数据库的数据整理为一个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);

jQuery

1、jQueryUI：

基于jQuery（基于JavaScript的一个框架，是三大框架出现之前，最火的一个，但是现在已经被淘汰了）的开源网页用户界面代码库 - 提供了HTML、CSS、JS的一个插件库

三大框架：Vue（中国人的框架）、React、Angular（在国内几乎没有市场）

组件库：组件，组成网站一部分的部分，代码重用，一般不具备JS功能：比如导航条、图文显示...

插件库：跟组件差不多，只不过带有JS功能 - 选项卡、轮播...

2、简化了核心DOM

使用jQuery，必须先引入：<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

jQuery中最有魅力的一个方法叫做$：

作用：

1、查找元素：$("JQ选择器"); - 包含一切css选择器的，不需要记忆：推荐网址：www.w3school.com.cn/jquery/jque… - 底层就是document.querySelectorAll
2、创建元素：$("<标签></标签>"); - document.createElement
3、可以将DOM转为JQ：$(DOM对象);
4、代替了window.onload - $(callback);面试题：两者的区别？
1、window.onload - 等待所有资源（html、css、其他js、图片、视频、音频。。。）加载完毕才会执行，效率降到了最低，而且一个页面只能写一次
2、$(callback) - 只是等待DOM加载完毕就会执行，性能比window.onload要高，而且一个页面能写多次底层用到了一个人：重载：arguments - 可以通过判断用户传入的实参的不同执行不同的操作

1、查找元素：

    1、除了直接查找：$("JQ选择器");
    2、通过关系查找：至少要先找到一个人才可以使用关系：
            父：parent();
            子：children();
            前一个兄弟：prev();
            后一个兄弟：next();
            其他兄弟：siblings();
    JQ自带隐式迭代，不需要遍历，可以对集合直接做操作

2、操作元素：

    1、内容：
            获取：$("xx").html/text/val();
            获取：$("xx").html/text/val("新内容");

    2、属性：
            获取：$("xx").attr("属性名");
            设置：$("xx").attr("属性名","属性值");

    3、样式：
		1、可以操作class：
			1、添加class：$("xx").addClass("新class") - JS中没有此操作，只能替换
			2、删除class：$("xx").removeClass()
					如果不传参，删除所有的class名
					如果传入，删除对应的class名
			3、切换class：$("xx").toggleClass("新class")
	
		2、直接操作css
			获取：$("xx").css("css属性名");
			设置：$("xx").css("css属性名","css属性值");
			一句话设置多个样式：
				$("xx").css({
					css属性名:"css属性值",
					...
				});

3、JQ的遍历：

   $("一堆人").each((i,val)=>{})

4、JQ上树&删除：

上树：父亲.append(儿子)
删除：$("xx").remove();

JQ动画：

1、显示 - $("xx").show();
2、隐藏 - $("xx").hide();
3、切换 - $("xx").toggle();
        如果不传参数，是瞬间显示，瞬间隐藏
        可以传入实参：$("xx").api("动画名称",时长);

JQ不可以用以前DOM的语法，DOM也不可以用JQ的语法，但是两者其实可以互换

JQ->DOM：$("xx")[下标]; DOM->JQ：$(DOM);

jQuery可以称之为是一个类库（小），也可以称之为是一个框架（大）

因为大部分人只知道jQuery有一个.js文件（类库）jquery.js

但是jQuery可以称呼是一个框架，因为它由4部分组成： 1、jquery.js 2、jQueryUI.js 3、jQuery-Mobile.js - 但是现在三阶段有uniapp 4、QUnit - 测试用来测试JavaScript代码的一个工具

工具： 1、百度搜索：jQuery插件库网站 2、百度搜索：jQuery之家，免费的，但是没有jQuery插件库那么好看

express

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("静态资源的文件夹名"));

如何简化ajax：

1、jQuery提供了一个新的ajax：

    $.ajax({
            url:"路由", - 必写
            data:"请求消息", - 可选
            dataType:"HTML/XML/JSON", - 可选，默认值为HTML，如果你写了JSON，则可以省略JSON.parse方法
            type:"GET/POST", - 可选，默认值为GET
            success:(data)=>{ - 必写
                    data->后端响应的内容，你不需要再写xhr.responseText
            }
    })

第六周