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

 2017-12-05 10:26:38

再也不學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,加油!

 

原文 『再也不学AJAX了!(一)AJAX概述』,作者 岚中浮客 刊登於segmentfault,HowCoder 獲授權轉載。

岚中浮客

岚中浮客

再也不學AJAX了! (三)跨域獲取資源 ② - JSONP & CORS

AJAX 是近期十分常見的網頁開發技術,透過「再也不學AJAX了!」一系列文章,讓您再也不用專門學習AJAX了!

再也不學AJAX了!(二)使用AJAX

AJAX 是近期十分常見的網頁開發技術,透過「再也不學AJAX了!」一系列文章,讓您再也不用專門學習AJAX了!

再也不學AJAX了!(三)跨域獲取資源 ① - 同源策略

AJAX 是近期十分常見的網頁開發技術,透過「再也不學AJAX了!」一系列文章,讓您再也不用專門學習AJAX了!