面向小白编程：初识 Ajax

随着科技的迅速发展，Web开发领域正经历着前所未有的变革和创新。为了满足用户对更丰富、更动态在线体验的需求，Ajax技术成为开发中不可或缺的元素，学习和掌握这门技术，对开发者来说至关重要。

本文将带领小白了解 Ajax 的起源、发展，并介绍如何使用 JavaScript 进行 Ajax 开发。

一、什么是 Ajax

Ajax 的起源可以追溯到2005年，当时Web应用程序的开发方式主要是采用同步的模式。每当用户与网页进行交互时，整个页面都需要重新加载，这导致用户体验不佳，因为页面刷新需要时间，而且用户需要等待。

在这样的背景下，为了改善用户体验，开发者们开始寻找一种新的方式，使得网页能够在用户与服务器交互时，不必刷新整个页面，而只更新部分内容。这就催生了Ajax技术。

Ajax的名字在2005年提出，它代表"Asynchronous JavaScript and XML"（异步JavaScript和XML）。关键词中的"Asynchronous"表明Ajax的重要特性之一，即它可以在后台异步地与服务器通信，而不会阻塞用户对网页的操作。这使得Web应用程序能够更加迅速地响应用户的输入，提高了用户体验。

Ajax的真正突破在于它利用JavaScript发起异步HTTP请求，并使用XML作为数据的传输格式。这种异步通信的方式使得页面可以在后台与服务器交换数据，而不需要刷新整个页面。这为实现更加动态、实时的Web应用奠定了基础。

通过Ajax，开发者们可以在不中断用户操作的情况下，从服务器获取数据并将其展示在页面上。这种技术的引入改变了Web开发的传统方式，为现代Web应用的发展提供了强大的支持。随着时间的推移，Ajax逐渐成为前端开发的重要技术之一，为用户带来了更加流畅和响应式的Web体验。

举个栗子🌰：

我们在网页搜索时会实时提示，这其中就使用了Ajax技术。

二、Ajax的发展

1. 异步请求的崭露头角

Ajax的最初形态可以追溯到2005年。在这个时期，网页应用的主要交互方式是同步的，用户与服务器的交互通常需要整个页面的刷新。异步请求的概念首次被引入，使得页面可以在后台与服务器进行通信，无需中断用户的操作。这一变革使得Web应用变得更加动态，用户体验也得到了显著提升。

2. XMLHttpRequest的崛起

为了实现异步请求，JS引入了XMLHttpRequest对象，这是Ajax的基石。通过XMLHttpRequest，开发者可以在不刷新整个页面的情况下向服务器发送请求，并在请求完成后处理服务器返回的数据。这一技术的崛起为Web开发带来了巨大的改变，使得页面能够实现更细粒度的数据更新。

3. 数据交互的多样化

随着时间的推移，开发者们逐渐意识到，并非所有的数据交互都需要使用XML。因此，Ajax技术逐渐演变为支持多种数据格式，包括JSON等。这使得数据的交互更加灵活，同时也减少了数据传输的负担。

4. 框架和库的兴起

为了简化Ajax的使用，许多JS框架和库应运而生。其中，jQuery是最为知名的一个，它抽象了XMLHttpRequest等底层操作，提供了更简单、更一致的API，使得开发者能够更轻松地使用Ajax技术。

5. 现代Web开发的全面崛起

随着前端技术的发展，Ajax逐渐融入到了现代Web开发的方方面面。前端框架（如React、Angular、Vue.js）的出现进一步简化了数据管理和交互，使得Ajax成为构建SPA（Single Page Application）等现代应用的关键组成部分。同时，新兴的Web API技术（如Fetch API）也为Ajax提供了更强大、更现代的替代方案。

6. 实时性和WebSocket的整合

随着对实时性需求的增加，Ajax技术与WebSocket等新兴技术的整合成为一个趋势。WebSocket能够提供更低延迟的双向通信，使得实时性要求更高的应用得以实现。

总体而言，Ajax的发展经历了从异步请求的初始阶段到如今成为现代Web开发不可或缺的技术的演变。它不仅改变了用户与网页交互的方式，也推动了整个Web开发行业向着更灵活、更动态的方向发展。随着新技术的不断涌现，我们可以期待Ajax在未来的Web开发中发挥更加重要的作用。

三、如何使用 Ajax

1. 原生 JS 实现 Ajax 请求

首先我们需要创建一个XMLHttpRequest对象：

js 复制代码

var xhr = new XMLHttpRequest();

然后使用该对象发起HTTP请求：

js 复制代码

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};
xhr.open("GET", "text.json", true);
xhr.send();

