網頁前端工程入門：JavaScript AJAX 教學 - JS 與伺服器的互動 By 彭彭

[@鷹鷹-b6j]

真心講得好好👍

[@cwpeng-course]

謝謝你的回饋，希望對你有幫助 :)

[@user-saint]

感謝彭彭無私教學

[@cwpeng-course]

不客氣 :))

[@Chenpeng0211]

謝謝

[@cwpeng-course]

不客氣 :)

[@Chenpeng0211]

用onload是因為資料傳回會重整頁面嗎

[@cwpeng-course]

不是，是我們會等 HTML 先被瀏覽器載入完成後才執行程式，避免程式中調用 HTML 標籤失敗。

[@Chenpeng0211]

@@cwpeng-course 使指另一個檔案載入完了可以抓資料了嗎

[@phonesj3422]

舉例很好懂 謝謝

[@cwpeng-course]

謝謝你的回饋 :)

[@洪老師的深度廣角鏡]

謝謝您的分享~~ 目前這支影片應該主要是AJAX GET, 請問可以做一支AJAX POST影片嗎?

[@cwpeng-course]

是明眼人，感謝建議，努力安排看看 @@

[@CYHKID]

請問老師 該如何 innerHTML 取得整個.ejs類的網頁內容

[@cwpeng-course]

innerHTML 是前端的程式，所以就是在前端寫一小段程式碼例如 document.body.innerHTML 可以從前端取得網頁的原始碼。

[@呂錦川]

彭彭老師 三天前的提問不必勞煩老師回復了 已找到 web server for chrome 200ok! 問題解決了 謝謝老師的辛勞感恩老師!!!

[@呂錦川]

感恩看到老師一分鐘前的回覆 太感謝了!!我現在趕上老師的GOLANG新影片喔!!!

[@cwpeng-course]

好的，有解決就好 :)

[@咨光陳]

請問老師架設伺服器的影片是哪一部呢？

[@cwpeng-course]

因為這個影片有點久遠了，我印象中那個架設伺服器的影片可能也不在了，不好意思 @@

[@謝爾傑]

老師您好~ 關於免費的網站測試chrome web sever 沒了~ 有什麼可以推薦當作測試的嗎?

[@cwpeng-course]

你可以使用 VS Code 這個編輯工具，然後安裝裡面的擴充套件 Live Server ~

[@挖石油-m7m]

真的超級詳細 謝謝老師 看第一次還不會 第二次就懂了

[@cwpeng-course]

謝謝你的回饋，很多時候確實要多看幾次會有幫助 :)

[@黃昱凱-u8s]

只能運用在同個伺服器底下的網頁嗎

[@cwpeng-course]

是的。精確來說只能呼叫和網頁同一個網域的網址。

[@黃昱凱-u8s]

感謝老師的回復～

[@洪苡瑄-m2z]

@@cwpeng-course 老師您好，我想請問有甚麼辦法能呼叫不同網域網址呢?謝謝

[@stuchen9131]

我每年都要來謝謝老師

[@cwpeng-course]

哈哈哈，好哦，謝謝你這麼有心哪 :)

[@janeleewalk]

雖然是3年前的影片，但還是想留言謝謝老師教學 簡單好懂!!!!!

[@cwpeng-course]

不客氣呦，謝謝你的回饋 :) 確實有點久了 QQ

[@bucketnick]

这个例子蛮新颖的

[@cwpeng-course]

:)

[@黃柏翔-e1v]

請問老師~ 在req.onload=function(){alert(this.responseText);}; this是指req.onload (類別)嗎? 我有嘗試使用匿名函式加箭頭函式寫出 req.onload=()=>{alert(this.responseText);}; 最後網頁回傳undefined 有辦法使用箭頭和匿名函式寫出這串程式碼嗎?

[@cwpeng-course]

this 指的是 req 物件。這邊不能使用箭頭函式，箭頭函式會改變 this 的指向。

[@呂錦川]

