## 1.1-onreadstatechange事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/* 学习目标：XMLHttpRequest的两个事件
1. onload事件 ： 接收服务器响应的数（一次请求，只会执行一次）
2. onreadystatechang事件 : 作用与onload事件一致（一次请求，会执行多次）
面试点： XMLHttpRequest对象的状态码 （xhr.readyState）
0: 请求未建立 (创建了xhr对象，但是还没调用open)
1: 服务器连接已建立
2. 请求已接收 (send之后,服务器已经接收了请求)
3. 请求处理中
4. 请求已完成，且响应已就绪 （ 4状态码等同于onload事件 ）
*/
//(1).实例化ajax对象
let xhr = new XMLHttpRequest()
console.log(xhr.readyState)
//(2).设置请求方法和地址
xhr.open("post", "http://www.liulongbin.top:3009/api/login")
//(3).设置请求头（post请求才需要设置）
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
console.log(xhr.readyState)
//(4).发送请求 ： 参数格式 'key=value'
xhr.send("username=admin&password=123456")
//(5).注册回调函数
//a. onload 是新式浏览器才支持的
//b. 如果要兼容更早的浏览器，可以使用 onreadystatechange
//c. onreadystatechange触发时机 ： xhr.readState状态变化
// xhr.onload = function() {};
xhr.onreadystatechange = function() {
console.log(xhr.readyState)
//onreadystatechange会触发多次，一般需要判断xhr.readState == 4 才获取响应数据
if (xhr.readyState == 4) {
console.log(xhr.responseText)
}
}
</script>
</body>
</html>
## 1.2-Ajax组成部分了解
**- Ajax(阿贾克斯)：全称 Asynchronous Javascript And XML(异步的js与xml)
- 说人话： 用js发送异步的网络请求
- A : Asynchronous 异步
- 同步 ： 指的是代码按照从上往下顺序执行
- 异步 ： 代码不会立即执行,而是要等一会儿执行
- 目前我们学过的ECMAScript只有两个语法是异步的： 定时器 与 ajax
- DOM事件也是属于异步的，但是这个是属于DOM的执行机制。所以一般在讨论js同步和异步的时候，主要以js为主，DOM一般不讨论。
- J：Javascript
- A ：And
- X : XML 与 XMLHttpRequest
- XML ： 解决跨平台数据传输。
- 在JSON没有出来以前, 网络传输主要以XML格式数据为主。 后来JSON问世，逐渐取代XML。 但是由于ajax技术出来的比json早，因此xml这个称呼一直保留至今
## 1.3-get请求与post请求区别(掌握)
**- 1.传参方式不同
- get在url后面拼接(请求行)
- post在请求体传参
-
2.大小限制不同
- get有大小限制，不同浏览器大小限制不同。 一般2-5 MB
- post没有大小限制
-
3.安全性不同
- get参数直接暴露在url，不安全(一般查询类数据都是get)
- post参数在请求体中，更加安全（一般登录注册必须是post）
-
4.传输速度不同
- get传输速度快
- post传输速度慢**
## 1.4-HTTP协议原理与ajax工作原理
**- 1.什么HTTP协议
- 协议指的是规定浏览器跟服务器交互的数据格式
-
2.浏览器请求 必须是：
请求报文 -
3.服务器响应 必须是：
响应报文 -
4.请求报文与响应报文的数据格式如下
-
a.请求报文
- (1)请求行 ： 包含请求方法, URL, 协议版本
- (2)请求头：包含请求的附加信息, 由关键字/值对组成
- (3)请求体：浏览器发送给服务器的数据(
参数)
-
b.响应报文
-
(1)响应行：包含协议版本, 状态码, 状态码描述
- 1xx, 指示信息, 表示请求已接收, 继续处理
2xx, 成功, 表示请求已被成功接收和处理.- 3xx, 重定向, 表示要完成请求必须进行更进一步操作
4xx, 客户端错误, 表示有语法错误或请求无法实现5xx, 服务器端错误, 表示服务器未能实现合法的请求
-
(2)响应头:content-type 返回的数据格式，jQuery自动转JSON就是根据他来判断的
-
(3)响应体：服务器响应给浏览器的数据 （
xhr.responseText）**
-
-
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script>
/*
1.HTTP : 网络传输协议
* 协议 ： 约定 数据传输格式
2.HTTP协议组成部分
2.1 请求报文
2.2 响应报文
3. 请求报文三个组成部分
3.1 请求行 ： 包含请求方法, URL, 协议版本
3.2 请求头 ： 浏览器告诉服务器，我给的数据是什么格式 （content-type在请求头中）
3.3 请求体 ： post请求参数在请求体中
4. 响应报文三个组成部分
4.1 响应行 ： 包含协议版本, 状态码, 状态码描述
2开头 ： 请求成功 200
3开头 ： 重定向 302
4开头 ： 前端问题 400参数错误 401 没有权限 404 url错误
5开头 ： 后台问题 500 服务器bug,可以理解为后台java代码爆红
4.2 响应头 ： 浏览器告诉服务器，我给你的数据是什么格式 （浏览器会自动识别）
4.3 响应体 ： 后台响应的数据，一般是json格式
5.ajax原理： 设置http请求报文的过程
*/
//(1).实例化ajax对象
let xhr = new XMLHttpRequest()
//(2).设置请求方法和地址
xhr.open("post", "http://www.liulongbin.top:3009/api/login")
//(3).设置请求头（post请求才需要设置）
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
//(4).发送请求 ： 参数格式 'key=value'
xhr.send("username=admin&password=123456")
//(5).注册回调函数
// xhr.onload = function() {};
xhr.onreadystatechange = function() {
//onreadystatechange会触发多次，一般需要判断xhr.readState == 4 才获取响应数据
if (xhr.readyState == 4) {
console.log(xhr.responseText)
}
}
</script>
</body>
</html>
## 1.5-一个页面从输入url到呈现过程
**- 1.DNS域名解析： 将url中的域名解析成ip地址
-
2.TCP三次握手： 建立安全的网络传输协议
-
2.1 什么是TCP : 一种 传输控制协议
-
2.2 TCP作用 : 保证HTTP网络传输是 安全 + 可靠的 （检测客户端 与 服务器的网卡是不是通的）
-
2.3 TCP三次握手 :
第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送)
第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。 检测浏服务器: 接收 + 发送)
第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收)
-
-
3.HTTP建立连接
- 3.1 客户端发送请求
- 3.2 服务器处理请求
- 3.3 服务器响应请求
-
4.渲染引擎开始渲染响应返回的HTML文本
- 4.1 解析html生成：dom树
- 4.2 解析css生成：样式树
- 4.3 dom树 与 样式树 合并得到 渲染树
- 4.4 呈现页面**
## 1.5-函数防抖
**- 函数防抖：单位时间内，频繁触发事件，只会触发最后一次
- 函数防抖实际开发应用场景： 实时获取输入框文本**
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入文本">
<script>
/*
1.函数防抖 : 单位时间内，频繁触发事件，只会触发最后一次
2.经典应用场景 ： 输入框输入事件
3.函数防抖流程 ：
3.1 声明全局变量存储定时器ID
3.2 每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中
*/
let timeID = null
document.querySelector('input').oninput = function(){
//清除上一次定时器
clearTimeout(timeID)
//开启本次定时器. 500ms内用户没有触发，自动执行定时器代码。
timeID = setTimeout(()=>{
console.log(`发送ajax请求，搜索内容为${this.value}`)
},500)
}
</script>
</body>
</html>
## 1.6-函数节流
**- 函数节流：单位时间内，频繁触发事件，只会触发一次
- 函数节流应用场景 ： 解决高频事件，频繁触发事件浪费性能**
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<script>
/*
1.函数防抖 : 单位时间内，频繁触发事件，只会触发一次
2.经典应用场景 ： 滚动条事件
3.函数防抖流程 ：
3.1 声明全局变量存储上一次触发交互时间
3.2 每一次触发事件, 获取当前时间 与 上一次时间做比较。判断是否超过节流间隔
3.3 如果 超过节流时间，则执行事件处理代码。 并且存储本次触发时间。
*/
let lastTime = null
window.onscroll = function(){
//判断时间间隔
let currentTime = Date.now()
if( currentTime - lastTime >= 500 ){
console.log('执行滚动条事件处理代码')
//存储本次触发时间
lastTime = currentTime
}
}
</script>
</body>
</html>
