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>