一、Ajax:Asynchronous JavaScript And XML

1、异步的JavaScript和XML，可以在不刷新页面的情况下和服务器端进行交互

2、使用步骤：

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&...");
           ajax一般使用get，跟安全性有关的使用post
4.绑定状态监听事件
 xhr.onreadystatechange=()=>{
     if(xhr.readyState==4&&xhr.status==200){
    xhr.responseText -》 服务器端返回的相应文本
 }
 }

二、数据格式

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、必须写上声明标签：<?xml version="1.0" encoding="utf-8"?> -》 必须放在第一行第一列
version -》 版本号：目前有的版本只有1.0和1.1，但是1.1升级并不理想，没有人使用，所以1.0可以说是唯一版本，
encoding -》 编码格式
  3、必须写上一个根标签，而且只能写一个根标签，而且必须是双标签
  4、里面你随意，你想放什么就放什么

3、用了XML之后前端：依然使用ajax去获取xml

1、路由 写为 "xx.xml"
2、xhr.responseText 换成 xhr.responseXML -》 可以使用【核心DOM】去操作你需要的东西

2、JSON：

1、JavaScript Object Notation：JS对象表示法，本身就是JS的一部分

作用：数据格式类似于 XML

好处：比XML 更简洁、更快、更容易解析

2、哪些属于JSON字符串：

1、'[1,2,3,4,5]';
2、'{"key":value,...}';
3、'[{},{},{},{}]';
4、'{"names":[1,2,3,4],"ages":[1,2,3,4]}'

3、后端把数据库的数据取出来整理为一个JSON字符串：var jsonTxt=JSON.stringify(jsonObj);

4、前端依然使用ajax去获取响应数据，真正重要的：xhr.responseText;

将JSON字符串解析为一个JSON对象：那么：2种方法 - 脱衣服：

1.eval("("+xhr.responseText+")");
2.JSON.parse(xhr.responseText);

三、jQueryUI

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

三大框架：Vue（中国人的框架）、React、Angular（在国内几乎没有市场）
组件库：组件，组成网站一部分的部分，代码重用，一般不具备JS功能：比如导航条、图文显示...
插件库：跟组件差不多，只不过带有JS功能 - 选项卡、轮播...

2、如何使用插件库：

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方法来实现功能

3、jQuery中的$方法：

作用：

1、查找元素：$("JQ选择器"); -》 包含一切css选择器：推荐网址：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp -》 底层就是document.querySelectorAll
2、创建元素：$("<标签></标签>"); -》 document.createElement
3、可以将DOM转为JQ：$(DOM对象);
4、代替了window.onload -》$(callback);

    面试题：两者的区别？
      1、window.onload -》 等待所有资源（html、css、其他js、图片、视频、音频。。。）加载完毕才会执行，效率降到了最低，而且一个页面只能写一次
      2、$(callback) -》 只是等待DOM加载完毕就会执行，性能比window.onload要高，而且一个页面能写多次
          
5、底层用到了一个人：重载：arguments -》 可以通过判断用户传入的实参的不同执行不同的操作

4、$的使用：

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();

5、JQ动画：

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

6、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
		4、QUnit - 测试用来测试JavaScript代码的一个工具

四、Node.js的第三方框架：express

1、express：Node.js的第三方框架，用于简化服务器端node.js搭建服务器的操作

1、下载引入：

	npm i express
	var express=require("express");
	var bp=require("body-parser");

2、创建服务器应用并且绑定监听端口并且解析post的隐式提交

	var app=express();
	app.listen(80);
	app.use(bp.urlencoded({extended:false}))

3、开启路由：

  app.get/post("路由名",(req,res)=>{
//GET：想要得到前端传来的请求消息
req.query.键名;
//POST：想要得到前端传来的请求消息
req.body.键名;
//响应消息：
res.send(数据);
//响应文件：
res.sendFile("绝对路径")
  })

4、中间件：现实生活中的保安，可以出现在任何一个路由的前面，如果不放行，是执行不到路由的，也可以操作req 和res对象，可以判断，可以访问，可以修改

 app.use((req,res,resolve)=>{
resolve();//比如我们可以提前判断前端传来的是什么，不满足就不放行
 })

2、两个固定套路：

1、解析post的隐式提交的请求消息：app.use(bp.urlencoded({extended:false})) 2、加载静态资源：app.use(express.static("静态资源的文件夹名"));

3、jQuery提供了一个简化版的ajax

必须要引入jQuery.js - 具有一万多行代码
$.ajax({
	type:"GET/POST",//可以不写，默认为GET
	url:"路由",//必写
	data:"key=value&key=value&...",//如果不想说话，可以不写
	dataType:"HTML/XML/JSON",//可以不写，但是不会帮你脱衣服了
	success:data=>{//必写，拿到数据后要干什么
		data->相当于以前的xhr.responseText;
	}
})

4、可以自己封装一个：

function $(){
	//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.status==200&&xhr.readyState==4){
			if(dataType=="HTML"){
				success(xhr.responseText);
			}else if(dataType=="XML"){
				success(xhr.responseXML);
			}else if(dataType=="JSON"){
				success(JSON.parse(xhr.responseXML));
			}
		}
	}
}

Javascript 第六周知识点复习