本文最后更新于 209 天前，其中的信息可能已经有所发展或是发生改变,如有失效可到评论区留言。

Contents

前言

前段时间一直在看浏览器同源策略限制引出的如何解决Ajax跨域问题相关的知识点，不过在想怎么写篇文章把相关知识点记录下来的时候，却发现很难用一般人容易理解的角度讲清楚，甚至连举例都不好举。回头想想，这也正常，一般人访问网站不太容易直接遇到跨域的问题，而网上讲跨域问题的文章基本都是前端写的～～。

那么什么是浏览器同源策略？什么又是Ajax？为何同源策略会引出Ajax跨域访问的问题？为什么都是前端遇到跨域问题？进一步思考，为什么以及从什么时候开始有前端和后端之分呢？。。。顺着这条思路，一直捋，发现上面这些问题和Ajax都有很大的关系，所以这篇文章，我尝试用非程序员的角度(毕竟我不懂代码，也没有程序员的角度～)，来把”Ajax”、”同源策略”、”跨域”这几个概念之间的关系进行梳理，好有挑战性啊。

Ajax的前世今生

Ajax普及之前的web网页

在 Ajax 普及之前，Web 页面通常是以传统的同步请求方式工作的，这意味着用户与服务器进行交互时，整个页面都需要进行重新加载。那个时期，网页基本是通过链接或表单提交来获取新的数据或刷新内容的：当用户点击链接或提交表单时，浏览器会向服务器发送一个请求，并等待服务器响应，然后用新的内容替换整个页面。

这种同步请求的方式存在一些明显的缺点，例如用户体验较差、加载时间长等。另外，这种方式也限制了开发人员在网页中实现更加动态和交互性的功能。

在那个时候，网页通常采用静态内容和少量的 JavaScript 来实现简单的交互效果，如验证表单、弹出警告框等，整个页面的内容由服务器动态生成，用户与服务器的交互主要基于页面的完全刷新。

另：还记得很多年前上网，访问网页一有问题就狂按”F5″键刷新吗？就是因为需要页面完全刷新才能看到网页内容的改变。

以下内容一般人可以忽略，只是我觉得有必要记录的内容。

从技术角度来讲，Ajax普及之前，实现动态网页功能的方法主要有以下几种：

完全页面刷新 (Full Page Reload)

最传统的方法是每次需要更新页面内容时，整个页面都会重新加载。这种方法虽然简单，但效率低下，用户体验不好。每次交互都需要整个页面重新加载，导致加载时间长，服务器压力大。

框架 (Frames)

使用 HTML 的 <frame> 和 <iframe> 标签，可以将一个网页划分为多个独立的部分（帧）。每个帧可以独立加载和更新内容。虽然这种方法可以避免整个页面的刷新，但框架管理复杂，并且在现代网页设计中已经不再流行。

内嵌脚本 (Embedded Scripts)

使用嵌入在 HTML 页面中的脚本来动态更新页面内容。例如，JavaScript 可以直接修改 DOM 元素的内容。这种方法适用于一些简单的动态更新，但无法进行复杂的数据交互或与服务器通信。

表单提交和隐藏框架 (Form Submission with Hidden Frames)

通过将表单的目标设为一个隐藏的 <iframe>，可以在后台提交表单并处理响应，而不必刷新整个页面。这种方法在一定程度上实现了异步通信，但使用起来比较繁琐，不如 AJAX 方便。

服务器端技术 (Server-Side Techniques)

使用 CGI（Common Gateway Interface）和其他服务器端脚本（如 Perl、PHP、ASP）来生成动态网页内容，虽然可以生成动态内容，但每次交互仍需要刷新页面。

JavaScript 和 Cookies

通过 JavaScript 操作 cookies，可以在客户端存储一些数据，实现有限的动态功能。比如，可以根据用户的选择改变页面的部分内容。然而，这种方法也非常有限，不能进行复杂的数据交互。

服务器推送 (Server Push) 和长轮询 (Long Polling)

这些技术允许服务器向客户端推送更新数据，但实现起来较为复杂。例如，长轮询是一种通过保持 HTTP 请求打开直到服务器有数据可发送的方法，但这种方法会对服务器资源造成压力。

什么是Ajax？

说了半天了，Ajax到底是啥呢？