電腦中路徑: Desktop\www\網頁檔案 對應網址:127.0.0.1/ 127.0.0.1/page1.htm 127.0.0.1/popular1.htm 127.0.0.1/latest1.htm 老師 我用 D: ode>node server.js Server running at 127.0.0.1:3000/ ^C D: ode>node server.js Server running at 127.0.0.1:3000/ 測試Server ok 但在影片3:04以後要測試網頁 打網址 127.0.0.1/page1.htm 即無法像老師一樣連線 請老師解惑??

[@cwpeng-course]

node 和影片中使用的伺服器做法不太一樣。 這部份的教學我好像沒有放在網路上，你可能要找找看其他地方有沒有一些關於如何將靜態的 html 網頁放在 express server 中的相關的說明。

[@avidafung1947]

老师讲得非常不错，很详细。

[@cwpeng-course]

谢谢哪 :)

[@Ts2pc]

請問為何寫的順序是 open, load完成後塞資料, send; 但執行的順序是, open, send, load完成後塞資料, 二者為何順序不同?

[@cwpeng-course]

寫的順序影響的是引擎第一次載入程式碼時理解程式碼的順序。執行順序是引擎根據程式載入後，對程式碼的理解，來決定要如何執行，所以不一定是完全相同的事情。

[@黑草草草]

想請問老師,11~14行能改成這樣嗎 req.onreadystatechange = function(){ if(req.readyState===4){ if(req.status >= 200 && req.status < 300){ var content = document.getElementById("content"); content.innerHTML=this.responseText } } }

[@cwpeng-course]

可以哦 ~

[@Ts2pc]

請問13,14行可以直接改為, 不設變數. 直接將伺服器網頁內容塞入id content的div標籤內嗎?

[@cwpeng-course]

只有前端沒辦法，要學習後端的樣板引擎相關技巧 ~

[@roger60902]

老師不好意思請問一下，我的console顯示如下:Uncaught ReferenceError: getData is not defined at HTMLSpanElement.onclick 程式碼的部分都一樣

[@roger60902]

已解決~

[@cwpeng-course]

恭喜你解決了 ~~~~

[@張凱崴-b8i]

可以請問你是怎麼解決的嗎?我也是程式碼都一樣，但始終是req.send();這邊出錯。

[@jack5104123]

彭彭老師 想請問您有用過Asp.net嗎?? 最近有個問題就是 有辦法透過不同語法做導入嗎? 例如 C#(後端)得到的資料傳給Javascrip(前端)做運算 ? 這是有可行的嗎?

[@cwpeng-course]

可行的哦 ~~~~

[@wujia-ling9783]

請問可以將兩個內容同時顯示在不同一個框框中嗎(不按按鈕)?

[@cwpeng-course]

可以壓 ~ 抓取資料兩次，並且操作一下 HTML DOM 的內容就可以了 ~

[@nancychan2083]

謝謝老師的講解 把教學整理的簡單明瞭清楚易懂👍👍 謝謝老師 ☺️

[@cwpeng-course]

不會呦，很高興對你有幫助，也謝謝你的回饋 :)

[@weihsuan27]

可以請問一個問題嘛？ 就是如果我想把使用者點選購物的商資訊傳送到後端也能夠使用ajax嘛？

[@cwpeng-course]

可以哦 ~

[@JU-sq5ek]

老師好，如何用手機或公司電腦等連線到我個人製作的網頁檔案?

[@cwpeng-course]

必須要將你的網頁上線才行哦。可以搜尋看看 GitHub Pages 這個服務。

[@jackwang9395]

老師你好 我想請問為何我的 1 點下去 會顯示undefined test function getData(){ var req=new XMLHttpRequest(); req.open("get","127.0.0.1:8887/html.html"); req.onload=function(){ var content=document.getElementById("content"); content.innerHTML=this.reponseText; }; req.send(); } 1 2 3

[@cwpeng-course]

