AJAX非同步傳輸

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

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

　AJAX全名為Asynchronous JavaScript and XML（非同步JavaScript與XML技術），也可稱非同步傳輸、非同步呼叫，它使用XML Http Request物件來跟伺服器溝通，並能傳送並接收多種格式的資訊，包括JSON、XML、HTML與文字檔案。

　它是一個可以與伺服器溝通、交換資料和更新頁面，將資料載入至網站部份頁面區段中，讓網站不需要重新整理、讀取整個頁面的技術，還能夠更加的快速、即時更動介面內容，而網站頁面上的資料，也能因此能各做各的，大幅節省了等待資料的時間。

　透過AJAX的技術，網站頁面和API只會向伺服器請求它們真正需要的東西，也就是網站頁面上哪些地方需要改變，只向伺服器請求提供須更變的部分資料，沒有改變的地方則無須提供。

　不過嚴格說起來，它並不能稱作是一種技術，而是描述一種「使用多個既有技術的新方式」，這些技術包括了HTML、XHTML、層疊樣式表、JavaScript、文件物件模型、XML、XSLT和XML Http Request物件，這些技術結合在AJAX模型中，使網站頁面得以非同步傳輸。

　AJAX可以用在註冊頁面驗證用戶名與信箱是否重複使用，或是頁面中的不中斷音樂播放功能…等，像是天矽科技所建置的「幸福電台」網站，最上方的on live音樂播放器能夠不斷點的播放(不因切換頁面讓網站重整，導致音樂會有中斷的問題)，就是使用AJAX非同步傳輸技術完成的。

AJAX非同步傳輸

▲上方為播放器

▲實際操作，在網站中到處瀏覽也確實沒有中斷播放、閃爍的情況

　畫面若不清楚，可看下方影片操作示範，若有興趣則可到該電台網站試試看是不是真的沒有斷點：幸福電台

A：
Asynchronous非同步的意思，指的是JavaScript對伺服器提出請求，但使用者依然可以與網站頁面進行互動，在互動的同時，網站伺服器也同時在執行，當伺服器完成工作時，在網站上需要更新的資料和程式碼，只會發生部分改變。這也同時表現了非同步、各做各的、各等各的理念，所以非同步請求、非同步傳輸就是這樣的意思。

J：
JavaScript是一種腳本、事件驅動的程式語言，用來建立可被嵌入或包含在HTML文件中，和與DOM互動的函式，是將更新後的內容載入至網站部份頁面區段中的重要角色。

X：
XML (eXtensible Markup Language) 可延伸標記式語言，是在JSON出現之前的一種儲存資料的規格和標記語言，它是被用來作為格式化資料資料傳輸的工具。

優點：
AJAX最主要的優點，就是上方不斷提到的「非同步」功能，它能讓網站頁面不必更新整個頁面就能將變動的資料進行更新，並且不需要依賴任何瀏覽器外掛程式，只需要使用者能允許JavaScript在瀏覽器上執行。

缺點：
AJAX在動態更新的情況下，有可能會讓使用者無法返回先前的頁面，這是因為瀏覽器只能記錄歷史紀錄中的「靜態頁面」，而且很多使用者會透過返回前一頁來取消前一次操作的動作，但是在使用AJAX的技術中，卻沒有辦法這麼做。

另外，也有可能無法將某個頁面加入書籤收藏，因為加入書籤收藏使用的是URL片段識別碼，也就是錨點來保持追蹤，讓使用者回到指定的某個應用程式狀態，但是許多瀏覽器允許使用JavaScript動態更新錨點，導致AJAX也會在更新顯示內容時，同時更新錨點。

不過這些缺點都在HTML5之後被解決了，HTML5之後的瀏覽歷史，會以字串的形式儲存網頁狀態，將網站頁面在加入書籤收藏時，隱形的保留，這個方法也能同時解決無法返回的問題。

看天矽作品集回上一頁