学习路径

参考链接：

Ajax常见面试题---总结 - 知乎 (zhihu.com) AJAX原理及常见面试题 - 知乎 (zhihu.com) 面试题：手写ajax - 掘金 (juejin.cn)

学习方面

1. 黑马程序员的教学视频 除了讲Ajax还一些网络浏览器之间的通用知识，很不错
2. 千峰教育 原生Ajax和Fetch还有axios,其实明白了Ajax和原理，具体学习的就是调用方法的学习

面试题/学习整理

AJAX面试题

1. 什么是Ajax？它的作用是什么？

Ajax是"Asynchronous JavaScript and XML"（异步JavaScript和XML）的缩写，它是一种用于创建动态网页的技术。 Ajax能够在不刷新整个页面的情况下，通过JavaScript异步向服务器请求数据，异步地加载和更新部分页面内容。 可以提高用户体验，动态加载数据，表单验证和提交等。 Ajax通常使用XMLHttpRequest对象来实现异步通信，也可以使用fetch API、jQuery等库简化开发。

2. 传统的请求方式？与Ajax有什么不同？

• 传统的方式
  • 直接在浏览器地址栏上输入URL。
  • 点击超链接
  • 提交form表单
  • 使用JS代码发送请求
• 不同点
  • 页面全部刷新导致了用户的体验较差。
  • 传统的请求导致用户的体验有空白期。（用户的体验是不连贯的）
  • 而Ajax是异步请求，所以不需要重新加载整个界面，实现局部的更新。并在页面更新的时候，页面不会阻塞，可以执行后面的内容，等请求到数据之后，再更新页面的部分内容。使得用户体验好，并且减少了服务器的压力

3. Ajax常用于以下场景

• 提高用户体验：通过异步加载数据，可以在不刷新整个页面的情况下更新页面的部分内容，减少页面加载时间，提高用户体验。
• 动态加载数据：通过Ajax请求数据，可以动态地更新页面内容，实现一些交互效果，如搜索建议、下拉刷新等。
• 表单验证和提交：通过Ajax验证表单数据的合法性，并异步提交表单数据，避免页面重新加载。

4. 如何理解Ajax的异步？

Ajax的异步体现在它的请求方式上。在传统的方式中，当用户点击一个链接或提交一个表单时，浏览器会向服务器发送请求，并等待服务器返回响应后才更新页面。这种方式需要重新加载整个页面，用户需要等待一段时间才能看到更新后的页面。 而在Ajax中，通过JavaScript异步向服务器请求数据，并在==数据返回后更新页面的部分内容==，不需要重新加载整个页面，可以实现局部更新。这种异步请求方式可以使用户更快地看到更新后的内容，并提高用户体验。 具体来说，Ajax通过XMLHttpRequest对象来实现异步请求。当浏览器发送Ajax请求时，==页面不会被阻塞，可以继续执行后续代码==。当服务器返回数据后，浏览器会通过==回调函数来处理响应数据==，并==更新页面的部分内容==。这种方式可以==实现异步更新==，提高页面的响应速度和用户体验。 总之，Ajax的异步请求方式与传统的方式相比，可以实现更快的页面更新和更好的用户体验，是一种更加高效的前端开发方式。

5. Ajax优缺点

• Ajax的优点：
  1. 提高用户体验：Ajax能够在不刷新整个页面的情况下，异步加载和更新部分页面内容，用户无需等待整个页面的刷新，可以更快地获取到所需的数据，提高了用户体验。
  2. 减轻服务器负担：通过Ajax的异步请求方式，可以减轻服务器的负担，提高服务器的响应速度和并发处理能力。
  3. 提高页面响应速度：Ajax能够异步地获取和更新部分页面内容，避免了整个页面的重载，提高了页面响应速度。
  4. 减少网络流量：通过Ajax的异步请求方式，可以只获取和更新需要的部分数据，减少了网络流量和数据传输时间。
• Ajax的缺点：

1. 对搜索引擎不友好：Ajax的异步请求方式无法被搜索引擎爬取，会影响网站的SEO优化。
2. 安全性问题：由于Ajax能够在不刷新整个页面的情况下，异步加载和更新部分页面内容，可能存在安全性问题，如跨站脚本攻击（XSS）和跨站请求伪造（CSRF）等。
3. 对JavaScript支持不好的浏览器不友好：某些低版本或不支持JavaScript的浏览器无法使用Ajax技术。
4. 开发复杂度高：相比于传统的页面请求方式，使用Ajax技术需要编写大量的JavaScript代码，开发复杂度相对较高。
5. ajax不支持浏览器back按钮。
6. 安全问题 AJAX暴露了与服务器交互的细节。
7. 破坏了程序的异常机制。
8. 不容易调试。

6. AJAX最大的特点是什么。

Ajax最大的特点是可以在不刷新整个页面的情况下，异步加载和更新部分页面内容。传统的页面请求方式需要整个页面刷新才能获取和更新页面内容，而Ajax能够通过异步请求的方式，在后台与服务器进行数据交互，从而使页面的更新变得更加灵活和快速，提高了用户体验和页面响应速度。 通过Ajax的异步请求方式，可以实现数据的实时更新和局部刷新，避免了页面整体刷新的过程，减少了不必要的网络流量和数据传输时间。这使得Ajax能够广泛应用于Web应用程序和移动应用程序的开发中，成为Web 2.0时代的重要技术之一。

7. 关于Ajax的真实应用

当涉及到与后台服务器进行数据交互的场景时，Ajax 可以是一个非常有用的工具。以下是一些可能需要使用 Ajax 的常见场景：

• 动态加载数据：通过 Ajax，可以从后台服务器异步地获取数据，而不需要刷新整个页面。这使得应用程序更快，响应更迅速。
• 表单提交：Ajax 可以在不刷新整个页面的情况下，异步地将表单数据发送到后台服务器。
• 实时搜索：可以使用 Ajax 实现实时搜索功能，用户输入关键词时，可以向后台服务器发送请求，并根据响应结果异步更新搜索结果。
• 图片上传：使用 Ajax，可以异步地将图像上传到后台服务器，并在上传完成后获取响应。
• 聊天应用程序：聊天应用程序需要实时的数据交互和通信。Ajax 可以用于实现这些实时的数据交互，例如轮询服务器以获取新消息。
• 数据可视化：通过 Ajax，可以异步地从后台服务器获取数据，并将其用于数据可视化，例如使用 D3.js 或 Highcharts.js 这样的库。
• 多语言支持：可以使用 Ajax 请求获取不同语言版本的文本资源，并在应用程序中动态地加载这些文本资源。 总之，Ajax 可以用于任何需要在后台服务器和前端之间进行数据交换的场景。

XHR进行原生AJAX请求的发送