content.innerHTML=this.reponseText; 後面打錯嘍，是 responseText

[@PeterPan-wi2lt]

謝謝老師的教學，有幾個問題想請教老師。 1.看完教學陸續去爬一些文章，所以簡單來說Ajax就是和伺服器做連線是嗎？ 2.JS要生成一個物件是：var 名稱 = new Object (); 不過在這裡我們生成XMLHttprequest物件並不用new Object而是var req = new XMLHttpRequest(); 原因在它是內建物件是嗎？

[@cwpeng-course]

1. 是。 2. new Object() 是內建的最基本物件，new 建構式的名稱() 可以是任何物件，包括內建的 XMLHttpRequest。你可以看一下物件的基本教學，應該會比較有概念一些。

[@劉志遠-g9p]

Q1: req.onload = function () { .. } 裡的 this.responseText , 這裡的this是指call data 的label嗎? 還是 req ? req 並沒有被當成arg 傳入 onload 要assign的 function Q2: 這裡的 getData 可以用上一集的 document.location 取代掉嗎?

[@cwpeng-course]

Q1: 是指 req 物件，this 是綁定物件的概念，比較複雜，在這裡會和 req 指道同一個物件。 Q2: 不行，getData 是我們自己寫的函式，不太一樣的意思。

[@劉志遠-g9p]

老師 請問在@@cwpeng-course有沒有 this 更進階的參考資料? 「JavaScript 網頁前端工程進階：函式的綁定物件 this - 基本篇 By 彭彭 」影片中的4種情況, 好像都不太像我問題的情況, 對嗎!?

[@JU-sq5ek]

老師好，我按照其他網頁教學操作，也順利轉出ajax了，程式碼跟你略有不同，我發現它在Microsoft Edge可以呈現，但在chrome&firefox卻不行，為何會如此? 還有我覺得我以下寫的比老師的程式碼要簡單些，請問實務操作上功能會有何不同，各自的優缺點又為何? 請老師指點，謝謝。 function getdata(){ var x =new XMLHttpRequest(); x.open('GET','popular.html',false); x.send(); document.getElementById('content').innerHTML=x.responseText; }; 熱門 最新

[@cwpeng-course]

你的程式碼在非同步的情況下應該是不會正常運作的，還是需要利用 load 事件來處理才行。 至於為什麼 Edge 能夠正常，我不是很確定。

[@wei-tingliao3798]

真的太晚看到您的教學，讚!

[@cwpeng-course]

謝謝你的回饋哪 :)

[@王鵬舜-y8f]

老師你好： function getData(pageName){ // Ajax: XMLHttpRequest var req=new XMLHttpRequest(); req.open("get","127.0.0.1/"+pageName); req.onload=function(){ var content=document.getElementById("content"); content.innerHTML=this.responseText; }; req.send(); // 送出連線 } 本講的4個步驟為： 1. 創立 XMLHttpRequest 物件 2. 設定連線的網址 3. 送出連線 4. 連線完成，做連線後的處理 但為什麼在程式碼中，load 事件卻是在 send 前面呢？

[@cwpeng-course]

寫在前面的概念是所謂的【事件處理】，我們要先告訴物件當連線完成後，要做哪些事情。 實際上在 load 事件中的程式碼，則是如你列的四個步驟，在最後才執行。

[@YuHaoHuang-e1h]

老師你好! 我想請問一下 我要如何 使用javascript 去調用 python 的函式 就是我想在 html 先做一個 button 之後python的函式 寫一個簡單的加法功能 當我按下 button 後 python 會執行加法

[@cwpeng-course]

你的意思我猜是用 python 當後端系統，那麼就會有一個網址可以呼叫，透過 AJAX 連線到後端系統開出來的網址就可以。

[@littlemonsteur8108]

每次看留言也解决不少疑惑

[@cwpeng-course]

太好了 :)

[@jason-fn9fj]

