18-1 Ajax 介紹與運作流程

Original: https://course.andys.pro/Javascript-Intro/18-1-ajax-introduction-and-operation-process/

講義

1. 什麼是 Ajax？

Ajax 全名為 Asynchronous JavaScript and XML (非同步 JavaScript 與 XML)。它不是一種新的語言，而是一套整合多項技術的網頁開發方式。

• 關鍵字：非同步 (Asynchronous)。這代表網頁可以在「背景」偷偷跟伺服器換資料，而不需要重新整理 (Refresh) 整個頁面。
• 歷史地位：2003 年推出的 Gmail 是 Ajax 愛好者的里程碑，它讓網頁收發信件時不用一直閃爍跳頁。

2. 傳統 Web vs. Ajax 的差異

• 傳統 Web：你按一下按鈕，Server 就要傳回一整份完整的 HTML。即使 90% 的網頁內容都沒變，還是要全部重傳，非常浪費頻寬。
• Ajax 模式：你按一下按鈕，Server 只傳回你需要的「資料」。網頁本身結構不變，再透過 JavaScript 去更新頁面上的一小塊內容。

3. Ajax 的運作流程

1. 觸發事件：例如點擊按鈕。
2. 建立請求：建立一個傳輸物件（早期用 XMLHttpRequest）。
3. 發送請求：透過網際網路將需求送到後端伺服器。
4. 伺服器處理：Server 處理完後，回傳資料（現在主流使用 JSON 格式）。
5. 更新內容：JavaScript 接收資料，並利用 DOM 操作更新網頁內容。

4. 常見的請求方法

• GET (拿資料)：資料會帶在網址列上，例如 ?id=123。
• POST (給資料)：資料會藏在封包的內容 (Body) 裡，常用於新增資料或傳送敏感資訊。

5. 小結

Ajax 縮短了使用者的等待感，減少了伺服器的負擔。雖然名字裡有 XML，但現今業界幾乎都已經改用更輕、更好處理的 JSON 格式。

影片逐字稿 (AI 生成)

