月光林地的網頁技術部

網頁課程教材

0%

[javascript] Lesson 1 AJAX技術介紹

發表於 更新於 歸屬於 ，

根據維基百科的介紹：
AJAX即「Asynchronous JavaScript and XML」（非同步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。Ajax的概念由傑西·詹姆士·賈瑞特所提出。

傳統的Web應用允許使用者端填寫表單（form），當送出表單時就向網頁伺服器傳送一個請求。伺服器接收並處理傳來的表單，然後送回一個新的網頁，但這個做法浪費了許多頻寬，因為在前後兩個頁面中的大部分HTML碼往往是相同的。由於每次應用的溝通都需要向伺服器傳送請求，應用的回應時間依賴於伺服器的回應時間。這導致了使用者介面的回應比本機應用慢得多。

與此不同，AJAX應用可以僅向伺服器傳送並取回必須的資料，並在客戶端採用JavaScript處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的資料大量減少，伺服器回應更快了。同時，很多的處理工作可以在發出請求的客戶端機器上完成，因此Web伺服器的負荷也減少了。

類似於DHTML或LAMP，AJAX不是指一種單一的技術，而是有機地利用了一系列相關的技術。雖然其名稱包含XML，但實際上資料格式可以由JSON代替以進一步減少資料量。而客戶端與伺服器也並不需要非同步。

AJAX 全名

  • A - Asynchronous => 非同步(異步)
  • J - Javascript
  • A - And
  • X - XML => 擴增式標記語言

AJAX的簡單歷史

1995年 - 由java applets先實現異步載入功能
1996年 - 微軟的IE瀏灠器使用的iframe元素有類似功能
2005年 - google在其GMAIL產品上大量使用此一技術，同時有技術專家撰文發表Ajax一詞

AJAX的優點

  • 不需要重載整個頁面就能回應用戶行為或傳輸資料
  • 傳輸資料可以精簡一些。
  • 傳輸的資料結構化

AJAX的缺點

  • 網站SEO挑戰變高
  • 瀏灠器相容性問題仍在
  • 網路延遲問題可能影響使用者體驗

AJAX的應用

  • 串接API
  • 背景載入內容

AJAX請求的方式

由於AJAX有多種實作方式，因此本章節我們使用同一個實例，但分別採用四種請求方式來實現AJAX的應用，同學可以根據實際應用場景的需求來選擇不同的方案。

原生XMLHttpRequest

1
2
3
4
5
6
7
8
9
10
11
var xhr=new XMLHttpRequest
xhr.open(“GET”,” https://kktix.com/events.json”,true);
//預設所有的請求都是”非同步“，避免瀏灠器有卡死，停住的狀況
xhr.onload=function(){  //處理回應
var type=xhr.getResponseHeader(“Content-Type”);
var status=xhr.status
var response=xhr.responseText
document.write(response)
}
xhr.send();

函式庫jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
    type:get/post/patch/delete/update….
    url:
    success: (callback)
    error: (callback)
    data:json/xml/string
    complete: (callback)
})

$.get(url,data,callback)

$.post(url,data,callback)

$('selector').load(url)


原生Fetch

1
2
3
4
5
6
7
8
9
10
11
12
13
Fetch(url,{method:'get'})
.then(function(response){
    //處理回應

}).then(function(data){
	//處理資料

})
.catch(function(err){
//error

})

套件axios

cdn:https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js

1
2
3
4
5
6
7
8
9
axios.get(url)
.then(function(response){
//處理回應

})
.catch(function(err){
//error

})

CORS問題

全名為 Cross-Origin Resource Sharing 跨來源資源共享

  • 基於安全的理由，目前的網頁伺服器大多會預設拒絕非本地端的資源請求

  • 大多數的網站會遵守同源政策(Same-origin policy)
  • 公開的網頁服務或API必須開放CORS才能讓其他的應用程式或裝置存取服務

CORS參考資料