AJAX学习（24.11.1-11.14)

来源： 传智 | 高校学习平台-首页 传智播课：黑马程序员

1.服务器和客户端

1.服务器：存放和对外提供资源的电脑。

2.客户端（用户）：获取和消费资源的电脑。（一般通过浏览器）

2.URL（统一资源定位符）

URL也叫网址，完整的URL包含协议、域名、端口、文件路径、查询参数、锚点。

https://i-blog.csdnimg.cn/direct/82fa6058bfe84068a42e8e19de14be7a.png" width="1200" />

3.客户端和服务器的通信过程

https://i-blog.csdnimg.cn/direct/3b8fab72b5324776aaa1ba5df44408bc.png" width="1200" />

用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对象和服务器进行数据交互。

https://i-blog.csdnimg.cn/direct/5c0eb52ab99a4725969729b3acbdfa61.png" width="1200" />

6.接口的概念

使用AJAX进行数据请求时，被请求的URL地址就是数据接口（简称接口），每个接口必须要有请求方式。

7.接口请求过程

https://i-blog.csdnimg.cn/direct/2cc0fd1077e843dfb52fc9d58204ffac.png" width="1200" />

post同理。（将获取数据改为提交数据）

8.了解同源策略和跨域

1.同源：两个页面URL的协议、域名、端口号相同。（没有端口号时，端口号默认为80）

https://i-blog.csdnimg.cn/direct/93c46fb089924dda8f03f487df7597f5.png" width="1200" />

https://i-blog.csdnimg.cn/direct/e4e39bf840ef4387bd44a288ecad4346.png" width="1017" />

https://i-blog.csdnimg.cn/direct/b8e0403111d2409b97ff0999d7fc6ae9.png" width="1200" />

https://i-blog.csdnimg.cn/direct/e57b58327bc34b9dbbc64fad1156219d.png" width="1200" />

9.了解防抖和节流

csdn：什么是防抖和节流？有什么区别？_lua 防抖节流-CSDN博客

防抖（Debounce）和节流（Throttle）是前端性能优化中常用的两种技术，它们主要用于控制某些函数的执行频率，以提高页面的响应速度和性能。

https://i-blog.csdnimg.cn/direct/3aa67e1ab22b4c21832449d405dbb5c3.png" width="1200" />

（1）防抖

概念图：

https://i-blog.csdnimg.cn/direct/6d36e814ccf34e22a0b0cc320aca000b.png" width="568" />

核心代码：

  <button>点我</button>
<script>let btn=document.querySelector('button');let timer=null;btn.onclick=function(){clearTimeout(timer);timer=setTimeout(()=>{console.log('点我');},1000)}
</script>

（2）节流

概念图：

https://i-blog.csdnimg.cn/direct/035ef10f90414f7ca2e042b59127bc91.png" width="481" />

核心代码:

 <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:

https://i-blog.csdnimg.cn/direct/dd462bf25da04e71b794232a2ab4d77c.png" width="1200" />

3.how

https://i-blog.csdnimg.cn/direct/641b2721720e4b4580345d0ac7e38a86.png" width="1168" />

(2)HTTP请求消息

1.概念：客户端发起的请求叫HTTP请求，客户端发送到服务器的消息叫做HTTP请求消息。

（HTTP请求消息又叫HTTP请求报文）

2.组成部分：

https://i-blog.csdnimg.cn/direct/925eeb520c5f47a5bc997f17ee9bde25.png" width="1136" />

=》请求行（start line)：

        ​ =》请求方法

​         =》URL

        ​ =》HTTP协议版本

https://i-blog.csdnimg.cn/direct/7e6236908f014580ac9778da4c6a03fc.png" width="1200" />

=》请求头部：用于描述客户端的基本信息，把客户端的相关信息告诉服务器。

        ​ =》组成：多行键/值对

          =》例如：

                        ​ =》User-Agent说明当前浏览器类型，操作系统、设备类型等

                        ​ =》Accept描述客户端接受什么类型的返回内容，是一个优先级列表

        ​ 例如，Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8                 表 示客户端优先接受HTML内容，其次是XML，然后是其他所有类型的内容。

                        ​ =》Content-Type描述发送到服务器的数据格式

https://i-blog.csdnimg.cn/direct/05d9e13e1f63463bb3c9fe586b392c77.png" width="1200" />

常见请求头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.组成部分：

https://i-blog.csdnimg.cn/direct/b59397f137fd412c8b3d252c6f54485f.png" width="1200" />

=》状态行：

        =》协议版本，通常为 HTTP/1.1

        =》状态码

        =》状态码的文本描述

=》响应头部：描述服务器的基本信息

        =》组成：多行键/值对

        =》示例：

https://i-blog.csdnimg.cn/direct/31e81685efae4ef2a8a4ea074a2b1fd8.png" width="1200" />

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

https://i-blog.csdnimg.cn/direct/42da0451620a46738687bc6113b98df2.png" width="1200" />

（5）HTTP响应状态码

mdn参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status

https://i-blog.csdnimg.cn/direct/10bc1af62c2e4e1999bf4a5c5d79c7ea.png" width="1199" />

重定向：指示浏览器或客户端从一个URL（统一资源定位符）跳转到另一个URL

常用状态码：

https://i-blog.csdnimg.cn/direct/f9cfa58ab0854d05a872de680af1b02c.png" width="1200" />

https://i-blog.csdnimg.cn/direct/c6873bfad2cc45d2895547838fbfb948.png" width="1200" />