Ajax(Asynchronous JavaScript and XML，翻译为异步JavaScript和XML)，是一种用于在 Web 应用程序中进行异步请求及数据交互的技术：””它允许在不重新加载整个页面的情况下，与服务器进行数据交换和更新部分页面内容，Ajax 技术通过在后台与服务器进行数据交互，使得网页能够实现更高级的交互和动态效果。“”，这对当时还主要以同步方式展现页面内容，动态内容还需要靠完全页面刷新的传统网页来说，简直是原地起飞般的改变(当然，从出现到流行，还是经过了7,8年时间)，其核心原理包括利用 JavaScript 发起异步请求（通常使用 XMLHttpRequest 对象），与服务器进行数据交互，并在后台处理响应结果。这种方式使得页面可以在后台与服务器进行数据交互，而不需要刷新整个页面。同时，Ajax 支持在请求和响应中使用 XML 或 JSON 格式的数据，使得数据的传输更加灵活和高效。

提问：JavaScript和Java之间有什么关系？
回答：其实没啥关系，就是两种不同的语言，非要硬扯上关系的话，就是核心编程概念和语法上有一些相似，不过最主要的原因是为了蹭Java的热度，因为那个时候Java很流行，所以叫JavaScript(最初叫Mocha，后来叫LiveScript，最后才决定改名为JavaScript)。

Ajax的诞生

1996 年，Microsoft 在 Internet Explorer 3 中引入了 iframe，允许网页在后台进行数据通信而无需刷新页面。1999 年，Microsoft 在 Internet Explorer 5 中引入了 ActiveX 对象 XMLHTTP，这是现代 AJAX 技术的前身。XMLHTTP 对象允许浏览器在后台发送和接收 XML 数据。

随着 XMLHTTP 的引入，其他浏览器厂商（如 Mozilla Firefox 和 Safari）也开始支持类似的功能，并最终发展成为标准的 XMLHttpRequest 对象。这为 AJAX 技术的普及奠定了基础。

2005 年 2 月，Jesse James Garrett 发表了一篇名为《AJAX: A New Approach to Web Applications》的文章，首次提出了 AJAX 的概念并命名为 AJAX。

注：AJAX 并不是单一的技术，而是几种技术的组合：

JavaScript：用于创建异步请求和处理响应数据。
XMLHttpRequest：用于在后台与服务器进行通信。
HTML/CSS：用于页面的结构和样式。
XML/JSON：用于数据的传输和处理。虽然名称中有 XML，但 JSON 更常用，因为它更轻量级且易于解析。

Ajax普及后带来的变化

Ajax 技术的出现极大地改变了 Web 应用程序的开发方式，为用户提供了更好的体验，同时也推动了前端开发中更多复杂交互和动态效果的出现，可以归纳为以下几点：

用户体验的提升

即时更新：用户可以在不重新加载整个页面的情况下，动态获取和更新数据。例如，表单提交后可以即时显示结果，而不需要刷新页面。
流畅的交互：通过异步请求，用户操作和页面响应更加流畅，减少了等待时间和页面重新加载带来的不便。

单页应用（SPA）

SPA发展：单页应用（Single Page Application，就是一个HTML页面）的概念变得流行，应用在加载后不需要再进行页面刷新，所有的交互和数据加载都通过AJAX完成。框架如Angular、React和Vue.js等促进了SPA的广泛应用。
模块化加载：页面可以根据需要动态加载模块和组件，而不是一次性加载所有内容，提高了应用的加载速度和性能。

前后端分离

职责分离：AJAX推动了前端和后端的分离。前端负责用户界面和交互，后端通过API提供数据服务，这种分离使得开发流程更加高效。
API驱动开发：RESTful API和GraphQL等技术的普及，使得前端可以通过标准化的接口与后端进行通信，增强了开发的灵活性和可维护性。

Web应用的复杂化和功能增强

实时更新：例如，社交媒体平台可以即时显示新内容，电子商务网站可以动态更新购物车和库存信息。
交互式体验：增强了用户与应用之间的互动，如自动完成、即时验证、实时搜索建议等功能。

注1：前面我们提到很多年前访问网页有问题就狂按”F5″刷新吗？虽然现在”F5″也仍然常用，但是本质上的用处已经和以前不一样：在 AJAX 普及之前，用户频繁使用 F5 键刷新页面，通常是为了确保页面加载了最新的数据或者重新触发某些操作，由于页面的所有内容都需要重新加载，这种方式效率低且用户体验差；而在AJAX普及之后，由于AJAX 允许在不刷新整个页面的情况下进行异步数据请求，所以显著提升了用户体验：用户不再需要频繁使用 F5 键来刷新页面内容，因为部分内容可以通过 AJAX 动态更新。但浏览器缓存机制仍然会导致有时需要使用 F5 键强制刷新页面，以确保加载最新的资源（如 CSS、JavaScript 文件或页面内容)。