請問老師 ，如果只取一部份的資料要怎麼寫？ （假設最新電影有五部，但我主頁面只需要取最新的三部就好了 又如果是像按下一頁會出現剩下的兩部最新電影，要如何寫？

[@jason-fn9fj]

另外老師教得很好，淺顯易懂 謝謝！

[@cwpeng-course]

你可以在取資料的迴圈中，決定從陣列的什麼位置開始，什麼位置結束，就可以取特定一段資料來處理。

[@tehuiliang3686]

請問老師：我已經加入 後，為何中文還會出現亂碼，英文正常

[@cwpeng-course]

字打錯嘍，是 UTF-8

[@tehuiliang3686]

彭彭的課程 謝謝老師

[@cr.5256]

老師，請問JS原生的AJAX技術可以抓本地的檔案路徑嗎？我用來抓本地檔案路徑會顯示CORS跨域的錯誤。

[@cwpeng-course]

不行哦，至少要架設一個測試用伺服器，沒辦法直接用本機的檔案路徑來取資料 ~

[@cr.5256]

@@cwpeng-course 了解，謝謝老師~~

[@Xiao_pon0322]

老師好 我利用AJAX一樣想利用點擊選單1 選單2執行 但選單1跟2分別有自己的javascript程式 這當中的javascript是不會執行的 想請問該如何解決@@

[@cwpeng-course]

不好意思，好像沒辦法理解你的狀況，或許需要完整的程式來協助釐清問題哦 ~

[@vuarnet0318]

感謝彭彭老師的教學, 受益良多. 我跟著"JavaScript 網頁前端工程入門教學"看到這, 但有提到上一章是如何架設本地端的伺服器, 不過我的上一章是`自動排程`, 可否提供架設伺服器的連結呢?謝謝

[@cwpeng-course]

應該是這個：kzbin.info/www/bejne/joKkiXybo7Zmn9k

[@vuarnet0318]

感謝老師...真的教得很棒, 持續學習中, 也期待你未來的課程

[@cwpeng-course]

謝謝哪，未來的課程我都會盡量 :)

[@sinsin7843]

感謝老師 教的很清楚~

[@cwpeng-course]

謝謝 ~~~~

[@guitar8093]

優質教學!! 而且馬上可以拿來工作上做應用 真心感謝!!

[@cwpeng-course]

很高興對你有幫助 :)

[@jefflin1275]

老師您好 我自己在操作的時候有一點疑問 XMLHttpRequest 所 new 出來的物件 req 在open的時候，我感覺上是使用了open的方法，所以式req(var1,var2); 但是當req.onload的時候卻完全不用加上 ( ) 這是為什麼?onload不是這個物件的一個method? 還是因為我們後面的function才在定義onload method? 我自己看完課程關掉影片操作後，卡在這裡十幾分鐘才debug出來 QQ

[@cwpeng-course]

使用內建的 open 方法，所以 req.open(); 是做方法呼叫。 req.onload 是做事件的處理。如你的理解，我們後面的 function 才定義了 onload method 這樣說沒錯 :)

[@jefflin1275]

了解了! 謝謝

[@__lsr6759]

可以讲一下AJAX+处理JSON数据

[@cwpeng-course]

好哦，谢谢你的建议，之后找机会讲讲 ~~~

[@760jamesoo]

老師你好，在做的時候我發現我的檔案好像沒辦法讀出來 function getData(){ var req=new XMLHttpRequest(); req.open("get", "127.0.0.1/newsong.htm"); req.onload=function(){ alert(this.responseText); }; req.send(); } 新歌 舊歌 預覽之後，按了新歌這兩個字都沒反應 然後F12的console會出現 GET 127.0.0.1/newsong.htm net::ERR_CONNECTION_REFUSED 這段文字 請問是哪個地方出了問題呢?

[@cwpeng-course]

你的網頁檔案本身也要放在伺服器裡面，並且使用網址做連線。 以我的影片範例來說，你會看到網頁的網址是：127.0.0.1/page.htm

