Ajax 是什么? 如何创建一个 Ajax？
1.创建 XMLHttpRequest 对象，也就是创建一个异步调用对象
2.创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息
3.设置响应 HTTP 请求状态变化的函数
4.发送 HTTP 请求
5.获取异步调用返回的数据
6.使用 JavaScript 和 DOM 实现局部刷新
Ajax（Asynchronous JavaScript and XML）是一种用于在网页上进行异步数据交互的技术。通过 Ajax，可以在不刷新整个页面的情况下，通过后台服务器发送请求并获取响应，然后使用 JavaScript 对网页进行部分更新。
以下是创建一个基本的 Ajax 请求的步骤：
- 创建一个 XMLHttpRequest 对象：通过
new XMLHttpRequest()创建一个 XMLHttpRequest 对象，用于发送异步请求。 - 配置请求参数：使用
open()方法配置请求的类型（GET 或 POST）和 URL。还可以设置其他的请求参数，如是否采用异步方式，是否需要进行认证等。 - 注册回调函数：使用
onreadystatechange属性注册一个回调函数，当请求的状态改变时，触发该函数。 - 发送请求：使用
send()方法发送请求。对于 GET 请求，可以将参数拼接在 URL 上；对于 POST 请求，需要将参数作为send()方法的参数。 - 处理响应：在回调函数中，通过检查请求的状态和响应的状态码，获取响应的数据。
下面是一个简单示例，演示如何使用原生 JavaScript 创建一个 Ajax 请求：
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); // 输出响应的数据 } }; xhr.open('GET', 'http://example.com/api/data', true); xhr.send();
上述示例中，创建了一个 GET 请求，请求 URL 为 http://example.com/api/data。当请求的状态变为 4（已完成）并且响应状态码为 200 时，通过 responseText 属性获取响应的数据。
需要注意的是，现代的 Web 开发中，常使用基于 Promise 的 Fetch API 或使用库（如 Axios、jQuery.ajax 等）来简化 Ajax 请求的创建和处理过程。这些工具提供更便捷的方法和更好的兼容性，可以根据具体需求选择适合的方式。
js 延迟加载的方式有哪些？
defer 属性 async 属性 动态创建 DOM 方式 使用 setTimeout 延迟方法 让 JS 最后加载
在 JavaScript 中，有以下几种延迟加载（Lazy Loading）的方式：
- 动态脚本加载：通过创建一个
<script>元素，并将其添加到文档中，以动态加载外部 JavaScript 文件。可以在页面需要时再进行脚本的加载，从而减少初始加载时的网络请求和页面加载时间。
var script = document.createElement('script'); script.src = 'path/to/script.js'; document.body.appendChild(script);
- 懒加载模块：对于模块化开发的项目，可以使用工具或框架来实现模块的按需加载。通过将模块拆分为多个文件，并在需要时动态加载所需的模块，可以减少首次加载时的文件体积，在需要时再加载额外的模块。
- 图片懒加载：对于页面上的图片元素，可以将图片的实际
src属性延迟加载，而使用占位符或默认的data-src属性存储图片的真实 URL。当用户滚动到可见区域时，再动态加载图片。 - 按需加载组件：在复杂的应用中，可以通过按需加载组件来减少初始页面的大小和加载时间。只有在用户需要时才动态加载所需的组件，可以利用懒加载的方式来提高应用的性能。
- 虚拟列表：对于需要展示大量数据列表的情况，可以使用虚拟列表进行懒加载。只在可见区域内渲染列表项，而在滚动时动态加载和卸载其他列表项，从而优化性能和内存占用。
这些延迟加载的方式可以根据具体的项目需求和场景选择使用。通过延迟加载，可以提高页面的初始加载速度和用户体验，避免不必要的资源浪费。
如何解决跨域问题？
1.通过 jsonp 跨域 2.document.domain + iframe 跨域 3.location.hash + iframe 4.window.name + iframe 跨域 5.postMessage 跨域 6.跨域资源共享（CORS) 7.nginx 代理跨域 8.nodejs 中间件代理跨域 9.WebSocket 协议跨域
跨域问题指的是在浏览器中，当前页面发起的请求访问了不同域名、不同端口或不同协议的资源时，浏览器会限制这种跨域请求，以保护用户的安全。为了解决跨域问题，有以下几种常用的方法：
- 使用 CORS（跨域资源共享）：在服务端设置合适的响应头，允许跨域请求。在响应的头部中添加
Access-Control-Allow-Origin字段，指定允许访问资源的域名。例如，可以设置为Access-Control-Allow-Origin: http://example.com。同时，可以设置其他的 CORS 相关字段，如Access-Control-Allow-Methods、Access-Control-Allow-Headers等，以控制跨域请求的方式和权限。 - JSONP（JSON with Padding）：JSONP 是一种跨域请求的解决方案，它利用了
<script>标签没有跨域限制的特性。通过在页面中创建一个<script>标签，并在其src属性中指定要请求的 URL，服务器返回的数据需要用特定的回调函数包裹。服务器处理请求时，将数据作为参数传递给回调函数。这样，浏览器就可以通过回调函数获取到数据。 - 代理服务器：在自己的服务器上设置一个代理服务器，将前端的跨域请求转发到后端所在的域名下。前端只需要与自己的服务器通信，而不是直接访问跨域的资源。
- WebSocket：WebSocket 是一种支持跨域通信的协议。它使用了特殊的握手方法，在建立连接后，服务器和客户端可以通过发送消息进行实时通信。
- 使用反向代理：可以使用反向代理服务器（如 Nginx）来代理请求，将前端页面与需要访问资源的后端服务部署在同一域名下，然后通过配置反向代理，将请求转发到对应的后端服务。
需要根据具体的场景和需求选择合适的跨域解决方案。同时，要注意跨域解决方案可能会引入其他安全风险，应综合考虑安全性和便利性。
说下cookie和session
Cookie和Session是用于在Web应用中进行状态管理的两个重要机制。
Cookie:
- Cookie是一小段数据，由服务器发送给客户端并存储在客户端的浏览器中。
它通常用于跟踪用户的会话、存储用户的偏好设置等。Cookie的数据以键值对的形式存储，并附带一些额外的属性，如过期时间、域限制等。 - 当客户端发送请求时，浏览器会将相应的Cookie信息自动添加到请求的头部中，以便服务器能够读取和使用这些信息。
- Cookie存储在客户端，可以被修改和删除，因此它并不适合存储敏感数据。
Session:
- Session是在服务器端存储用户信息的一种机制。
每个用户访问服务器时，服务器都会为其创建一个唯一的Session，并分配一个Session ID。Session ID通常通过Cookie发送给客户端，并在后续的请求中通过Cookie或URL参数传递回服务器。 - 服务器端的Session存储可以使用内存、数据库或缓存等方式实现。具体的数据存储与管理是由服务器负责的。
- Session可以存储敏感数据，因为它保存在服务器端，客户端无法直接访问和修改。然而，Session需要维护一份服务器端的数据副本，因此在高负载的情况下，会对服务器的性能造成一定的影响。
Cookie和Session的关系：
- 通常情况下，服务器使用Session来跟踪和管理用户的状态，而Cookie则用于在客户端和服务器之间传递存储用户标识的Session ID。
- 当用户首次访问网站时，
服务器会创建一个新的Session并生成一个唯一的Session ID，并将该Session ID通过Cookie发送给客户端。 - 客户端的浏览器会将Cookie保存下来，并在后续的请求中自动发送Session ID给服务器。服务器通过Session ID找到对应的Session，并读取或修改相关数据。
需要注意的是，使用Cookie和Session进行状态管理时，应注意安全性，避免敏感信息泄露和篡改。可以通过设置安全标志、加密和使用HTTPS等方式加强Cookie和Session的安全性。
好的，以下是使用表格对Cookie和Session进行总结：
| Cookie | Session | |
| 定义 | 一小段数据，由服务器发送给客户端的浏览器，以键值对形式存储 | 一种在服务器端存储用户信息的机制 |
| 存储位置 | 客户端的浏览器 | 服务器端 |
| 数据修改 | 客户端可以修改和删除 | 客户端无法直接访问和修改 |
| 适用性 | 用于跟踪会话、存储偏好设置等 | 用于管理用户状态、存储敏感数据等 |
| 传输方式 | 通过请求的头部中的Cookie字段自动传输 | 通过Cookie或URL参数传输 |
| 安全性 | 不适合存储敏感数据，容易受到篡改和窃取的风险 | 通过存储于服务器端，较为安全，但仍需注意合理使用和保护 |
| 性能影响 | 对网络请求会增加一定的数据量和带宽消耗 | 需要维护一份服务器端的数据副本，对服务器性能有影响 |
希望这个表格能够帮助你更清晰地理解和比较Cookie和Session。
