HOME

 

 

那福忠,知名電子出版專家、網路作家。
   
  AJAX 讓網頁暢流
  那福忠 September 19, 2006
  請把你的想法寫信給我: [email protected]
   

    無論什麼行業都有網站,網上能見度成了必備的營運的條件,尤其靠網路傳播的媒體,網站除了內容豐富,資料傳輸更要快速。但是內容越豐富、資料量越大,相對的傳輸也就越慢,每換一頁,先出現一頁空白的等待畫面,過了一會兒,才「放映主片」,再豐富的內容,也只得斷斷續續的欣賞。隨著頻寬價格的下降,大家把頻寬加大,希望網上換頁的速度加快,但寬頻也同時觸動了網站製作的創意,讓內容更加豐富,資料量也隨著增加,最後抵銷了寬頻的速度,每換一頁,空白畫面依舊。

   網頁瀏覽器的人機互動,是同步依序的設計,每點選一個連結、要求下一網頁,系統就下一個指令,藉網路傳到伺服機,伺服機接到指令,找到資料經整理之後,再藉網路傳回瀏覽器,瀏覽器再合成網頁顯示。這是個複雜的流程,同一時間,瀏覽器與伺服機僅能有一方面做事,伺服機做事的時候,瀏覽器什麼都不能做,只能等伺服機的回應,所以就顯示一個空白畫面,告訴人說「快來了」。上網的人了解這個運作,或許覺得等上幾秒鐘情有可原,但這些技術上的細節,原本不必讓使用的人知道,換言之,人機的互動為什麼不能連續順暢的顯示畫面?

   Google 在這方面花了不少力氣,尤其在新服務項目如 Google Maps,就有很好的成效。讀者進入 Google Maps 網站,找到想看的地圖,放大或縮小到搜尋的範圍,然後在地圖上移動滑鼠,只見地圖就跟著滑鼠上下左右的移動,畫面連續的變化、並不中斷。除了 Google Maps,中文的上海市地圖也有同樣的效果,上海市區的立體地圖製作的很精美,同樣的會跟著滑鼠移動,與大家熟悉的網頁更換,迥然不同。

   這是怎麼一回事?原來 Google Maps 與上海立體地圖都用了簡稱 AJAX 的新技術,在系統的結構上,是在瀏覽器與伺服機中間加了一個稱為 AJAX 引擎的軟體,瀏覽器與伺服機間的資料不直接傳輸,而是透過 AJAX 引擎轉接。在傳輸的路上多停一站,照理速度應該更慢,結果正好相反,速度反而更快,或者說,至少人感覺速度很快。AJAX 引擎放在瀏覽器端,主要的功用,在打消瀏覽器與伺服機一來一往的同步順序,在伺服機運做的同時,AJAX 引擎與瀏覽器互動,所以不會有空白的等待畫面出現。因此 AJAX 以非同步為名,全名是 Asynchronous JavaScript + XML。

   到底有多少人運用這一新的技術,根據美國市場調查機構 Evans Data 日前發佈的報告,有越來越多的網站使用 AJAX,而且以東歐、巴西、印度、中國大陸這些新興地區為甚,巴西帶頭,有 25% 的網上應用採用 AJAX,中國大陸雖然殿後,也有 16% 的網上活動運用這一優勢,美國雖為網路大國,採用 AJAX 的也僅有 18%。Evans 總裁 John Andrews 解譯,這一新技術廣被新興地區網路開發所採用,顯示網路的應用越來越活躍,勢不可當。不難想像,以後在網上擷取資訊,就像在自己電腦的硬碟提取那麼順暢。

   AJAX 引擎到底做什麼事,能讓瀏覽器不閒著、讓人感覺速度很快?說穿了很簡單,就是把原來伺服機內的部分的工作,移到瀏覽器端放在 AJAX 引擎運轉。運用 AJAX 的網站,首先把 AJAX 引擎傳到瀏覽器端的電腦,通常是隱藏在背後,轉接瀏覽器與伺服機的資料。上網的人通常會遇到許多簡單的動作,輸入資料、更改資料、搜尋網站內容,這些事大部分可由 AJAX 引擎代勞,而不必到伺服機去取。AJAX 引擎與瀏覽器互動之際,同時也向伺服機下指令擷取必須的資料,AJAX 引擎同時對上與對下,瀏覽器動作的同時,伺服機的資料也傳回來,上網可以繼續下去。這樣週而復始,上網的人感覺順暢與快速的運轉。

   如果把這一技巧用在地圖上,可以假想 AJAX 引擎事先儲存比畫面大一些的範圍,滑鼠移動的時候,AJAX 就把儲存的部分拿出來顯示,所以畫面能跟著滑鼠移動,但 AJAX 同時也向伺服機下達指令,要求範圍以外的地圖,當滑鼠移動到 AJAX 儲存以外的地方,伺服機的回應也到了,所以可以一直繼續下去。這只是簡化 AJAX 的運用邏輯,Google 與上海地圖可能用更好的方法,不過在技術上有一個重要的關鍵,就是伺服機傳給 AJAX 的是 XML 資料,而且僅僅是必需的資料,而非 HTML 網頁,所以資料量大為減少,這也是運作快速的原因之一。

   AJAX 本身不是新的技術,而是綜合幾項既有的網上技術,計有:

    .     運用標準的網上技術 XHTML 與 CSS。

    .     運用 DOM (Document Object Module) 的機動互動顯示。

    .     運用 XML 與 XSLT 做資料交換與處理的工具。

    .     運用非同步 XMLHttpRequest 從伺服機取得資料。

    .     運用 JavaScript 連接整體運作。

   技術性的解釋是,瀏覽器以 JavaScript Call 傳給 AJAX 引擎,AJAX 引擎再以 HTTP Request 傳給 Web 或 XML 伺服機;取得資料以後,伺服機以 XML 格式傳給 AJAX 引擎,AJAX 引擎再轉為 HTML+CSS 傳瀏覽器顯示。傳統的做法,是瀏覽器傳給伺服機 HTTP Request,伺服機則以 HTML+CSS 回傳給瀏覽器。想對 AJAX 進一步,可參閱這個網站

上一篇   下一篇 索 引