注2：在Ajax还没普及的时候，前后端是没有分开的：前端开发者会编写好 HTML 和 CSS 结构，然后将这些 HTML 文件交给后端开发者；后端开发者利用服务器端技术(CGI和其他服务器端脚本，如 Perl、PHP、ASP)，从数据库中查询数据，并将这些数据填入页面中；最后，后端将填好数据的页面直接返回给浏览器，这意味着浏览器接收到的是已经填好数据的 HTML 页面，这种方式被称为服务端渲染（Server-Side Rendering, SSR）。

前端、后端以及Ajax

上一节中我们提到了Ajax推动了前端和后端的分离，那么，前端和后端分别是什么呢？为什么Ajax会推动前端和后端的分离呢？本节就一一来解释。

什么是前端？

前端是你在使用网站或应用时所看到和直接互动的部分。简单来说，前端就是用户界面，包括网页上的文字、图片、按钮、表单等。

举个例子：你打开一个购物网站，看到的商品列表、搜索栏、购物车按钮等，都是前端的一部分。前端开发者的工作是让这些东西看起来漂亮、易用，并能响应你的操作，比如点击按钮、输入文字等。

一句话总结：前端负责展示和用户交互：它让网页好看，按钮可点击，表单可填写。

什么是后端？

后端是网站背后的部分，它负责处理你看不到的东西，比如数据存储和业务逻辑。

继续刚才的例子：当你在购物网站上点击一个商品加入购物车时，前端会把你的操作传给后端。后端会处理这个请求，比如把商品信息保存到数据库中的你的购物车记录里，然后返回一个确认信息给前端。

一句话总结：后端负责处理数据和逻辑：它接收前端的请求，处理数据，比如保存到数据库或者从数据库中取出数据，然后把结果返回给前端

Ajax的实际作用

还是刚才的例子：在购物网站上，当你搜索商品时，通常你不会看到页面刷新。相反，搜索结果会在不重新加载整个页面的情况下显示出来。这就是AJAX在起作用。前端通过AJAX向后端发送一个搜索请求，后端处理后返回搜索结果，前端再把这些结果动态显示出来。

一句话总结：AJAX是前端和后端沟通的桥梁：它让前端可以在不刷新整个页面的情况下，向后端请求数据或者提交数据，从而提高了用户体验。

Ajax的普及加快了前后端分离的进程

前后端分离的原因很多，但是其中一个很重要的原因就是Ajax的普及为前后端分离奠定了技术基础，并在很大程度上推动了前后端分离的实现，表现在如下几个方面。

异步数据加载
传统服务器端渲染：

传统的服务器端渲染（SSR）中，每次用户操作或页面刷新都需要服务器生成完整的HTML页面，并将其发送到客户端。这种方式效率较低，用户体验不好。
AJAX的引入：

AJAX允许前端在不刷新整个页面的情况下与服务器进行通信，加载或发送数据。这种异步通信方式极大地提升了用户体验，使得网页可以更快地响应用户操作。

单页应用（SPA）的实现
单页应用（SPA）：

SPA是一种仅在首次加载时请求HTML、CSS、JavaScript等资源的应用，之后的所有页面更新都通过AJAX请求来实现。SPA在前端通过JavaScript框架（如React、Vue、Angular）来管理视图和状态。
AJAX的作用：

AJAX在SPA中起到了关键作用，前端通过AJAX请求从服务器获取数据，并动态更新页面，而不需要重新加载整个页面。这种方式不仅提升了用户体验，也减少了服务器负载。

清晰的接口设计
前后端接口：

前后端分离要求前后端通过清晰的API接口进行通信。前端通过AJAX请求调用后端提供的API，获取数据并更新视图。
AJAX的支持：

AJAX使得前端可以方便地调用后端API，获取所需的数据并处理这些数据，确保前后端之间的通信高效且灵活。

开发模式的转变
并行开发：

前后端分离允许前端和后端团队并行开发，减少相互依赖和阻塞。前端开发人员可以使用AJAX从Mock服务器获取模拟数据进行开发，而不需要等待后端API完成。
AJAX的普及：

AJAX技术的普及使得前端可以独立于后端进行开发和调试，极大地提高了开发效率。

