再也不學(xué)AJAX了！（一）AJAX概述

neu 發(fā)布于2019-08-21 17:49 / 3520人閱讀

摘要：需要注意的是，并不是的替代品，兩者各自有其適應(yīng)的場(chǎng)景。但為了方便交流，我們通常將獲取資源的一方稱為客戶端主要的工具是瀏覽器，而將派發(fā)資源的一方稱為服務(wù)端又稱為服務(wù)器。它可以幫助我們?yōu)橹蟾拍罴?xì)節(jié)的學(xué)習(xí)打下良好基礎(chǔ)。

“再也不學(xué)AJAX了”是一個(gè)與AJAX主題相關(guān)的文章系列，包含以下三個(gè)部分的內(nèi)容：

AJAX概述：主要回答“AJAX是什么”這個(gè)問題；

使用AJAX：介紹如何通過JavaScript發(fā)送AJAX請(qǐng)求；

跨域獲取數(shù)據(jù)：介紹了與“跨域發(fā)送AJAX請(qǐng)求”相關(guān)的一些內(nèi)容：比如“瀏覽器同源策略”與四種跨域請(qǐng)求資源的方式：JSONP，CORS，postMessage和webSocket；

希望通過閱讀該系列三個(gè)部分的內(nèi)容，你能夠徹底理解并掌握AJAX技術(shù)，從此再也不用專門學(xué)習(xí)AJAX。

讓我們開始吧 ?。

一、什么是AJAX？

AJAX是“Asynchronous JavaScript And XML”的縮寫(即：異步的JavaScript和XML)，是一種實(shí)現(xiàn)無(wú)頁(yè)面刷新獲取服務(wù)器數(shù)據(jù)的混合技術(shù)。

讓我們停下來(lái)好好思考一下這個(gè)定義，注意那些醒目的藍(lán)色文字，它們出現(xiàn)在那里不是沒有理由的。

好的，相信你已經(jīng)對(duì)這個(gè)定義有些印象，現(xiàn)在讓我對(duì)那些藍(lán)色的文字做些說(shuō)明：

（一）XML是什么？

XML是“Extensible Markup Language”的縮寫（即：可拓展標(biāo)記語(yǔ)言），是一種特征類似HTML，用來(lái)描述數(shù)據(jù)是什么，并承載數(shù)據(jù)的標(biāo)記語(yǔ)言，你可以在中文的維基百科中看到更完整的解釋，但我們現(xiàn)在只要知道它是一種用來(lái)承載數(shù)據(jù)的語(yǔ)言就足夠了。

而JSON僅僅是一種數(shù)據(jù)格式，在JSON發(fā)明之前，人們大量使用XML作為數(shù)據(jù)傳輸?shù)妮d體，也正因如此，AJAX技術(shù)的最后一個(gè)字母為“X”。而如今情況則發(fā)生了些變化，JSON這種類似于字符串對(duì)象的輕量級(jí)的數(shù)據(jù)格式越來(lái)越受到開發(fā)者青睞，幾乎變成了AJAX技術(shù)的標(biāo)準(zhǔn)數(shù)據(jù)格式，因此好像AJAX技術(shù)如今應(yīng)該換個(gè)名字，叫做“AJAJ”，呃，還是算了吧。

需要注意的是，JSON并不是XML的替代品，兩者各自有其適應(yīng)的場(chǎng)景。如果你對(duì)這兩種數(shù)據(jù)格式的差異感興趣，可以查看以下鏈接：

為什么XML這么笨重的數(shù)據(jù)結(jié)構(gòu)仍在廣泛應(yīng)用？

為什么都反對(duì)XML而支持使用JSON

Stop Comparing JSON and XML

JSON and XML comparison

（二）無(wú)頁(yè)面刷新？

我們知道，互聯(lián)網(wǎng)最主要的功能在于“資源交換”，當(dāng)初發(fā)明互聯(lián)網(wǎng)的科學(xué)家們也是基于這個(gè)動(dòng)機(jī)。雖然在互聯(lián)網(wǎng)中“資源交換”的主體都是計(jì)算機(jī)。但為了方便交流，我們通常將獲取資源的一方稱為客戶端（主要的工具是瀏覽器），而將派發(fā)資源的一方稱為服務(wù)端（又稱為“服務(wù)器”）。

在AJAX技術(shù)出現(xiàn)之前，如果瀏覽器需要從服務(wù)器請(qǐng)求資源，其交互模式為“客戶端發(fā)出請(qǐng)求 -> 服務(wù)端接收請(qǐng)求并返回相應(yīng)HTML文檔 -> 頁(yè)面刷新，客戶端加載新的HTML文檔”。確實(shí)，這種交互模式十分簡(jiǎn)潔明了，而且非常符合人的直覺，對(duì)于那時(shí)游走于互聯(lián)網(wǎng)中的極客而言，也確實(shí)夠用了。但是隨著時(shí)代的進(jìn)步，互聯(lián)網(wǎng)漸漸不只是極客們的娛樂場(chǎng)，越來(lái)越多商業(yè)化網(wǎng)站的出現(xiàn)，使互聯(lián)網(wǎng)不再局限于滿足人們“資源交換”的需求，人們開始期待能夠在互聯(lián)網(wǎng)中獲得更好的“使用體驗(yàn)”，而隨著用戶點(diǎn)擊不斷刷新頁(yè)面的交互方式顯然很難討人喜歡。

