AJAX非同步傳輸
AJAX非同步傳輸是什麼?AJAX不斷點播放音樂案例分享|天矽科技網頁設計
什麼是AJAX
AJAX全名為Asynchronous JavaScript and XML(非同步JavaScript與XML技術),也可稱非同步傳輸、非同步呼叫,它使用XML Http Request物件來跟伺服器溝通,並能傳送並接收多種格式的資訊,包括JSON、XML、HTML與文字檔案。
它是一個可以與伺服器溝通、交換資料和更新頁面,將資料載入至網站部份頁面區段中,讓網站不需要重新整理、讀取整個頁面的技術,還能夠更加的快速、即時更動介面內容,而網站頁面上的資料,也能因此能各做各的,大幅節省了等待資料的時間。
透過AJAX的技術,網站頁面和API只會向伺服器請求它們真正需要的東西,也就是網站頁面上哪些地方需要改變,只向伺服器請求提供須更變的部分資料,沒有改變的地方則無須提供。
不過嚴格說起來,它並不能稱作是一種技術,而是描述一種「使用多個既有技術的新方式」,這些技術包括了HTML、XHTML、層疊樣式表、JavaScript、文件物件模型、XML、XSLT和XML Http Request物件,這些技術結合在AJAX模型中,使網站頁面得以非同步傳輸。
延伸閱讀
➜JavaScript是什麼?讓網站能互動的JavaScript基本介紹
➜XML是什麼?可延伸標記式語言基本介紹
➜HTML是什麼?HTML基礎應用與解說
AJAX案例
AJAX可以用在註冊頁面驗證用戶名與信箱是否重複使用,或是頁面中的不中斷音樂播放功能…等,像是天矽科技所建置的「幸福電台」網站,最上方的on live音樂播放器能夠不斷點的播放(不因切換頁面讓網站重整,導致音樂會有中斷的問題),就是使用AJAX非同步傳輸技術完成的。
▲上方為播放器
▲實際操作,在網站中到處瀏覽也確實沒有中斷播放、閃爍的情況
畫面若不清楚,可看下方影片操作示範,若有興趣則可到該電台網站試試看是不是真的沒有斷點:幸福電台
AJAX名詞解釋
- A:
Asynchronous非同步的意思,指的是JavaScript對伺服器提出請求,但使用者依然可以與網站頁面進行互動,在互動的同時,網站伺服器也同時在執行,當伺服器完成工作時,在網站上需要更新的資料和程式碼,只會發生部分改變。這也同時表現了非同步、各做各的、各等各的理念,所以非同步請求、非同步傳輸就是這樣的意思。 - J:
JavaScript是一種腳本、事件驅動的程式語言,用來建立可被嵌入或包含在HTML文件中,和與DOM互動的函式,是將更新後的內容載入至網站部份頁面區段中的重要角色。 - A:And的意思。
- X:
XML (eXtensible Markup Language) 可延伸標記式語言,是在JSON出現之前的一種儲存資料的規格和標記語言,它是被用來作為格式化資料資料傳輸的工具。
AJAX優缺點
- 優點:
AJAX最主要的優點,就是上方不斷提到的「非同步」功能,它能讓網站頁面不必更新整個頁面就能將變動的資料進行更新,並且不需要依賴任何瀏覽器外掛程式,只需要使用者能允許JavaScript在瀏覽器上執行。 - 缺點:
AJAX在動態更新的情況下,有可能會讓使用者無法返回先前的頁面,這是因為瀏覽器只能記錄歷史紀錄中的「靜態頁面」,而且很多使用者會透過返回前一頁來取消前一次操作的動作,但是在使用AJAX的技術中,卻沒有辦法這麼做。
另外,也有可能無法將某個頁面加入書籤收藏,因為加入書籤收藏使用的是URL片段識別碼,也就是錨點來保持追蹤,讓使用者回到指定的某個應用程式狀態,但是許多瀏覽器允許使用JavaScript動態更新錨點,導致AJAX也會在更新顯示內容時,同時更新錨點。
不過這些缺點都在HTML5之後被解決了,HTML5之後的瀏覽歷史,會以字串的形式儲存網頁狀態,將網站頁面在加入書籤收藏時,隱形的保留,這個方法也能同時解決無法返回的問題。
延伸閱讀:
➜HTML5是什麼?讓網頁效能更上一層樓的HTML5基本介紹
參考資料:
➜維基百科|AJAX
➜GitHub樂遊前端趣|jQuery - AJAX 與 非同步
➜mdn web docs|Ajax
➜mdn web docs|Ajax入門篇