性能优化
异步加载：

AJAX可以用于按需加载数据，减少初始页面加载时间，提高性能。用户只在需要时加载额外的数据，而不是在页面加载时一次性获取所有数据。
数据更新：

前端通过AJAX可以实现局部页面更新，而不是每次都重新加载整个页面，减少了网络流量，提高了响应速度。

更好的用户体验
动态交互：

AJAX使得网页可以实现更加动态和丰富的交互效果。例如，表单验证可以在用户输入时实时进行，而不需要提交表单后再显示错误信息。
数据刷新：

通过AJAX，网页可以在后台自动刷新数据，而不需要用户手动刷新页面。这种方式在实时应用（如聊天应用、股票行情等）中尤为重要。

浏览器同源策略限制

文章开篇提到了Ajax跨域问题是浏览器同源策略引发的，要解决那我们先要理清什么是同源策略以及为什么需要同源策略。

什么是同源策略？

同源策略是浏览器用来保护用户隐私和安全的一种规则。它规定，一个网站上的内容不能随便访问另一个网站上的内容，除非这两个网站“同源”。这里的“同源”可以理解为它们来自同一个地方（即相同的协议、域名和端口，重要：必须3者完全相同）。

为什么需要同源策略？

同源策略就像是给每个网站设置了一道安全门，让每个网站的内容和数据都只能由它自己控制和访问。这样，即使你同时打开了多个网站，它们之间的信息也不会互相泄露或被滥用，这大大增加了你的网上安全，让你可以更放心地使用各种在线服务。
举例说明：

防止恶意操作：如果没有同源策略，一个你不信任的网站可能会利用你在另一个网站上的登录状态，偷偷进行一些操作，比如在你的社交媒体账户上发帖，或者在你的购物网站上购买东西，或者在你的银行网站上转账，这就像有人在你不知道的情况下，用你的信用卡去购物一样可怕。
防止数据泄露：同源策略还确保你在一个网站上填写的表单内容，其他网站是看不到的。这就像你在一个封闭的房间里谈论私事，其他房间里的人无法听见，这样你的隐私得到了保护。

同源政策引起的跨域问题

同源策略限制了浏览器在不同域名、不同端口或不同协议之间直接交互，这种限制导致了跨域问题的发生。以下通过几个具体的例子来说明为什么同源策略会引发跨域问题：

1. 示例：从一个域名访问另一个域名的数据

假设我们有两个网站：

网站 A：https://www.tangwudi.com
网站 B：https://blog.tangwudi.com

在网站 A 的前端 JavaScript 中，如果尝试通过 AJAX 请求直接访问网站 B 的数据，例如：

fetch('http://blog.tangwudi.com/data') 
.then(response => response.json()) 
.then(data => console.log(data)) 
.catch(error => console.error('Error:', error));

浏览器会阻止这个请求，因为它们的域名不同( www.tangwudi.com 和blog.tangwudi.com)，违反了同源策略，这是因为同源策略要求域名必须完全一致，包括协议（https://）、域名（example.com）和端口（如果有的话）。

2. 示例：使用不同的端口访问同一域名的数据

假设我们有同一个网站，但是在不同的端口上：

网站 A：https://www.tangwudi.com
网站 B：https://www.tangwudi.com:8080

如果网站 A 在前端尝试通过 AJAX 请求访问网站 B 的数据，例如：

fetch('https://www.tangwudi.com:8080/data')   
.then(response => response.json())   
.then(data => console.log(data))   
.catch(error => console.error('Error:', error));

同样，浏览器也会阻止这个请求，因为虽然它们的域名和协议相同，但端口不同。同样的，”http://www.tangwudi.com”和”https://www.tangwudi.com:8080″同样违反了同源策略。

3. 示例：使用不同的协议访问同一域名的数据

假设我们有同一个网站，但是在不同的协议上：

网站 A：https://www.tangwudi.com
网站 B：http://www.tangwudi.com

如果网站 A 在前端尝试通过 AJAX 请求访问网站 B 的数据，例如：

fetch('http://www.tangwudi.com/data') 
.then(response => response.json()) 
.then(data => console.log(data)) 
.catch(error => console.error('Error:', error));

同样，浏览器会阻止这个请求，因为虽然它们的域名相同，但协议不同（https 和 http），同源策略也禁止这种跨协议的请求。

Ajax跨域访问解决办法

为什么有跨域的需求？