再試想這樣一種情景，當(dāng)用戶點(diǎn)擊頁(yè)面中的某個(gè)按鈕向服務(wù)器發(fā)送請(qǐng)求時(shí)，頁(yè)面本質(zhì)上只是一些數(shù)據(jù)發(fā)生了變化，而此時(shí)服務(wù)器卻要將重繪的整個(gè)頁(yè)面再返回給瀏覽器加載，這顯然有悖于程序員的“DRY”原則，而且明明只是一些數(shù)據(jù)的變化卻迫使服務(wù)器要返回整個(gè)HTML文檔，這本身也會(huì)給網(wǎng)絡(luò)帶寬帶來(lái)不必要的開銷。

有沒有辦法在頁(yè)面數(shù)據(jù)變動(dòng)時(shí)，只向服務(wù)器請(qǐng)求新的數(shù)據(jù)，并且在阻止頁(yè)面刷新的情況下，動(dòng)態(tài)的替換頁(yè)面中展示的數(shù)據(jù)呢？ -- 答案正是“AJAX”。

AJAX技術(shù)的問世，不僅通過阻止瀏覽器接受響應(yīng)時(shí)刷新頁(yè)面提升了互聯(lián)網(wǎng)用戶的使用體驗(yàn)，還使開發(fā)者能夠以更加微觀的視角重新思考互聯(lián)網(wǎng)應(yīng)用的構(gòu)建，從此，開發(fā)者將在“數(shù)據(jù)”層面而不是“資源”層面以更高的自由度構(gòu)建網(wǎng)站和Web應(yīng)用。

（三）混合技術(shù)？

是的，AJAX技術(shù)并不只是操作XMLHttpRequest對(duì)象發(fā)起異步請(qǐng)求，而是為了實(shí)現(xiàn)“無(wú)頁(yè)面刷新的資源獲取”的一些列技術(shù)的統(tǒng)稱，這些技術(shù)包括了：

JavaScript：用來(lái)在獲取數(shù)據(jù)后，通過操作DOM或其他方式達(dá)成目標(biāo)；

客戶端（即瀏覽器）提供的實(shí)現(xiàn)異步服務(wù)器通信的XMLHttpRequest對(duì)象；

服務(wù)器端允許瀏覽器向其發(fā)起AJAX請(qǐng)求的相關(guān)設(shè)置；

明白AJAX并不只是操作XMLHttpRequest對(duì)象，對(duì)于初學(xué)者而言是十分必要的。

二、AJAX的意義

相信你已經(jīng)明白了，AJAX技術(shù)的意義在于：它能夠使瀏覽器在不刷新頁(yè)面的情況下獲取服務(wù)器響應(yīng)，這將大大提升互聯(lián)網(wǎng)用戶的使用體驗(yàn)，同時(shí)，由于AJAX請(qǐng)求獲取的是數(shù)據(jù)而不是HTML文檔，因此它也節(jié)省了網(wǎng)絡(luò)帶寬，讓互聯(lián)網(wǎng)用戶的網(wǎng)絡(luò)沖浪體驗(yàn)變得更加順暢。

同時(shí)，我們也應(yīng)該注意到，由于AJAX技術(shù)可以令開發(fā)者只向服務(wù)器獲取數(shù)據(jù)（而不是圖片，HTML文檔等資源），互聯(lián)網(wǎng)資源的傳輸變得前所未有的輕量級(jí)和純粹，這激發(fā)了廣大開發(fā)者的創(chuàng)造力，使各式各樣功能強(qiáng)大的網(wǎng)絡(luò)站點(diǎn)，和互聯(lián)網(wǎng)應(yīng)用如雨后春筍一般冒出，不斷帶給人驚喜。

三、小結(jié)

本文我們講解了“什么是AJAX”以及“AJAX的意義”，你可能會(huì)覺得一篇技術(shù)文章沒有代碼實(shí)在很古怪，但我覺得在一開始就對(duì)某個(gè)概念建立起正確的心智模型很重要。它可以幫助我們?yōu)橹蟾拍罴?xì)節(jié)的學(xué)習(xí)打下良好基礎(chǔ)。別著急，在下一篇文章中，我們會(huì)花費(fèi)大量篇幅去討論如何使用AJAX技術(shù)，希望你保持耐心，Keep Learning，加油！?

? Hey！喜歡這篇文章嗎？別忘了在下方? 點(diǎn)贊讓我知道。