这里我们在同级目录下创建一个text.json文件来模拟要请求的数据。

json 复制代码

{
    "data":"Ajax is so easy!"
}

这样我们打开网页控制台就能看到数据了：

接下来我们逐行解释一下每行代码分别干了什么：

var xhr = new XMLHttpRequest();:创建一个名为 xhr 的新XMLHttpRequest对象。这个对象用于在浏览器和服务器之间进行HTTP通信。
xhr.onreadystatechange = function() { ... };:设置一个回调函数，当xhr对象的状态发生变化时，这个函数将被触发。
if (xhr.readyState == 4 && xhr.status == 200) { ... }:在回调函数内，检查xhr对象的readyState（就绪状态）和status（HTTP状态码）属性，以确定请求是否已经完成且成功。readyState 为4表示请求已完成，status为200表示请求成功。

各状态可参照下表：

ajax状态码	状态
0	`xhr`刚刚创建，没有调用 `open()`
1	已经调用 `open()`，但尚未调用 `send()`
2	`send()` 方法已经被调用，接收到头响应头
3	接收到部分响应体数据
4	请求完成，接收到全部响应体数据

http状态码	类型	状态
1xx	信息	服务器收到请求，需要请求者继续执行操作
2xx	成功	操作被成功接收并处理
3xx	重定向	需要进一步的操作以完成请求
4xx	客户端错误	请求包含语法错误或无法完成请求
5xx	服务器错误	服务器在处理请求的过程中发生了错误

console.log(xhr.responseText);:在控制台打印响应内容。
xhr.open("GET", "text.json", true);:使用open方法初始化请求。第一个参数是HTTP请求的方法，第二个参数是要请求的URL，第三个参数表示请求是否异步（true表示异步，false表示同步）。
xhr.send();:发送HTTP请求。如果是GET请求，可以将参数设置为null。如果是POST请求，可以在这里传递请求的数据。这一步实际上启动了整个HTTP请求过程，将请求发送到服务器。

至此，原生 JS 实现 Ajax 请求已完成。

2. 使用 Fetch API 实现

Fetch API是一种现代化的替代XMLHttpRequest的方法，它使用Promise对象提供更简洁的语法。

js 复制代码

fetch("text.json")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

在控制台中查看数据：

解释一下：

fetch("text.json")：使用fetch函数向指定的URL发起GET请求。fetch返回一个Promise，该Promise在HTTP响应可用时解析为Response对象。
.then(response => response.json())：使用Promise的.then方法，该方法接fetch返回的Promise，即Response对象。通过response.json()将Response对象解析为JSON格式，返回一个新的Promise。
.then(data => { console.log(data); })：又使用了.then方法，接收response.json()返回的Promise，即解析后的JSON数据。然后在控制台中打印。
.catch(error => { console.error(error); })：使用.catch方法，用于捕捉报错。

至此，使用 Fetch API 实现 Ajax 完成。

3. 利用第三方库

除了原生JavaScript和Fetch API，还可以使用第三方库简化Ajax的开发。例如，使用jQuery：

首先我们要导入jQuery库：

我们来到一个国内的 jQuery 镜像网站 jquery (v3.7.1) - jQuery，这个是我目前一直在用的，因为他是开源免费的，所以分享给大家，然后我们在下方直接选择复制script标签，粘贴到我们的html中。

html 复制代码

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

需要注意的是：库的引入要写在请求代码的前面，因为我们只有先引入了才能使用。

直接使用 jQuery 已经封装好了的语句进行 Ajax 请求：

js 复制代码

$.ajax({
    url: "text.json",
    method: "GET",
    success: function(data) {
        console.log(data);
    },
    error: function(error) {
        console.error(error);
    }
});

在控制台中查看数据：

解释一下：

$.ajax({ ... });：$是jQuery封装好了的语句，直接使用就行，可以参考官方文档。调用jQuery的ajax函数，该函数用于执行异步HTTP（Ajax）请求。
url: "text.json",method: "GET",：指定请求的URL和请求方法"GET"。
success: function(data) { ... },：这个回调用于处理请求成功的数据data。
error: function(error) { ... }：这个回调用于处理错误信息error。

至此，利用第三方库 jQuery 实现 Ajax 请求已完成。

结语

通过本文的介绍，你现在应该对Ajax有了基本的了解，包括它的来源、发展以及原生 JS、Fetch API、以及第三方库三种实现的方式。如果对这些你还有疑惑可以参考官方文档，或者在评论区留言！

最后

学习之路是一段充满挑战和发现的旅程，加油！

已将学习代码上传至 github，欢迎大家学习指正！

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 "点赞收藏+关注" ，感谢支持！！