iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
4
Modern Web

從0.5開始的JavaScript系列 第 21

Day21 AJAX(1): 科普 & XHR

直接進入頁配主題,今日我們要聊聊 AJAX

AJAX

前言

先來看一下維基百科的介紹:

AJAX 即「Asynchronous JavaScript and XML」(非同步的 JavaScript 與 XML 技術),指的是一套綜合了多項技術的瀏覽器端網頁開發技術。 來源:維基百科

在開發網站時,AJAX 常被用來與伺服器傳遞資料,但是你可能會想說,我直接用 form 表單也可以送出資料,然後伺服器收到處理後就回傳給我結果頁面。

但是這樣會有一個問題,如果僅是需要取得少部分資料而已,有需要到讓伺服器回傳一個新的 HTML 嗎?

像是你可能想要取得某個留言內容,結果在你點選查看更多的按鈕時,頁面就整個白白的,然後等待伺服器回傳新的頁面,傳回的新頁面和舊頁面相似度也達 99%,因為我只是想要看那則留言而已...

這則留言,讓我花了幾秒鐘等待頁面重新載入...這是多麼浪費資源和破壞使用者體驗的事情啊!

所以現今網頁,大多會使用 AJAX 來處理這種問題,也就是只向伺服器取得需要的資料,並且等到資料取回後,再透過 JS 渲染到前端畫面上。

甚至做的更完全一點,整個頁面都是透過 JS 來控制與渲染,也就是你在使用該網站時,至始至終都在那個頁面,不會有跳轉到新頁面(網址)的情況,這種應用就稱為 SPA 單頁應用(single-page application)

我們常常在使用的 gmail 也是這樣,並沒有因為點了某封郵件,畫面就整個重新載入,大大提升了使用者體驗。

But

SPA 並沒有這麼簡單,真正使用時可能會遇到複雜的邏輯與路由問題,而且因為內容都是由 JS 產生,導致 SEO 遇到障礙,所有又產生了 SSR(Server Side Render) 相關技術,也就是一些影響 SEO 的重要內容,先由伺服器回傳,讓搜尋引擎爬蟲能夠爬的到。

扯遠了,我們來看看怎麼透過 JS 使用 AJAX 吧。

XHR

AJAX 在 JS 中,是透過 XMLHttpRequest(XHR) 物件作為實作。
它能夠在 client 端對 server 端送出 http request,使用的資料格式是 XML(這也變成時代眼淚,現今大多使用 JSON,它的格式像是 JS 中的物件),正如同我們上方提到的定義:

AJAX 即「Asynchronous JavaScript and XML」(非同步的 JavaScript 與 XML 技術),指的是一套綜合了多項技術的瀏覽器端網頁開發技術。 來源:維基百科

使用流程是建立一個 XHR 物件,設定 URLmethod 然後送出 request,並等待伺服器 response 後,透過 callback function 來進行後續動作。

程式碼大概長這樣

var xhr = new XMLHttpRequest();

// true: 非同步 , false: 同步
xhr.open('get', 'http://xxx', true);

xhr.send(null);

XMLHttpRequest 有各種狀態碼(readyState),能夠知道當前進行到什麼狀態了

各種數字代表的涵義如下:

  • 0
    已經產生 XMLHttpRequest,但還沒連結到要取得的網址。
  • 1
    用了 open() ,但還沒傳送資料過去
  • 2
    用了 send()
  • 3
    loading 資料
  • 4
    撈回資料了,數據已接收完全

實際範例

透過 API 取得資料

var xhr = new XMLHttpRequest();
xhr.open('get', 'http://xxx', true);
xhr.send(null);
xhr.onload = function(data) {
   console.log(xhr.responseText);
};

POST(Form)

var xhr = new XMLHttpRequest();
xhr.open('post', 'http://xxx', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send('name=Bob&password=123456');

POST(JSON)

還記得昨日 Day20 有提到的 JSON 的轉換方法嗎,需要在送出前先將其他格式的資料透過 JSON.stringify 轉為字串。

var account = {
    name: 'Bob',
    password:'123456'
}
var xhr = new XMLHttpRequest();
xhr.open('post', 'https://xxx', true);
xhr.setRequestHeader('Content-type', 'application/json');
var data = JSON.stringify(account);
xhr.send(data);

But

上方的範例中只是做出一個請求就要打這麼多程式碼,若是現今普遍複雜的網站應用,又或是 SPA 這種單純靠 JS 與 AJAX 來控制內容的應用,程式碼中不就滿滿都是一直在建立新的 XMLHttpRequest 實例,而且送出一個請求也需要打那麼多行程式碼,更別提程式碼的可讀性、與後續的維護了。

jQuery

所以通常不會使用原生的方式來操作 AJAX,而是透過套件來解決,有寫過 JS 的人,沒有用過應該也會聽過的 jQuery,裡面就有提供更方便的方法來使用 AJAX

程式碼大概長這樣,一目瞭然程式運行的邏輯,callback function 與 error 的處理也都很方便。

$.ajax({
    url: "http://xxx",
    type: "GET",
    success: function (result) {
        console.log(result);
    },
    error: function (error) {
        console.log("error:", error);
    }
});

這部分就不多做介紹,詳細的使用方法可以到網路上查看。


原本要一篇就講完,但篇幅有點多,還是拆成兩天來講,第二篇會講完 Fetch

今日的分享就到這,我們明天見/images/emoticon/emoticon51.gif


上一篇
Day20 localStorage、sessionStorage
下一篇
Day22 AJAX(2): Fetch
系列文
從0.5開始的JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言