《从零到全栈：AJAX基础概念》

一、AJAX 基础概念

        AJAX，全称为 Asynchronous JavaScript and XML，它是一项极具创新性的技术，能借助异步 JavaScript 达成数据在前后端之间的交互，彻底革新了网页的交互模式。

其核心特性意义重大：

• 异步请求，局部刷新页面：传统网页交互往往是整页刷新，这不仅耗时，还会打断用户操作流程。而 AJAX 实现异步请求后，仅更新页面中需要变动的部分，大大提升了交互的流畅性与效率，用户无需长时间等待整个页面重新加载，就能即时看到最新信息。

• 支持本地 / 远程数据读取：这给予开发者极大便利，无论是本地存储的数据，还是远程服务器端的数据，都能轻松获取并加以利用，拓展了网页的数据来源渠道，让网页内容可以更加丰富多彩、实时更新。

• 快速开发动态网页：有了 AJAX，开发者无需像过去那样编写大量复杂代码来处理页面刷新与数据交互，能够将精力聚焦于核心业务逻辑，短时间内就能搭建出功能强大、交互性佳的动态网页。

1.1 同源策略

        这是浏览器安全的重要防线，规定了只有当请求的三要素，也就是协议、域名、端口完全一致时，才允许进行数据交互。例如，Example Domain 与 Example Domain，看似相似，实则由于协议（一个是 http，一个是 https）和端口（80 与 443）不同，属于不同源。这一策略有效防止了恶意网站跨站窃取数据等安全问题。

1.2 跨域

        与之相对，只要请求中的协议、域名、端口任一要素存在差异，就构成跨域情况。不过，为了满足合理的跨域数据交互需求，也有相应解决方案，其中后端设置 CORS（跨域资源共享）较为常用，它能让服务器灵活配置哪些外部域名可以访问自身资源，在保障安全的同时实现跨域数据流通。

---

二、AJAX 实现方式

2.1 原生 JavaScript

var xhr = new XMLHttpRequest();
xhr.open('GET', './api/data.json', true);
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status === 200) {
        const data = JSON.parse(xhr.responseText); 
        console.log(data);
    }
};

        这里首先创建了一个 XMLHttpRequest 对象，它是原生 AJAX 操作的核心。open 方法用于初始化一个请求，指定请求方法（如这里的 GET）、请求 URL（./api/data.json）以及是否异步（true 表示异步）。send