是因为实际开发中的需求，很多时候需要请求与当前网页不在同一个域的资源，具体原因可能包括：

微服务架构：现代Web应用往往采用微服务架构，不同的服务部署在不同的域名或子域名下。前端应用需要跨域访问这些服务。

CDN资源加载：为了加速资源加载，静态资源（如图片、脚本、样式表）通常托管在内容分发网络（CDN）上，这些资源的域名与主站点不同。

第三方API调用：前端应用可能需要调用第三方提供的API服务，这些API服务器通常位于不同的域名下。

分离开发环境：开发和测试环境可能与生产环境有不同的域名。开发过程中，前端应用需要跨域访问后端服务。

Ajax跨域访问的方式

常见的解决Ajax跨域访问的方法有以下几种。

1. JSONP (JSON with Padding)

JSONP是一种早期解决跨域问题的方法，通过动态创建<script>标签来请求跨域的资源，因为<script>标签不受同源策略的限制。

示例：
假设你有一个跨域API http://tangwudi.com/data，你可以这样使用JSONP：

<script>
function handleResponse(data) {
    console.log(data);
}

var script = document.createElement('script');
script.src = 'http://tangwudi.com/data?callback=handleResponse';
document.body.appendChild(script);
</script>

在这种情况下，服务器需要将响应包装在回调函数中，例如：

handleResponse({ "message": "Hello, World!" });

注：JSONP适用于只支持GET请求的简单跨域情况

CORS是现代浏览器支持的一种机制，它允许服务器通过设置HTTP头来告知浏览器允许跨域请求。

示例：
在服务器端（假设使用Node.js和Express）：

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*'); // 允许所有域名访问
    res.header('Access-Control-Allow-Methods', 'GET,POST');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

app.get('/data', (req, res) => {
    res.json({ message: "Hello, World!" });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

在客户端（浏览器端），你可以直接用AJAX请求：

fetch('http://localhost:3000/data')
    .then(response => response.json())
    .then(data => console.log(data));

注：CORS是现代浏览器推荐的方法，在前端跨域访问后端的场景中，需要在后端服务器上进行设置。

3. 反向代理服务器

通过在同源服务器上设置一个代理，把请求转发到目标服务器，避免直接跨域请求。

示例：
假设你的前端服务器是http://localhost:3000，API服务器是http://tangwudi.com。

在前端服务器设置一个代理，将访问http://localhost:3000/api的请求，反代到http://tangwudi.com上（例如使用Node.js和http-proxy-middleware）：

const { createProxyMiddleware } = require('http-proxy-middleware');
const express = require('express');
const app = express();

app.use('/api', createProxyMiddleware({ target: 'http://tangwudi.com', changeOrigin: true }));

app.listen(3000, () => {
    console.log('Frontend server running on port 3000');
});

然后在客户端如下操作：

fetch('http://localhost:3000/api/data')
    .then(response => response.json())
    .then(data => console.log(data));

注：上诉3种方式主要是针对AJax跨域问题的解决方法，其实，一般的跨域访问还可以使用html中的几种标签中的src属性来跨域资源共享。例如：
<script> 标签可以用来跨域加载JavaScript文件

<script src="https://example.com/some-script.js"></script>

<img> 标签可以用来跨域加载图片资源

<img src="https://example.com/image.png" alt="Example Image">

<link> 标签可以用来跨域加载CSS样式表

<link rel="stylesheet" href="https://example.com/styles.css">

<iframe>标签可以用来嵌入跨域的网页内容

<iframe src="https://example.com"></iframe>

<audio> 和 <video> 标签可以用来跨域加载音频和视频文件

<audio controls>
  <source src="https://example.com/audio.mp3" type="audio/mpeg">
</audio>

<video controls>
  <source src="https://example.com/video.mp4" type="video/mp4">
</video>

跨域和一般人有关吗？

跨域对一般人来说是很难接触到的概念，因为这都是应用开发过程中需要解决的问题，等应用开发、测试完成并对公众开放的，是已经解决了跨域问题的一个统一的UI，而这个UI上的所有内容和功能正常情况下肯定是同一个域的(当然不排除少数特殊情况，不过那种情况即便是报错也是在浏览器的开发者控制台报错，一般人不会主动去打开开发者工具，所以也还是看不到)。

不过，虽然普通用户一般不会直接看到跨域问题，但在某些情况下，用户可能会遇到一些由跨域问题引起的报错或异常行为，比如，下面的一些可能的情况就是跨域问题引起的：

数据未能加载

表现：页面上某些数据无法显示，如产品列表、评论、新闻内容等空白或没有更新。
原因：AJAX请求由于跨域问题被阻止，导致数据无法从服务器加载。

功能异常

表现：某些功能无法正常使用，如搜索、提交表单、点赞等操作无反应。
原因：这些操作通常需要与服务器通信，跨域问题可能导致请求被阻止，从而功能无法执行。

控制台报错

表现：用户打开浏览器的开发者工具（虽然普通用户不常做）时，可能会看到跨域相关的错误信息，如 Access-Control-Allow-Origin 错误。
原因：跨域请求被浏览器的同源策略阻止，控制台中会显示详细的错误信息。

静态资源加载失败

表现：页面样式错乱、图片无法显示、JavaScript功能失效等。
原因：如果静态资源（如CSS、图片、脚本）由于跨域问题未能正确加载，页面可能无法正常渲染。

当下Ajax的现状

本文是以Ajax技术为核心来关联其他概念，而在现实中，Ajax虽然仍然是一种重要的技术，但它的使用方式和角色已经随着前端开发的进步发生了变化。

AJAX 的核心作用未变

AJAX 的核心概念——异步数据请求和页面部分更新——仍然是现代前端开发的基石。无论是通过原生的 XMLHttpRequest 还是通过 Fetch API，异步请求都是前端与服务器交互的主要方式。

现代替代方案和工具的崛起

虽然 AJAX 作为技术概念依然存在，但许多现代工具和框架提供了更高级的抽象和更便捷的使用方式：

Fetch API：现代浏览器的原生 API，提供了更简洁和更灵活的方式进行网络请求。它是对 XMLHttpRequest 的改进。

fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));