[@760jamesoo]

@@cwpeng-course 謝謝老師的回覆，後來我又看了一次影片後，我覺得應該是port沒改成80的緣故，改了之後真的就有連接了，真的很抱歉>_

[@keroro7454]

我做的是點擊最新後會出現的是圖片，想問老師的是為什麼用this.responseText還是會成功?

[@cwpeng-course]

this.responseText 裡面裝的可能是 html 格式的字串，若是包含適當設定的 標籤，自然會被瀏覽器正確詮釋並顯示出來。

[@zeroeye0]

請問連線成功是執行onload裡面的事, 那如果連線不成功, 有可以顯示的方法嗎? 謝謝老師, 老師javascript的ajax您教的真的很棒

[@cwpeng-course]

先謝謝你的認同 :) 除了 onload 是最常用的，還有其他事件可以對應不同的情況，分別是： onerror：連線失敗。 onabort：主動放棄連線。 ontimeout：連線逾時。

[@zeroeye0]

老師好強! 謝謝!!

[@李婷筠-r9f]

不好意思 !我目前正在學習 我想問一下 目前NOSQL 跟SQL 的比較 建議學哪一個資料庫

[@cwpeng-course]

學習 SQL 的應用比較泛用；NoSQL 比較鑽一點，在特定領域中應用。

[@李婷筠-r9f]

好謝謝! 那他好像有分 MY SQL 跟 MS SQL 該如何選則

[@李婷筠-r9f]

另外老師 我只有javascript ( 基本C++ ) ( VB HTML 感覺想視窗設計應該沒什麼用) 這些(入門)基礎 若學SQL會難嗎?

[@cwpeng-course]

SQL 是資料庫的一種分類，有很多軟體都屬於 SQL 資料庫，如你說的 MySQL 和 MSSQL，這兩個是資料庫軟體的名稱。基本上都可以，大同小異，不過 MSSQL 應該是要付錢的，MySQL 可以免費用。

[@cwpeng-course]

SQL 和程式語言沒什麼特別關聯，它只是操作資料庫的語法而已，所以 OK 的。

[@jefflin1275]

老師您好，不好意思又打擾了 不知道在這邊問適不適當，可是真的疑惑 我自己在網路上學jQuery的教學，他有一個線上challange 目標是: Use a class selector to only select the vacations with a class of .america 我本來以為是 $(.vacation america) 但是發現他提示說，li class="vacation america" 其實是 Keep in mind that means that there are two classes for that element: .vacation and .america. 這是為什麼呢? 照之前所學的，我理解為ul中的 li項目用一個叫做.vacation america的css 修飾 不知道為何這邊理解是兩個classes? Vacation Packages San Francisco, California $700 Washington DC, District of Columbia $400 London, England $1,100

[@cwpeng-course]

很單純 class="類別一 類別二" 中間如果有空白隔開，就是兩個分開的類別名稱，不是一個。

[@high-on24]

老師你好，我有訂閱您的頻道真的受益很多，只是我有一個比較好奇的疑問 就是AJAX重新整理後網頁要怎麼樣才不會初始化呢?

[@cwpeng-course]

一定會初始化。 除非你把使用者的狀態記錄起來，例如使用 cookie 或是 localStorage 的方式，重新整理的時候，再動態的根據使用者的狀態去把對應的內容產生出來。 或者利用網址中的 # 符號 (hash)，可以根據這個東西來在初始化的時候，動態產生對應的內容。

[@high-on24]

好喔，謝謝老師的提醒，那我懂了。如我有發現其他方法一定會來跟老師交流

[@cwpeng-course]

好的，希望你能發現更方便的方式 :)

[@HA-vd5wv]

找了很久不知道哪裡有問題 QQ 拜託幫我看一下 function getData(){ var req=new XMLHttpRequest(); req.open("get", "127.0.0.1/popular.html"); req.onload=function(){ var content=document.getElementById("content"); content.innerHTML=this.responseText; }; req.send(); }