歡迎來到第十八章我們現在來講AJAX然後我們現在要了解說什麼是AJAX那我們了解這個AJAX這個技術是什麼我們學習目標就是我們要學的事情是我們以前的頁面我們要像HTML裡面我們要刷新東西我們是不是就是要先改動我們的HTML改動完了以後存檔然後要刷新頁面的內容才會更新那在2003年的時候Gmail推出了那這是一個劃時代的產品原因就是因為他用AJAX這個技術那我是很早就我國小很早的時候就註冊到那個Gmail前就是前幾名的那個註冊者這樣就因為剛好我老師的同學在Google上班這樣好那Gmail他那時候很厲害就是說因為以前我們國小的時候收信箱大家還記得我們都是用Outlook然後我的電腦要開著我才收得到信假如電腦關掉我就收不到信因為你是用本機端那Google他是一個很早就是最早開始做Gmail就是他在網路上時時的幫你收Email然後那你用Gmail的時候你有沒有發現那你在收Mail或等等之類的時候你的頁面是不會更新的然後他每次你刷新了以後他開始要慢慢花很多時間載入整個介面可是你要收信的時候然後你切換不同的地方的時候他就是一直在拉資料那這個技術就是叫Agex然後這邊呢18-2我們看到說XML HTTP request那因為不刷新頁面Agex這東西是從那個時候開始發展的那所以那時候在傳輸資料的時候還是用XML那我們前面有學到JSON嘛就是說在過了5年大概2008年那時候才開始慢慢從XML慢慢轉換到JSON然後後面像現在大家基本上都是用JSON的XML大家比較少再用了好的18-3我們會講Fetch的方法首先我們會介紹Agex然後他的運作流程還有HTTP請求的方法好的剛剛不小心先講一下就是傳統的web的應用呢他是用表單然後用HTML來送一個請求出去那我送出了以後呢我就會重新再重整一次那我重整一次呢是不是我又要再跟我的Server再跟我要一次HTML回來可是這兩頁其實明明就是長得很基本上87%都是一樣的可是我卻要重新再從Server拉了兩次Data回來對不對明明為什麼不能就是不要刷新我只把我的表單裡面的那些要填的資料傳出去就好了對不對那大家可能有時候在政府的一些網站還是會有這樣的狀況就你填完表單然後他送出去然後他又重整又跑一次那就是因為他是比較傳統的web那所以他浪費了很多頻寬可是HTML嘛大部分都是一樣的啊然後可是還是要用Server再傳送那就要浪費很多Server的資源那你如果用adgex的話我就只要傳Server所需要資料那Server因為不用重新刷新所以Server就不用重新再送一份HTML給我這樣子他也輕鬆我也輕鬆因為資料量變低了第一個傳輸的資料量變低了第二個刷新的資料也變低好的首先先了解到adgex是什麼那我前面不是有跟大家講說async嘛對不對async就是非同步的JavaScript and XML所以是ajaxadgex它是一個非同步的你看它翻成中文就是非同步JavaScript及XML看成中文就非常簡單看成adgex就覺得很高尚那其實就是你把這些名詞知道了以後就覺得很OK好那它不是一個新的語言它是一個技術就是說它可以設計互動性更強的網頁所以網頁是從很早之前HTML一頁一頁的單純只有頁面像以前叫做黃頁就是什麼以前有什麼中華黃頁這種網站怎麼大家還太小就是大概在Windows98那時候還在播接網路的時候可以有黃頁一頁一頁然後你要輸入網址才可以找到因為那時候還沒有Google那都是一頁一頁然後後來到開始Google出來了開始他們用Gmail出來了開始用adgex就是頁面不用刷新我只要傳資料這樣子到後面08年那時候Node出來變成是一個頁面然後所有東西都是動態然後到現在所有東西都是動態這樣子那非同步就是說為什麼叫非同步呢同步是什麼同步來講就是我重新刷頁面就是頁面和資料同時到叫做同步那非同步就是我資料跟頁面開始拆開了所以無需重整網頁那我們看一下在adgex我們運作首先呢我有一個事件然後我去建立一個xmlhttp的request請求發送http請求然後送通過網路送到伺服器然後伺服器就會幫我處理這個http的請求然後再把資料再傳回來然後再用javascript來處理這個資料然後分心頁面內容跟傳統httml不太一樣嘛如果只有httml會怎麼做呢只有httml是不是就是我要發一個form完了以後我可能頁面就跳轉了我的url就不一樣了httml就會換成另外一個httml就是一個可能是填表單的httml另外一個可能是填完表單的httml然後就是我按一下他就把整個httml的資料送出去然後轉到另外一個頁面然後server再傳另外一個整個頁面給我那這邊可能大家聽了會覺得很可怕因為我們現在只有處理到就是httml還有javascript而已然後現在這邊就多了一個server的東西那這個server的東西呢大家不要緊張就是在node.js就是有更多的時間會去學習好像聽說是48小時的樣子所以大家不要緊張我這邊只是先跟大家提一下知道就好因為後面node.js才是實作的部分好所以他的流程變成是他流程變成是我以前是送一個httml過去送一個httml過去然後另外一個httml回來現在變成是我把它變成一個這個物件xml的物件然後發http只送這個xml過去然後這邊再把xml再送回來然後javascript去接這個東西接到了以後他再去用javascript像我們剛剛前面那樣子document然後去改頁面的內容form裡面的value內容input的內容一個一個把它改掉這樣子所以他是用javascript做好get就是拿post就是給我們寫一下吧唉唷怎麼欸等一下怎麼跑是不是這樣大家先知道這兩個名詞一個是拿然後這個是ok好的那下面有提到說我如果要拿資料那我今天想要拿的呃name是叫javascript的東西那這時候呢我們的url會變成是說用一個問號就是這個是說URL裡面的parameter可以這樣用就是用一個問號name等於javascript所以我就可以在這個頁面我傳一個參數給他的傳傳法是這樣傳好的那post是Server給我的那他比如說他要給我password喔不要用password就是比如說像code或是等等之類password不要這樣傳喔這樣很可怕好就是密碼不要這樣傳好我們叫message好message1234那他傳從post從server打給你的時候呢他會存在message body裡面去讀好那所以這樣子一要求一問一拿就是可以得到就是一拿然後還有這個是server給你那就可以做到就是來傳輸那這邊是18-1的部分是頂多一拿那一拿那那那那一拿那一拿那那那那

影片逐字稿largev2

