[day-12]AJAX - 網路請求


Posted by Xiang on 2021-10-31

什麼是 AJAX?它如何改善網頁使用體驗?

AJAX是一種非同步的javascript技術
可以更改想變更的資訊,而不是整個網頁
由於原先假如在網頁換頁的時候,需要整個重新載入一次html css javascript等等
會需要較多的等待時間,影響使用者體驗。
而運用Ajax設計的網站,可以讓使用者不用重新下載全部網頁內容,可以要什麼就顯示什麼,可以即時回應使用者即時的需求。

什麼是網路請求?

如圖

當我們在chrome瀏覽器按下enter時 就會向wiki伺服器發送get請求 伺服器也會跟資料庫要資料
這就是一種發送網路請求的方式 而這只是其中一種方式

而看到chrome裡藍色js方框 今天我們可以透過js發出一個網路請求 可以在吐回你的js程式
這樣就可以不用透過瀏覽器按enter取得 可以透過你寫的js來做到

從網頁架構瞭解網頁請求

我們可以透過瀏覽器右鍵的檢查 並在下方找到Network就可以查看到按下enter後的網路請求
如圖可以看到首先先找到index.html的檔案讀到發現內容有一個外部資料圖片 他就會對圖片發出請求
然後再讀到script就會在對all.js發出請求

請求不會是同步請求 會有先後順序 可以看到此圖
總共有三個請求 並不是同時進行


網頁請求狀態碼

那這邊假設一下如果我在HTML裡面加上一段本地端沒有的圖片
會不會發送請求?
答案是會的 可以看到圖片 藍色的部分
在html裏面加上 img src qq.png 但本地端並沒有這張照片

那結果可以看到這裡
網路請求的部分就會顯示紅字 並顯示他的狀態碼

Status就是他的狀態
那比較常見的就是
404 not Found 網路請求找不到資料
304 Not Modified 已經請求成功過 這東西沒有編輯過已經有暫存 不會跟伺服器再重新要回傳
(可以先開啟檢查 再按住瀏覽器的重新整理 等到跳出強制重新整理 所有資料就會重新進行網路請求)
200 OK 網路請求成功
500 程式暫時有狀況

HTTP 狀態碼
HTTP 狀態碼表明一個 HTTP 要求是否已經被完成。回應分為五種:

  • 資訊回應 (Informational responses, 100–199),
  • 成功回應 (Successful responses, 200–299),
  • 重定向 (Redirects, 300–399),
  • 用戶端錯誤 (Client errors, 400–499),
  • 伺服器端錯誤 (Server errors, 500–599).

request、response 講解

瀏覽器會透過request對伺服器做請求
伺服器在對response回傳

response header 從header裡面去看data的內容是html還是文字格式
response data (response 本身)

總之 request就是瀏覽器端去發出網路請求
再從伺服器後端判斷他的request之後依照狀框去response傳送內容給瀏覽器


#js #javascript #ajax







Related Posts

現有建築光電發電投資的實質選擇權估值

現有建築光電發電投資的實質選擇權估值

程式基礎 —— Javascript 動手做 Part2

程式基礎 —— Javascript 動手做 Part2

for ...in   for...of   forEach

for ...in for...of forEach


Comments