[@cwpeng-course]

程式看起來蠻好的，可能要看看你的開發人員工具中的終端機，是否有錯誤訊息可以分享。

[@胡貽安-w8s]

彭老師您好: 網路上聽您的課是一種樂趣, 我在聽AJAX課時, 跟著您的課輸入程式, 設定伺服器. 在RUN程式PAGE時出現下列錯誤 2127.0.0.1/popular.htm Failed to load resource: the server responded with a status of 404 (Not Found) page.html:1 XMLHttpRequest cannot load 127.0.0.1/popular.htm. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404. 不知問題出在哪裡, 手動輸入 127.0.0.1/popular.htm.可以找到. 請不吝指教

[@cwpeng-course]

不好意思，可能要先確認一些伺服器設定： 1. 先看看 port 是不是設定成 80？如果不是的話，就設定成 80。 2. 再看看伺服器有沒有正確指定到網頁所在的資料夾？

[@fcheang8321]

支持支持

[@cwpeng-course]

謝謝哪 ~~~~

[@eastern815]

技藝精湛 作育英材

[@qinlin0081]

謝謝老師教學

[@cwpeng-course]

不會，也謝謝你的回饋 :)

[@吳宇-y8i]

1.請問老師 如果我把req.onload=function這一段式子擺放在req.send的後面應該是行得通的對吧? 2.老師有規劃未來也教後台的網頁撰寫嗎? 謝謝回答

[@cwpeng-course]

1. 是的，可以。 2. 暫時沒有，不過我會考慮的。

[@吳宇-y8i]

期待ing

[@uhangvong8594]

不錯~~謝啦.

[@cwpeng-course]

謝謝 : ) ~

[@f54469]

淺顯易懂底層的運作模式!!!讚爆

[@cwpeng-course]

謝謝你的讚!! :))))

[@freyakim2964]

感謝分享,教得很詳細! :)

[@cwpeng-course]

不會呦，謝謝你 :)

[@Takeshihsu]

自學計畫 4 完成。

[@debbyji2837]

簡單易懂 非常感謝~~~~

[@cwpeng-course]

謝謝喔 : ) ~

[@maskman4821]

很棒的教學!

[@yanlingli6924]

太棒了老师！谢谢您

[@cwpeng-course]

哈哈哈 :)

[@林岳鋒-w1c]

好讚的教學～～ 長知識了～

[@cwpeng-course]

讚哦！:)

[@東諺謝]

老師您好，我很喜歡您的教學影片! 但由於我是設計背景的學生想學前端工程但完全沒底子。 請問您建議先從哪部影片開始看起呢?或是有推薦哪些實用的網站可以自學，謝謝您!

[@cwpeng-course]

就從入門的第一個影片開始看就可以了，我有按照順序排：kzbin.info/www/bejne/iYPFlqqjZ6aIm9k。 若完全沒底子建議買一本書，書名包含 HTML 和 CSS 的，有了些基礎之後，比較容易吸收網站上的知識。 網站的話 w3schools 還不錯：www.w3schools.com/

[@enjoy23able]

彭老師教的真的十分淺顯易懂，希望也能拍jquery AJAX的教學或者AJAX進階延伸的教學影片，謝謝老師這麼用心！

[@cwpeng-course]

謝謝你的回饋呦 :) ~ 有時間的話會考慮的 ~

[@ddr765543]

希望老師有出ajax的線上課程

[@cwpeng-course]

好的，謝謝你的建議，我會考慮看看的 :)

[@YuHaoHuang-e1h]

老師你好! 我想請問一下 我要如何 使用javascript 去調用 python 的函式 就是我想在 html 先做一個 button 之後python的函式 寫一個簡單的加法功能 當我按下 button 後 python 會執行加法

[@cwpeng-course]

你的意思我猜是用 python 當後端系統，那麼就會有一個網址可以呼叫，透過 AJAX 連線到後端系統開出來的網址就可以。