AJAX学习（24.11.1-24.11.14）(包含HTTP协议）
AJAX学习（24.11.1-11.14)
来源： 传智 | 高校学习平台-首页 传智播课：黑马程序员
1.服务器和客户端
1.服务器：存放和对外提供资源的电脑。
2.客户端（用户）：获取和消费资源的电脑。（一般通过浏览器）
2.URL（统一资源定位符）
URL也叫网址，完整的URL包含协议、域名、端口、文件路径、查询参数、锚点。
3.客户端和服务器的通信过程
用Ctrl+Shift+I 打开chrome浏览器的开发者工具，Network-Doc查看
4.请求数据的方式
XMLHttpRequest对象（xhr)
通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。
用于单页面应用。(SPA)
常用的方式是：get和post
get:向服务器要资源，如获取数据，js文件，css文件等
post:往服务器发送资源，如提交表单信息等。
5.AJAX概念
1.异步的Javascript和XML
2.在网页中利用XMLHttpRequest对象和服务器进行数据交互。
6.接口的概念
使用AJAX进行数据请求时，被请求的URL地址就是数据接口（简称接口），每个接口必须要有请求方式。
7.接口请求过程
post同理。（将获取数据改为提交数据）
8.了解同源策略和跨域
1.同源：两个页面URL的协议、域名、端口号相同。（没有端口号时，端口号默认为80）
9.了解防抖和节流
csdn：什么是防抖和节流？有什么区别？_lua 防抖节流-CSDN博客
防抖（Debounce）和节流（Throttle）是前端性能优化中常用的两种技术，它们主要用于控制某些函数的执行频率，以提高页面的响应速度和性能。
（1）防抖
概念图：
核心代码：
<button>点我</button>
<script>
let btn=document.querySelector('button');
let timer=null;
btn.onclick=function(){
clearTimeout(timer);
timer=setTimeout(()=>{
console.log('点我');
},1000)
}
</script>（2）节流
概念图：
核心代码:
<button>
点我
</button>
<script>
let btn=document.querySelector('button');
let flag=true;
btn.onclick=function(){
if(flag){
flag=false;
console.log('节流');
}
setTimeout(()=>{
flag=true;
},5000)
}
</script>10.HTTP协议
mdn的HTTP概述：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview
（1）HTTP简介
1.通信
概念：信息的传递和交换；
三要素： =》主体（服务器和客户端）
=》内容
=》方式
协议：互联网的通信协议是网页内容的传输协议。（网页内容又叫超文本）
HTTP协议：超文本传输协议（HyperText Transfer Protocol）
2.what is http:
3.how
(2)HTTP请求消息
1.概念：客户端发起的请求叫HTTP请求，客户端发送到服务器的消息叫做HTTP请求消息。
（HTTP请求消息又叫HTTP请求报文）
2.组成部分：
=》请求行（start line)：
=》请求方法
=》URL
=》HTTP协议版本
=》请求头部：用于描述客户端的基本信息，把客户端的相关信息告诉服务器。
=》组成：多行键/值对
=》例如：
=》User-Agent说明当前浏览器类型，操作系统、设备类型等
=》Accept描述客户端接受什么类型的返回内容，是一个优先级列表
例如，Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 表 示客户端优先接受HTML内容，其次是XML，然后是其他所有类型的内容。
=》Content-Type描述发送到服务器的数据格式
常见请求头csdn：
HTTP请求头及其作用_请求头的作用-CSDN博客
mdn详情：
https://developer.mozilla.org/zh-CN/docs/Glossary/Request_header
=》空行：分隔请求头部和请求体
=》请求体：用于发送从客户端到服务器的数据。
=》注意：按照HTTP规范，GET请求通常不包含请求体(但是官方没有明令禁止），因为GET请求主要用于请求数据，而不是提交数据。GET请求的参数通常通过URL的查询字符串（query string）传递。
相关文章：get请求能携带请求体吗？_get 请求体-CSDN博客
=》包含请求体的请求方式：POST（最常见）、PUT、DELETE、PATCH
=》请求体中的数据类型：由Content-Type请求头指定
(3)HTTP响应消息
1.概念：服务器响应给客户端的消息内容，也叫响应报文。
2.组成部分：
=》状态行：
=》协议版本，通常为 HTTP/1.1
=》状态码
=》状态码的文本描述
=》响应头部：描述服务器的基本信息
=》组成：多行键/值对
=》示例：
mdn:https://developer.mozilla.org/zh-CN/docs/Glossary/Response_header
=》空行：分隔响应头部和响应体
=》响应体：服务器响应给客户端的资源内容（在Network面板下的Resposne查看）
（4）HTTP请求方法
mdn参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods
=》增：POST
=》删：DELETE
=》改：PUT
=》查：GET
（5）HTTP响应状态码
mdn参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
重定向：指示浏览器或客户端从一个URL（统一资源定位符）跳转到另一个URL
常用状态码：
