[day-12]AJAX - 網路請求

什麼是 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).