AJAX非同步傳輸

AJAX非同步傳輸是什麼?AJAX不斷點播放音樂案例分享|天矽科技網頁設計

AJAX非同步傳輸是什麼?AJAX不斷點播放音樂案例分享|天矽科技網頁設計

 

AJAX 是Asynchronous JavaScript and XML非同步JavaScript與XML技術,也可稱非同步傳輸、非同步呼叫,能使網站頁面只向伺服器請求它們真正需要的東西,讓網站不必重新整理整個頁面,也能達到資訊部分更新的作用。

什麼是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非同步傳輸

▲上方為播放器

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入門篇

 

share FB LINE
看天矽作品集 回上一頁
ID:@323foylw