再也不学 AJAX 了!(一)AJAX 概述

4,914 阅读6分钟

「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第一篇,最近更新于 2023 年 1 月。

0. 总纲

本系列文章将会分为以下三大部分介绍 AJAX 技术:

  1. AJAX 概述:主要回答「AJAX 是什么」以及「AJAX 技术的意义」这两个问题;
  2. 使用 AJAX:向开发者介绍通过浏览器提供的两个发送 AJAX 请求的 API:XMLHttpRequest 对象和 Fetch API;
  3. 跨域获取数据:介绍了与「跨域发送 AJAX 请求」相关的一些内容:例如「同源策略」与四种跨域请求资源的方式:JSONP,CORS,postMessage 和 WebSocket;

欢迎各位读者关注,并在评论区提问或讨论。

1. 什么是 AJAX?

AJAX 是「Asynchronous JavaScript And XML」 的缩写(即:异步的 JavaScript 和 XML),是一种通过不刷新页面获取服务器数据的混合技术

请各位读者停下来好好思考一下这个定义,注意那些加粗的文字,它们加粗是有原因的。

好的,相信您已经对这个定义有些印象了,现在让我对那些加粗的文字进行说明:

1.1 什么是 XML?

XML 是「Extensible Markup Language」的缩写(即:可拓展标记语言),是一种特征类似 HTML,用来描述数据是什么,并承载数据的标记语言,你可以在维基百科中看到更完整的解释,但我们现在只要知道它是一种用来承载数据的语言就足够了。

而我们如今耳熟能详的 JSON 则是另一种数据格式,在 JSON 发明之前,人们大量使用 XML 作为数据传输的载体,也正因如此,AJAX 技术的最后一个字母为「X」。如今情况已经发生了变化,JSON 这种类似于字符串对象的轻量级数据格式越来越受到开发者青睐,实质上成为了 AJAX 技术的标准数据格式,因此更恰当的命名应该是「AJAJ」(Asynchronous JavaScript and JSON)。呃,还是算了吧。

需要注意的是,JSON 并不是 XML 格式的替代品,两者各自有其适应的场景。如果你对这两种数据格式的差异感兴趣,可以查看以下链接:

1.2 不刷新页面

我们知道,互联网最主要的功能在于「信息互换」,当初互联网的发明者们也是基于这样的动机。虽然在互联网中「信息互换」的主体都是计算机。但为了方便交流,我们通常将获取资源的一方称为客户端(主要的工具是浏览器),而将派发资源的一方称为服务端(又称为“服务器”)。

在 AJAX 技术出现之前,如果浏览器需要从服务器请求资源,其核心链路是:

  1. 客户端发出资源请求;
  2. 服务端接收请求并返回相应 HTML 文档;
  3. 页面刷新,客户端加载新的 HTML 文档;

确实,这种交互模式十分简洁明了,而且非常符合人的直觉,对于那时游走于互联网中的极客而言,也确实够用了。但是随着时代的进步,互联网渐渐不只是极客们的娱乐场,越来越多商业化网站的出现,使互联网不再局限于满足人们「信息互换」的需求,人们开始期待能够在互联网中获得更好的「使用体验」,而在老旧的模式下,用户的每一次点击都会造成页面的刷新或跳转,这当然很难令人满意。

另一方面,当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数据发生了变化,而此时服务器却要将整个页面再返回给浏览器加载,这显然有悖于「DRY」原则,而且这种交互方式也会给用户的网络带宽带来不必要的开销。

那么有没有办法在页面数据变动时,只向服务器请求新的数据,并且在阻止页面刷新的情况下,动态的替换页面中的数据呢? -- 没错!答案正是 AJAX 技术。

AJAX 技术的问世,不仅在浏览器接受响应时阻止了页面的刷新,从而提升了用户的产品使用体验,还使开发者能够以更加微观的视角重新思考网络应用的构建。从此,Web 开发者将在「数据」层面而非「资源」层面以更高的自由度构建 Web 应用。

1.3 混合技术

是的,AJAX 技术并不只是操作 XMLHttpRequest 对象发起异步请求这么简单,而是为了实现「获取数据时不刷新页面」这一目标的一系列技术的统称,这些技术包括:

  • JavaScript:用来在获取数据后,通过操作 DOM 或其他方式达成目标;
  • 客户端(即浏览器)提供的能够异步与服务器通信的XMLHttpRequest对象;
  • 服务器端允许浏览器向其发起 AJAX 请求的相关设置;

明白 AJAX 并不只是操作 XMLHttpRequest 对象,对于初学者而言是十分必要的。

2. AJAX 的意义

相信您已经明白了,AJAX 技术的意图在于:能够使浏览器在不刷新页面的情况下获取服务器响应。这将大大提升互联网用户的使用体验,同时,由于 AJAX 请求获取的是数据而不是 HTML 文档,因此它也节省了用户的网络带宽,让网络用户的浏览体验变得更加顺畅。

同时,我们也应该注意到,由于 AJAX 技术可以令开发者向服务器获取数据(而不是图片,HTML 文档等资源),互联网资源的传输可以变得更加轻量级和纯粹,这激发了广大开发者的创造力,使各式各样功能强大的 Web 应用(如 Gmail,Facebook 等)如雨后春笋一般冒出,不断带给人惊喜。

也正是从这个时候起,人类正式进入 Web 2.0 时代,前端开发工程师职位正式登上历史舞台,JavaScript 将在未来的日子里越发被人津津乐道。

3. 总结

在本篇文章中我向您介绍了「什么是 AJAX」以及「AJAX 的意义」。您可能会由于文章中没有出现任何代码而感到失望,但请别着急,这篇文章旨在让您对 AJAX 技术有一个全局,清晰的认识。在下一篇文章中,我会花费大量篇幅去深入讨论 AJAX 技术的使用,希望您能保持耐心,让我们下一篇文章见 👋。