歡迎來到第十八章,我們現在來講AJAX然後我們現在要了解說什麼是AJAX那我們了解這個AJAX這個技術是什麼我們學習目標就是我們要學的事情是我們以前的頁面我們要像HTML裡面我們要刷新東西我們是不是就是要先改動我們的HTML,改動完了以後存檔然後要刷新頁面的內容才會更新那在2003年的時候Gmail推出了那這是一個劃時代的一個產品原因就是因為他用AJAX這個技術那我是很早就國小很早就註冊到那個Gmail就是前幾名的那個註冊者就因為剛好我老師的同學在Google上班好,那Gmail他那時候很厲害就是說因為以前我們國小時候收信箱大家還記得我們都是用Outlook然後我的電腦要開著我才收得到信假如電腦關掉我就收不到信,因為你是用本機端那Google他是一個很早就是最早開始做Gmail就是他在網路上時時的幫你收email然後那你用Gmail的時候你有沒有發現當你在收mail或等等之類的時候你的頁面是不會更新的就是然後他每次你刷新了以後他開始要慢慢花很多時間載入整個界面可是你要收信的時候你切換不同的地方的時候他就是一直在拉資料那這個技術就是叫AJAX然後這邊的18-2我們看到說XML HTTP REQUEST那因為不刷新頁面AJAX這東西是從那個時候開始發展的那所以那時候在傳輸資料的時候還是用XML那我們前面有學到JSON嘛就是說在過了五年大概2008年那時候才開始慢慢從XML慢慢轉換到JSON然後後面像現在大家基本上都是用JSON了XML大家比較少在用了好的18-3我們會講Fetch的方法首先我們會介紹AJAX然後他的運作流程還有HTTP請求方法的方法剛剛不小心先講一些就是傳統的web應用呢他是用表單然後用HTML來送一個請求出去那我送出了以後呢我就會重新再重整一次那我重整一次呢是不是我又要再跟我的server再跟我要一次HTML回來可是這兩頁其實明明就是長得很基本上87%都是一樣的可是我卻要重新再從server拉了兩次data回來對不對明明為什麼不能就是不要刷新我只把我的表單裡面的那些要填的資料傳出去就好了大家可能有時候在政府的一些網站還是會有這樣的狀況就你填完表單然後他送出去然後他又重整又跑一次那就是因為他是比較傳統的web所以他浪費了很多頻寬可是HTML嘛大部分都是一樣的啊可是還是要用server再傳送那就會浪費很多server的資源那你如果用AJAX的話我就只要傳server所需要資料那server因為不用重新刷新所以server就不用重新再送一份HTML給我這樣子他也輕鬆我也輕鬆因為資料量變低了第一個傳輸的資料量變低了第二個刷新的資料也變低好的首先先了解到AJAX是什麼那我前面不是有跟大家講說ASYNC嘛對不對ASYNC就是非同步的Javascript and XML所以是AJAX他是一個非同步的你看他翻成中文就是非同步Javascript及XML看成中文就非常簡單看成AJAX就覺得很高尚那其實就是你把這些名詞知道了以後就覺得OK好那他是他不是一個新的語言他是一個技術就說他可以設計互動性更強的網頁所以網頁是從很早之前HTML一頁一頁的單純只有頁面像以前叫做黃頁就是什麼以前有什麼中華黃頁的這種網站可能大家還太小就是大概在Windows 98那時候還在播接網路的時候可以有黃頁一頁一頁然後你要輸入網址才可以找到因為那時候還沒有Google那都是一頁一頁然後後來到開始Google出來了開始他們開始用Gmail出來了開始用AJAX頁面不用刷新我只要傳資料到後面08年那時候Node出來變成是一個頁面然後所有東西都是動態然後到現在所有東西都是動態那非同步就是說為什麼叫非同步呢同步是什麼同步來講就是我重新刷頁面就是頁面和資料同時到叫做同步那非同步就是我資料跟頁面開始拆開了所以無需重整網頁那我們看一下AJAX怎麼運作首先呢我有一個事件然後我去建立一個XML HTTP的request要請求發送HTTP請求然後送透過網路送到伺服器然後伺服器就會幫我處理這個HTTP的請求然後再把資料再傳回來然後再用JavaScript來處理這個資料然後更新頁面內容跟傳統HTML不太一樣嘛如果只有HTML會怎麼做呢只有HTML是不是就是我要一個新我發一個form完了以後我可能頁面就跳轉了我的URL就不一樣了HTML就會換成另外一個HTML就是一個可能是填表單的HTML另外一個可能是填完表單的HTML然後就是我按一下他就把這個整個HTML的資料送出去然後轉到另外一個頁面然後伺服器再傳另外一個整個頁面給我那這邊可能大家聽了會覺得很可怕因為我們現在只有處理到就是HTML還有JavaScript而已然後現在這邊就多了一個伺服器的東西那這個伺服器的東西呢大家不要緊張就是在Node.js就是有更多的時間會去學習好像聽說是48小時所以大家不要緊張我這邊只是先跟大家提一下知道就好因為那後面Node.js才是實作的部分那所以他流程變的是從他流程變的是我以前是送一個HTML過去然後另外一個HTML回來現在變的是我把他變成一個這個物件XML的物件然後發HTTP只送這個XML過去然後再把然後這邊再把XML再送回來然後JavaScript去接這個東西接到了以後他再去用JavaScript像我們剛剛前面那樣子Document啊然後去改頁面的內容啊Form裡面的Value的內容啊Input的內容啊一個一個把它改掉這樣子所以他是用JavaScript做好那這邊我們因為碰到Server所以我們就會碰到HTTP那我們拿資料你這邊可以寫一下就是Get就是拿Post就是給你們寫一下唉唷怎麼會等一下怎麼跑字不正等一下18大家先知道這兩個名詞一個是拿然後這個是給好的那下面有提到說我如果要拿資料那我今天想要拿的呃Name是叫JavaScript的東西那這時候呢我們的URL會變成是說用一個問號就是這個是說URL裡面的parameter可以這樣用就是用一個問號Name等於JavaScript那這時候呢我們的URL會變成是說用一個問號就是這個是說URL裡面的parameter可以這樣用就是用一個問號Name等於JavaScript所以我就可以在這個頁面我傳一個參數給他的傳法是這樣傳好的那Post是Server給我的那他比如說他給我Password呃不要用Password就是比如說像Code或是等等之類Password不要這樣傳喔這樣很可怕好就是密碼不要不要這樣傳我們叫Message好Message123Message1234那他傳從Post從Server打給你的時候呢他會存在MessageBody裡面去讀好那所以這樣子一一一要求呃一問一拿就一就是可以得到就是一拿然後還有這個是Server給你那就可以做到就是來傳書那這邊是十八之一的部分好的