“再也不学AJAX了”是一个与AJAX主题相关的文章系列,包含以下三个部分的内容:
- AJAX概述:主要回答“AJAX是什么”这个问题;
- 使用AJAX:介绍如何通过JavaScript发送AJAX请求;
- 跨域获取数据:介绍了与“跨域发送AJAX请求”相关的一些内容:比如“浏览器同源策略”与四种跨域请求资源的方式:JSONP,CORS,postMessage和webSocket;
希望通过阅读该系列三个部分的内容,你能够彻底理解并掌握AJAX技术,从此再也不用专门学习AJAX。
让我们开始吧 ?。
一、什么是AJAX?
AJAX是“Asynchronous JavaScript And XML”的缩写(即:异步的JavaScript和XML),是一种实现无页面刷新获取服务器数据的混合技术。
让我们停下来好好思考一下这个定义,注意那些醒目的蓝色文字,它们出现在那里不是没有理由的。
好的,相信你已经对这个定义有些印象,现在让我对那些蓝色的文字做些说明:
(一)XML是什么?
XML是“Extensible Markup Language”的缩写(即:可拓展标记语言),是一种特征类似HTML,用来描述数据是什么,并承载数据的标记语言,你可以在中文的维基百科中看到更完整的解释,但我们现在只要知道它是一种用来承载数据的语言就足够了。
而JSON仅仅是一种数据格式,在JSON发明之前,人们大量使用XML作为数据传输的载体,也正因如此,AJAX技术的最后一个字母为“X”。而如今情况则发生了些变化,JSON这种类似于字符串对象的轻量级的数据格式越来越受到开发者青睐,几乎变成了AJAX技术的标准数据格式,因此好像AJAX技术如今应该换个名字,叫做“AJAJ”,呃,还是算了吧。
需要注意的是,JSON并不是XML的替代品,两者各自有其适应的场景。如果你对这两种数据格式的差异感兴趣,可以查看以下链接:
(二)无页面刷新?
我们知道,互联网最主要的功能在于“资源交换”,当初发明互联网的科学家们也是基于这个动机。虽然在互联网中“资源交换”的主体都是计算机。但为了方便交流,我们通常将获取资源的一方称为客户端(主要的工具是浏览器),而将派发资源的一方称为服务端(又称为“服务器”)。
在AJAX技术出现之前,如果浏览器需要从服务器请求资源,其交互模式为“客户端发出请求 -> 服务端接收请求并返回相应HTML文档 -> 页面刷新,客户端加载新的HTML文档”。确实,这种交互模式十分简洁明了,而且非常符合人的直觉,对于那时游走于互联网中的极客而言,也确实够用了。但是随着时代的进步,互联网渐渐不只是极客们的娱乐场,越来越多商业化网站的出现,使互联网不再局限于满足人们“资源交换”的需求,人们开始期待能够在互联网中获得更好的“使用体验”,而随着用户点击不断刷新页面的交互方式显然很难讨人喜欢。
再试想这样一种情景,当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数据发生了变化,而此时服务器却要将重绘的整个页面再返回给浏览器加载,这显然有悖于程序员的“DRY”原则,而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档,这本身也会给网络带宽带来不必要的开销。
有没有办法在页面数据变动时,只向服务器请求新的数据,并且在阻止页面刷新的情况下,动态的替换页面中展示的数据呢? -- 答案正是“AJAX”。
AJAX技术的问世,不仅通过阻止浏览器接受响应时刷新页面提升了互联网用户的使用体验,还使开发者能够以更加微观的视角重新思考互联网应用的构建,从此,开发者将在“数据”层面而不是“资源”层面以更高的自由度构建网站和Web应用。
(三)混合技术?
是的,AJAX技术并不只是操作XMLHttpRequest
对象发起异步请求,而是为了实现“无页面刷新的资源获取”的一些列技术的统称,这些技术包括了:
- JavaScript:用来在获取数据后,通过操作DOM或其他方式达成目标;
- 客户端(即浏览器)提供的实现异步服务器通信的
XMLHttpRequest
对象; - 服务器端允许浏览器向其发起AJAX请求的相关设置;
明白AJAX并不只是操作XMLHttpRequest
对象,对于初学者而言是十分必要的。
二、AJAX的意义
相信你已经明白了,AJAX技术的意义在于:它能够使浏览器在不刷新页面的情况下获取服务器响应,这将大大提升互联网用户的使用体验,同时,由于AJAX请求获取的是数据而不是HTML文档,因此它也节省了网络带宽,让互联网用户的网络冲浪体验变得更加顺畅。
同时,我们也应该注意到,由于AJAX技术可以令开发者只向服务器获取数据(而不是图片,HTML文档等资源),互联网资源的传输变得前所未有的轻量级和纯粹,这激发了广大开发者的创造力,使各式各样功能强大的网络站点,和互联网应用如雨后春笋一般冒出,不断带给人惊喜。
三、小结
本文我们讲解了“什么是AJAX”以及“AJAX的意义”,你可能会觉得技术博客的一篇文章完全没有代码实在令人难受,但我觉得都某个概念建立一个相对完整的心智模型不仅重要而且可以为技术细节的学习打下很好的基础,别着急,在下一篇文章中,我们会花费大量篇幅去讨论如何使用AJAX技术,希望你保持耐心,Keep Learning,加油!?