No64.精选前端面试题，享受每天的挑战和学习-阿里云开发者社区

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参数传输
安全性	不适合存储敏感数据，容易受到篡改和窃取的风险	通过存储于服务器端，较为安全，但仍需注意合理使用和保护
性能影响	对网络请求会增加一定的数据量和带宽消耗	需要维护一份服务器端的数据副本，对服务器性能有影响