AJAX
asynchronous javascript and xml 直译：异步的javascript和xml
概念：
同步交互：客户端向服务器端发送请求，直到服务器端进行响应的全过程，用户是不能做其他事情的
典型：网址请求、表单请求
异步交互：客户端向服务器端发送请求，直到服务器端进行响应的全过程，用户是可以做其他事情的
典型：ajax请求
不严格的定义：页面不会完全的刷新，只会导致局部页面发生改变
已经见过异步技术：
1、定时器 - 定时器里面的内容再耗时也不会卡主后续代码 - 做特效
2、ajax - 目的：在不刷新页面的情况下也可以和服务器端进行交互沟通，【可以将服务器端的数据放到前端】
使用方法
4个固定步骤
1、创建ajax的核心对象XMLHttpRequest - 简称XHR对象
var xhr=new XMLHttpRequest();
2、建立和服务器端的连接
xhr.open("GET/POST","xx.php");
3、向服务器发送请求
xhr.send("key=value&key=value&...");
特殊：
1、如果是GET请求，send方法会失效，但是还不能省略不写，必须写为xhr.send(null)，请求消息放到url?后面
xhr.open("GET","xx.php?key=value&...");
xhr.send(null);
2、如果是POST请求，send方法可用，但是需要在之前设置请求头部
xhr.open("POST","xx.php");
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; //接收到服务器的响应：php放在页面上的一切东西 - 拿到后做想要做的操作
}
}
XML数据格式（不重要，仅了解）
XML - 配置文件|数据格式 - 未知的标记语言
没有提供过任何预定义标签，所有的标签自定义
使用方法
1、创建一个xx.xml文件
2、写入文档声明
<?xml version="1.0" encoding="utf-8"?>
version - 版本号：目前只有1.0和1.1，1.1升级的拉胯，再也不会更新了
encoding - 设置中文编码
必须出现在第一个行第一列
3、在下方写入一个根标签，注意必须是一个双标签：只有双标签才可以包裹住其他内容，而且只能有一个
4、里面其余标签随意
前端开发人员：
1、依然使用ajax去获取
2、url写为"xx.xml";
3、不使用xhr.responseText 使用【xhr.responseXML】 可以当做DOM来处理
JSON数据格式
javascript object notation：js对象表示法，本身就是js的一部分，只不过独立出来，各大主流语言都支持的一种轻量级【文本】数据
作用：类似于XML，都是一个数据格式，更简洁、更快、更容易解析
哪些叫做JSON数据（JSON字符串）：
1、'[1,2,3,4,5]'
2、'{"name":"xyz","age":18}'
3、'[{},{},{},{}]'
4、'{"names":[],"ages":[],"salaies":[]}'
PHP如何包装
echo JSON_encode($arr); - 数据转为了JSON字符串
Node.js的语法和javascript几乎相同 => 如何包装：JSON.stringify(arr);
3、前端依然使用ajax获取数据
xhr.responseText得到服务器端响应的的数据,如何解除包装：
1、eval("("+jsonTxt+")");
2、JSON.parse(jsonTxt);
客户端存储技术
1、查询字符串：缺点：只适合双页面传输，多页面不方便，解析复杂
2、cookie：缺点：大小有限制(2kb)，保存解析非常麻烦，用户可以禁用cookie！
3、webStorage：几乎没有缺点：html5带来的新概念，老IE不支持。优点：大小有限制(8mb)，使用极其简单
分为两大类：
1、localStorage - 本地级：永久存在的
2、sessionStorage - 会话级：浏览器一旦关闭，数据就没了
保存：xxxStorage.属性名=值;
读取：xxxStorage.属性名
删除：xxxStorage.removeItem("属性名");
清空：xxxStorage.clear();
jQuery
jQuery框架概念：
jQuery类库其实就一个.js文件
在三大框架（vue、react、angular）出现之前，曾经全球最火的一个框架
曾经全球第二火的框架：prototype.js
目的|特点：简化DOM开发、事件、ajax
为什么有的人称呼jQuery是一个框架，有的人称呼jQuery是一个类库？
大部分人不知道jQuery其实由4部分组成：
1、jQuery.js - 专门简化js开发 - 大部分人只知道它，所以称呼jQuery叫做一个类库
2、jQuery.ui.js - 专门针对UI开发 - 初衷：哪怕没有UI设计师，使用jQuery.ui，做出来的网页不会太丑（HTML+CSS+JS） - 插件库
3、jQuery.mobile.js - 专门针对移动端开发 - 淘汰的
4、Qunit - 专门给测试人员测试js代码的
jQuery的历史
版本：1.xx - 在支持老IE的同时，还做了向上兼容（新版本带来的新特性，我们也可以使用到）
2.xx - 不再支持老IE
3.xx
诞生：06年
目的：提供了10000多行代码，带来了一个叫做jQuery的对象（属性和方法）
使用jQuery
固定步骤：
1、在HTML页面引入jquery-1.11.3.js文件
2、使用jQuery提供的选择器去获取元素
3、使用jQuery提供的API去操作元素
jQuery提供了一个工厂函数
语法：*$() 或者 jQuery()
作用：
1、查找元素：$("jQuery选择器") - 一切的css选择器都可以使用，但是jQuery提供了更多的选择器
注意：
1、使用帮助文档：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
2、封装js的底层代码：document.querySelectorAll(); 提供了更加丰富的选择器
3、返回：不再使用DOM集合，而是一个JQ对象：
2、转换：
问题：jQuery和DOM对象都只能使用自己提供的操作，不能用别人的方法
解决：
1、jQuery -> DOM
语法：$("jQuery选择器")[下标] - 绝对没用，不会把简单的变成复杂的
2、DOM -> jQuery
语法：$(dom对象) - 有用，this/e.target -> 自动是一个DOM对象，用不了jQuery的操作
jQuery的特性
1、链式操作 - 找到一个元素后可以不断地连续的操作它
2、隐式迭代 - 悄悄的自动的循环，不用/千万不要去循环他，千万不要加下标
通过关系获取元素：前提：先找一个元素
父：$("xx").parent();
子：$("xx").children();
前一个兄弟：$("xx").prev();
后一个兄弟：$("xx").next();
除了自己的其他兄弟：$("xx").siblings();
操作元素
内容 - html/text/val - 完全等效于innerHTML/innerText/value
语法：获取：$("xx").api()
设置：$("xx").api("新内容")
属性 - attr - 完全等效于getAttribute/setAttribute
语法：获取：$("xx").attr("属性名")
设置：$("xx").attr("属性名","属性值")
删除：$("xx").removeAttr("属性名")
jQuery专门为class提供了一系列操作：
追加class：$("xx").addClass("新的class");
删除class：$("xx").removeClass();
- 如果不传入参数，清空所有class
- 如果传入参数，删除指定的class
切换class：$("xx").toggleClass("新的class");
- 在有此class和没有此class之间进行切换
样式 - css - 无敌的，不关心是内联还是样式表，只关心当前生效的样式是什么
获取：$("xx").css("css属性名")
设置：$("xx").css({ //设置一定设置的是内联样式，优先级最高
"css属性名":"css属性值",
...
})
创建元素&渲染页面&删除元素&克隆元素
工厂函数的第三个作用：
1、创建元素
var 新元素=$(`<开始标签 class=''>${变量}</结束标签>`)
2、渲染页面：4种
向里插入，当儿子
*$("父元素").append(新元素); - 最后一个儿子
$("父元素").prepend(新元素); - 第一个儿子
向外插入，当兄弟
$("兄弟").before(新元素); - 前一个兄弟
$("兄弟").after(新元素); - 后一个兄弟
3、删除元素：$("xx").remove();
4、克隆元素：没用
$("xx").clone(true);//添加原来xx的js的功能
