老師您好，不好意思又打擾了 不知道在這邊問適不適當，可是真的疑惑 我自己在網路上學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
彭老師您好: 網路上聽您的課是一種樂趣, 我在聽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.可以找到. 請不吝指教
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(); }
![ออกพรรษาน้ำตาหล่น - แอน อรดี [OFFICIAL MV]](http://i.ytimg.com/vi/PFZtOcY9ONA/mqdefault.jpg)
感謝彭彭無私教學
不客氣 :))
雖然是3年前的影片，但還是想留言謝謝老師教學
簡單好懂!!!!!
不客氣呦，謝謝你的回饋 :)
確實有點久了 QQ
彭彭老師 三天前的提問不必勞煩老師回復了 已找到 web server for chrome 200ok!
問題解決了 謝謝老師的辛勞感恩老師!!!
感恩看到老師一分鐘前的回覆 太感謝了!!我現在趕上老師的GOLANG新影片喔!!!
好的，有解決就好 :)
真的超級詳細
謝謝老師
看第一次還不會
第二次就懂了
謝謝你的回饋，很多時候確實要多看幾次會有幫助 :)
真心講得好好👍
謝謝你的回饋，希望對你有幫助 :)
謝謝老師的講解
把教學整理的簡單明瞭清楚易懂👍👍
謝謝老師 ☺️
不會呦，很高興對你有幫助，也謝謝你的回饋 :)
真的太晚看到您的教學，讚!
謝謝你的回饋哪 :)
優質教學!!
而且馬上可以拿來工作上做應用
真心感謝!!
很高興對你有幫助 :)
感謝老師 教的很清楚~
謝謝 ~~~~
每次看留言也解决不少疑惑
太好了 :)
老师讲得非常不错，很详细。
谢谢哪 :)
舉例很好懂 謝謝
謝謝你的回饋 :)
謝謝您的分享~~ 目前這支影片應該主要是AJAX GET, 請問可以做一支AJAX POST影片嗎?
是明眼人，感謝建議，努力安排看看 @@
很棒的教學!
我每年都要來謝謝老師
哈哈哈，好哦，謝謝你這麼有心哪 :)
彭老師教的真的十分淺顯易懂，希望也能拍jquery AJAX的教學或者AJAX進階延伸的教學影片，謝謝老師這麼用心！
謝謝你的回饋呦 :) ~ 有時間的話會考慮的 ~
簡單易懂 非常感謝~~~~
謝謝喔 : ) ~
請問老師~
在req.onload=function(){alert(this.responseText);};
this是指req.onload (類別)嗎?
我有嘗試使用匿名函式加箭頭函式寫出
req.onload=()=>{alert(this.responseText);};
最後網頁回傳undefined
有辦法使用箭頭和匿名函式寫出這串程式碼嗎?
this 指的是 req 物件。這邊不能使用箭頭函式，箭頭函式會改變 this 的指向。
感謝彭彭老師的教學, 受益良多. 我跟著"JavaScript 網頁前端工程入門教學"看到這, 但有提到上一章是如何架設本地端的伺服器, 不過我的上一章是`自動排程`, 可否提供架設伺服器的連結呢?謝謝
應該是這個：th-cam.com/video/XQAXIenQ3iw/w-d-xo.html
感謝老師...真的教得很棒, 持續學習中, 也期待你未來的課程
謝謝哪，未來的課程我都會盡量 :)
技藝精湛 作育英材
謝謝
不客氣 :)
1.請問老師 如果我把req.onload=function這一段式子擺放在req.send的後面應該是行得通的對吧?
2.老師有規劃未來也教後台的網頁撰寫嗎?
謝謝回答
1. 是的，可以。
2. 暫時沒有，不過我會考慮的。
期待ing
謝謝老師的教學，有幾個問題想請教老師。
1.看完教學陸續去爬一些文章，所以簡單來說Ajax就是和伺服器做連線是嗎？
2.JS要生成一個物件是：var 名稱 = new Object (); 不過在這裡我們生成XMLHttprequest物件並不用new Object而是var req = new XMLHttpRequest(); 原因在它是內建物件是嗎？
1. 是。
2.
new Object() 是內建的最基本物件，new 建構式的名稱() 可以是任何物件，包括內建的 XMLHttpRequest。你可以看一下物件的基本教學，應該會比較有概念一些。
感謝分享,教得很詳細! :)
不會呦，謝謝你 :)
太棒了老师！谢谢您
哈哈哈 :)
好讚的教學～～ 長知識了～
讚哦！:)
請問連線成功是執行onload裡面的事, 那如果連線不成功, 有可以顯示的方法嗎? 謝謝老師, 老師javascript的ajax您教的真的很棒
先謝謝你的認同 :)
除了 onload 是最常用的，還有其他事件可以對應不同的情況，分別是：
onerror：連線失敗。
onabort：主動放棄連線。
ontimeout：連線逾時。
老師好強! 謝謝!!
老師您好
我自己在操作的時候有一點疑問
XMLHttpRequest 所 new 出來的物件 req
在open的時候，我感覺上是使用了open的方法，所以式req(var1,var2);
但是當req.onload的時候卻完全不用加上 ( )
這是為什麼?onload不是這個物件的一個method? 還是因為我們後面的function才在定義onload method?
我自己看完課程關掉影片操作後，卡在這裡十幾分鐘才debug出來 QQ
使用內建的 open 方法，所以 req.open(); 是做方法呼叫。
req.onload 是做事件的處理。如你的理解，我們後面的 function 才定義了 onload method 這樣說沒錯 :)
了解了! 謝謝
淺顯易懂底層的運作模式!!!讚爆
謝謝你的讚!! :))))
不錯~~謝啦.
謝謝 : ) ~
謝謝老師教學
不會，也謝謝你的回饋 :)
这个例子蛮新颖的
:)
自學計畫 4 完成。
Q1: req.onload = function () { .. } 裡的 this.responseText , 這裡的this是指call data 的label嗎? 還是 req ? req 並沒有被當成arg 傳入 onload 要assign的 function
Q2: 這裡的 getData 可以用上一集的 document.location 取代掉嗎?
Q1: 是指 req 物件，this 是綁定物件的概念，比較複雜，在這裡會和 req 指道同一個物件。
Q2: 不行，getData 是我們自己寫的函式，不太一樣的意思。
老師 請問在@@cwpeng-course有沒有 this 更進階的參考資料?
「JavaScript 網頁前端工程進階：函式的綁定物件 this - 基本篇 By 彭彭
」影片中的4種情況, 好像都不太像我問題的情況, 對嗎!?
想請問老師,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
}
}
}
可以哦 ~
電腦中路徑: 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 即無法像老師一樣連線
請老師解惑??
node 和影片中使用的伺服器做法不太一樣。
這部份的教學我好像沒有放在網路上，你可能要找找看其他地方有沒有一些關於如何將靜態的 html 網頁放在 express server 中的相關的說明。
老師你好，我有訂閱您的頻道真的受益很多，只是我有一個比較好奇的疑問
就是AJAX重新整理後網頁要怎麼樣才不會初始化呢?
一定會初始化。
除非你把使用者的狀態記錄起來，例如使用 cookie 或是 localStorage 的方式，重新整理的時候，再動態的根據使用者的狀態去把對應的內容產生出來。
或者利用網址中的 # 符號 (hash)，可以根據這個東西來在初始化的時候，動態產生對應的內容。
好喔，謝謝老師的提醒，那我懂了。如我有發現其他方法一定會來跟老師交流
好的，希望你能發現更方便的方式 :)
老師好，我按照其他網頁教學操作，也順利轉出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;
};
熱門
最新
你的程式碼在非同步的情況下應該是不會正常運作的，還是需要利用 load 事件來處理才行。
至於為什麼 Edge 能夠正常，我不是很確定。
老師您好，不好意思又打擾了
不知道在這邊問適不適當，可是真的疑惑
我自己在網路上學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
很單純 class="類別一 類別二"
中間如果有空白隔開，就是兩個分開的類別名稱，不是一個。
彭彭老師 想請問您有用過Asp.net嗎?? 最近有個問題就是 有辦法透過不同語法做導入嗎? 例如 C#(後端)得到的資料傳給Javascrip(前端)做運算 ? 這是有可行的嗎?
可行的哦 ~~~~
請問老師 該如何 innerHTML 取得整個.ejs類的網頁內容
innerHTML 是前端的程式，所以就是在前端寫一小段程式碼例如 document.body.innerHTML 可以從前端取得網頁的原始碼。
老師你好!
我想請問一下 我要如何 使用javascript 去調用 python 的函式
就是我想在 html 先做一個 button
之後python的函式 寫一個簡單的加法功能
當我按下 button 後
python 會執行加法
你的意思我猜是用 python 當後端系統，那麼就會有一個網址可以呼叫，透過 AJAX 連線到後端系統開出來的網址就可以。
彭老師您好:
網路上聽您的課是一種樂趣, 我在聽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.可以找到.
請不吝指教
不好意思，可能要先確認一些伺服器設定：
1. 先看看 port 是不是設定成 80？如果不是的話，就設定成 80。
2. 再看看伺服器有沒有正確指定到網頁所在的資料夾？
老師你好：
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 前面呢？
寫在前面的概念是所謂的【事件處理】，我們要先告訴物件當連線完成後，要做哪些事情。
實際上在 load 事件中的程式碼，則是如你列的四個步驟，在最後才執行。
只能運用在同個伺服器底下的網頁嗎
是的。精確來說只能呼叫和網頁同一個網域的網址。
感謝老師的回復～
@@cwpeng-course 老師您好，我想請問有甚麼辦法能呼叫不同網域網址呢?謝謝
請問為何寫的順序是 open, load完成後塞資料, send; 但執行的順序是, open, send, load完成後塞資料, 二者為何順序不同?
寫的順序影響的是引擎第一次載入程式碼時理解程式碼的順序。執行順序是引擎根據程式載入後，對程式碼的理解，來決定要如何執行，所以不一定是完全相同的事情。
老師你好，在做的時候我發現我的檔案好像沒辦法讀出來
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
這段文字
請問是哪個地方出了問題呢?
你的網頁檔案本身也要放在伺服器裡面，並且使用網址做連線。
以我的影片範例來說，你會看到網頁的網址是：127.0.0.1/page.htm
@@cwpeng-course 謝謝老師的回覆，後來我又看了一次影片後，我覺得應該是port沒改成80的緣故，改了之後真的就有連接了，真的很抱歉>_
支持支持
謝謝哪 ~~~~
老師不好意思請問一下，我的console顯示如下:Uncaught ReferenceError: getData is not defined
at HTMLSpanElement.onclick 程式碼的部分都一樣
已解決~
恭喜你解決了 ~~~~
可以請問你是怎麼解決的嗎?我也是程式碼都一樣，但始終是req.send();這邊出錯。
用onload是因為資料傳回會重整頁面嗎
不是，是我們會等 HTML 先被瀏覽器載入完成後才執行程式，避免程式中調用 HTML 標籤失敗。
@@cwpeng-course 使指另一個檔案載入完了可以抓資料了嗎
請問老師 ，如果只取一部份的資料要怎麼寫？ （假設最新電影有五部，但我主頁面只需要取最新的三部就好了
又如果是像按下一頁會出現剩下的兩部最新電影，要如何寫？
另外老師教得很好，淺顯易懂 謝謝！
你可以在取資料的迴圈中，決定從陣列的什麼位置開始，什麼位置結束，就可以取特定一段資料來處理。
可以讲一下AJAX+处理JSON数据
好哦，谢谢你的建议，之后找机会讲讲 ~~~
老師好 我利用AJAX一樣想利用點擊選單1 選單2執行 但選單1跟2分別有自己的javascript程式 這當中的javascript是不會執行的 想請問該如何解決@@
不好意思，好像沒辦法理解你的狀況，或許需要完整的程式來協助釐清問題哦 ~
我做的是點擊最新後會出現的是圖片，想問老師的是為什麼用this.responseText還是會成功?
this.responseText 裡面裝的可能是 html 格式的字串，若是包含適當設定的 標籤，自然會被瀏覽器正確詮釋並顯示出來。
老師你好 我想請問為何我的 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
content.innerHTML=this.reponseText; 後面打錯嘍，是 responseText
老師您好，我很喜歡您的教學影片! 但由於我是設計背景的學生想學前端工程但完全沒底子。 請問您建議先從哪部影片開始看起呢?或是有推薦哪些實用的網站可以自學，謝謝您!
就從入門的第一個影片開始看就可以了，我有按照順序排：th-cam.com/video/SRbewm2AUew/w-d-xo.html。
若完全沒底子建議買一本書，書名包含 HTML 和 CSS 的，有了些基礎之後，比較容易吸收網站上的知識。
網站的話 w3schools 還不錯：www.w3schools.com/
老師您好~ 關於免費的網站測試chrome web sever 沒了~ 有什麼可以推薦當作測試的嗎?
你可以使用 VS Code 這個編輯工具，然後安裝裡面的擴充套件 Live Server ~
請問13,14行可以直接改為, 不設變數. 直接將伺服器網頁內容塞入id content的div標籤內嗎?
只有前端沒辦法，要學習後端的樣板引擎相關技巧 ~
可以請問一個問題嘛？
就是如果我想把使用者點選購物的商資訊傳送到後端也能夠使用ajax嘛？
可以哦 ~
請問可以將兩個內容同時顯示在不同一個框框中嗎(不按按鈕)?
可以壓 ~ 抓取資料兩次，並且操作一下 HTML DOM 的內容就可以了 ~
請問老師：我已經加入 後，為何中文還會出現亂碼，英文正常
字打錯嘍，是 UTF-8
彭彭的課程 謝謝老師
找了很久不知道哪裡有問題 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();
}
程式看起來蠻好的，可能要看看你的開發人員工具中的終端機，是否有錯誤訊息可以分享。
老師好，如何用手機或公司電腦等連線到我個人製作的網頁檔案?
必須要將你的網頁上線才行哦。可以搜尋看看 GitHub Pages 這個服務。
請問老師架設伺服器的影片是哪一部呢？
因為這個影片有點久遠了，我印象中那個架設伺服器的影片可能也不在了，不好意思 @@
不好意思 !我目前正在學習 我想問一下
目前NOSQL 跟SQL 的比較
建議學哪一個資料庫
學習 SQL 的應用比較泛用；NoSQL 比較鑽一點，在特定領域中應用。
好謝謝!
那他好像有分 MY SQL 跟 MS SQL 該如何選則
另外老師 我只有javascript ( 基本C++ ) ( VB HTML 感覺想視窗設計應該沒什麼用) 這些(入門)基礎 若學SQL會難嗎?
SQL 是資料庫的一種分類，有很多軟體都屬於 SQL 資料庫，如你說的 MySQL 和 MSSQL，這兩個是資料庫軟體的名稱。基本上都可以，大同小異，不過 MSSQL 應該是要付錢的，MySQL 可以免費用。
SQL 和程式語言沒什麼特別關聯，它只是操作資料庫的語法而已，所以 OK 的。
希望老師有出ajax的線上課程
好的，謝謝你的建議，我會考慮看看的 :)
老師你好!
我想請問一下 我要如何 使用javascript 去調用 python 的函式
就是我想在 html 先做一個 button
之後python的函式 寫一個簡單的加法功能
當我按下 button 後
python 會執行加法
你的意思我猜是用 python 當後端系統，那麼就會有一個網址可以呼叫，透過 AJAX 連線到後端系統開出來的網址就可以。
老師，請問JS原生的AJAX技術可以抓本地的檔案路徑嗎？我用來抓本地檔案路徑會顯示CORS跨域的錯誤。
不行哦，至少要架設一個測試用伺服器，沒辦法直接用本機的檔案路徑來取資料 ~
@@cwpeng-course 了解，謝謝老師~~