前端框架和库：React、Vue、Angular 等框架和库通常集成了数据请求的方法和工具，使得处理异步数据请求更加便捷。例如，React 中常用的 axios 库：

import axios from 'axios'; axios.get('https://api.example.com/data') .then(response => console.log(response.data)) .catch(error => console.error('Error:', error));

GraphQL：一种用于 API 的查询语言，允许客户端请求所需的精确数据，减少了传统 RESTful API 的冗余数据问题。Apollo Client 是 GraphQL 常用的客户端库。

单页应用（SPA）的普及

单页应用（SPA）框架，如 React、Vue、Angular，极大地改变了前端开发的方式。这些框架提供了更高级别的组件化开发和状态管理，使得 AJAX 调用成为其更大体系中的一部分。

SSR（服务器端渲染）和静态生成

Next.js（基于 React）和 Nuxt.js（基于 Vue）等框架支持服务器端渲染（SSR）和静态生成（SSG），它们在构建过程中预先获取数据，从而减少了客户端的 AJAX 调用需求。这些框架仍然可以在客户端渲染后进行 AJAX 调用，但其使用方式和目的与传统的 AJAX 调用有所不同。

进步的 Web 技术

随着 Web 技术的发展，Service Workers、WebSockets 等技术提供了更多的实时通信和离线功能。这些技术扩展了传统 AJAX 的能力，使前端开发者可以构建更加丰富和动态的应用。

结合现代开发工具链

现代开发工具链（如 Webpack、Babel 等）和开发模式（如模块化开发、微前端架构等）也影响了 AJAX 的使用方式。这些工具链和模式使得代码组织更好、性能优化更方便，同时也简化了数据请求和处理的复杂性。

后话

这篇文章好难写，需要不停的清理自己的思路，网上的资料基本都是程序员视角，示例只要发一段代码基本就解释清楚了。只是，很多对他们来说是常识性的、根本不需要提的基础概念，对一般人(或者是非程序员)来说却是一个个半懂不懂的词汇，越看越是云里雾里的～～，所以要想基本讲清楚，需要一个概念一个概念的梳理，好累，毕竟我也不是专业人员。

另外，虽然我已经尽量的在控制用代码来做示例(担心非IT专业的朋友看不懂)，但是有部分概念，的确用简单的代码一展示就胜过千言万语，可能还是我的知识积累太差，想不出更浅显易懂、言简意赅的解释，这个我只能通过往后不停的学习来弥补了。

那么，这篇文章写出来到底有什么用？想了半天，貌似真没什么用：程序员不用看，一般人看了也没啥用。。

不过对于我来说，以后想要涉及代码领域，这篇文章会是很好的一篇基础指南，让我有个大概的方向。

前言