OSI七层交换“参考模型”
物理层 物理学家、通行工程关心的，考虑材料，电压等问题
链路层 内网寻址 ARP
网络层 外网寻址 IP/ICMP
传输层 维持通信稳定性 TCP
表示层 统一各个网络结构
会话层 记录状态
应用层 应用细节 http、FTP、SMTP
五层模型
物理层 物理学家、通行工程关心的，考虑材料，电压等问题
链路层 内网寻址 ARP
网络层 外网寻址 IP/ICMP
传输层 维持通信稳定性 TCP
应用层 应用细节 http、FTP、SMTP
TCP和UDP
TCP---传输控制协议 适用于文件下载和聊天
1.保证到达 2.保证质量 3.保证顺序
UDP---用户数据报协议，对质量没有绝对要求，对延迟有很高要求 适用于IP电话和视频直播
1.不保证到达 2.不保证质量 3.不保证顺序
TCP与UDP基本区别：
1、基于连接与无连接。
2、TCP要求系统资源较多，UDP较少。
3、UDP程序结构较简单。
4、流模式（TCP）与数据报模式(UDP)。
5、TCP保证数据正确性，UDP可能丢包。
6、TCP保证数据顺序，UDP不保证。
7、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接。
8、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。
9、TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的，UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）。
10、每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信。
11、TCP首部开销20字节;UDP的首部开销小，只有8个字节。
12、TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道。
表单
1.属性
action 表示提交到哪
methods 方法，分为GET、POST、DELETE、HEDEER
name 必须加，可以重复
submit 提交按钮
<form action="http://localhost/a.php" method="GET" id="form1">
用户名：<input type="text" name="user"><br> 密码：
<input type="text" name="password">
<input type="submit" value="提交">
</form>2.数据提交
get 数据放在url里
特点： 1.容量有限 2.看得见数据（表单提交） 3.有缓存 4.利于分享和收藏
post 数据放在http-body里
特点： 1.容量有限 2.看不见数据 3.无缓存 4.没法分享和收藏
get和post安全性一样，HTTPS 才是真的安全
ajax与表单提交
ajax用户体验好（js实现），表单提交性能更稳定（浏览器来实现）
表单重复提交优化
开始提交----禁用submit
提交完成---启用submit
同步----串行 一个一个来，前面没完，后面等着
异步----并行 一堆一块进行，前面没完成没关系，后面的也接着上，前面的处理完了返回给它就好了
readyState
0 初始化--刚刚创建
1 已连接
2 已发送
3 已接收---头
4 已接收---body
http状态码：
1xx 消息
2xx 成功
3xx 重定向
301（永久重定向---浏览器永不会再次请求老地址）
302（临时重定向---浏览器下次还会请求老地址）
304（缓存）
4xx 请求错误（客户端）
5xx 服务端错误
xhr.responseText 文本
xhr.responseXML XML数据
ajax原生实现：
1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
<script>
window.onload = function() {
let oBtn2 = document.getElementById("btn2");
let oBtn3 = document.getElementById("btn3");
//get
oBtn2.onclick = function() {
// 不兼容ie6
let xhr = new XMLHttpRequest();
// 连接，true表示异步
xhr.open('GET', 'a.php', true)
// 发送
xhr.send();
// 接收
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
console.log('成功' + xhe.responseText)
} else {
console.log('失败')
}
}
}
}
//post
oBtn3.onclick = function() {
// 不兼容ie6
let xhr = new XMLHttpRequest();
// 连接，true表示异步
xhr.open('POST', 'a.php', true)
// 发送
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send('a=1&b=2');
// 接收
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
console.log('成功' + xhe.responseText)
} else {
console.log('失败')
}
}
}
}
}
</script>
</head>
<body>
<div>
<input type="button" value="按钮2get" id="btn2">
<input type="button" value="按钮3post" id="btn3">
</div>
</body>
</html>简化代码：
function ajax(options) {
options = options || {};
options.type = options.type || 'get';
options.data = options.data || {};
options.dataType = options.dataType || 'text';
let xhr = new XMLHttpRequest();
//数据组装
let arr = [];
for (let name in options.data) {
arr.push(`${name}=${options.data[name]}`)
}
let strData = arr.join('&');
if (options.type == 'post') {
xhr.open('POST', options.url, true)
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send(strData);
} else {
xhr.open('GET', options.url + '?' + strData, true)
xhr.send();
}
// 接收
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
let data = xhr.responseText;
switch (options.dataType) {
case 'json':
if (window.JSON && JSON.parse) {
data = JSON.parse(data);
} else {
data = eval('(' + str + ')');
}
break;
case 'xml':
data = xhr.responseXML;
break;
}
options.success && options.success(data)
} else {
options.error && options.error(data)
}
}
}
}
// 使用
ajax({
url: '1.php',
data: {
a: 1,
b: 2
},
dataType: 'json',
success(data) {
console.log(data)
},
error() {
console.log('出错')
}
})
重定向 给浏览器下命令，让浏览器去请求另一个地址---地址变化
转发 在服务器内部，把请求转交给另一个模块处理；对客户端不可见---地址不变
单点登录：单点登录原理与简单实现
content-type有哪些类型，各是什么意思？
text/plain 纯文本
application/x-www-form-urlencoded 数据编码格式为(名字=值&名字=值&名字=值)，名字和值都进行了URL转码)
multipart/form-data 定界符分隔各个数据（文件上传）
jsonp
安全性问题在于过于开放
<script>
function show(json) {
let oUl = document.getElementById('ul1');
oUl.innerHTML = '';
json.s.forEach(str => {
let oLi = document.createElement('li');
oLi.innerHTML = str;
console.log(str)
oUl.appendChild(oLi);
});
}
window.onload = function() {
let oTxt = document.getElementById('txt1');
oTxt.oninput = function() {
let oS = document.createElement('script');
oS.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${oTxt.value}&cb=show`;
document.head.appendChild(oS);
}
}
</script>
<input type="text" id="txt1">
<ul id="ul1"></ul>