網路請求的過程

在我們了解 Ajax 之前，我們先了解一下，發送網路請求中間會發生什麼事?

什麼是網路請求

當我們在 chrome 上輸入一個 IP ，並按下 enter ，此時我們已經發送一個請求改目標端的伺服器，當目標端的伺服器確認我們的身分沒問題後，
它會去他們自己家的資料庫取出資料，並吐給我們，此時，我們這端的瀏覽器就可以拿到對方吐回來的資料囉。
以上的這個請求和傳輸的過程就是發送一個網路請求會經過的過程。

網頁請求過程

上面我們介紹了網路請求的過程。那經過網路請求，我們會先獲得該目標網站的 HTML 文本檔，接著，瀏覽器會去解析這個 HTML 文本的內容，
若在解析的過程中，遇到需要向外獲取像是 CSS, img, js 這類的檔案，瀏覽器就會對目標資料庫發出請求，而這種透過解析網站的 HTML 文本
所發出的請求，我們就可以稱為網頁請求。

瀏覽器 request Header

當瀏覽器發送請求時，會夾帶一些瀏覽器本身的資訊，像是它是屬於哪一種伺服器、它的 IP 是多少等等的資訊。那放這些內容的地方通常都會在 request header 中，
找得到。

伺服器 response Header

那在伺服器回傳給瀏覽器的資料夾，會有 response Header，那它會夾帶著這個回傳的資料是什麼格式(像是 text/html)，讓瀏覽器可以因應這個格式，去做相對應的呈現。
另外，回傳的資料會放在 response 裡面，像是回傳的 html 文本內容，就會被放在 response 裡面。
記得，response header 和 response 它們回傳的不一樣的喔。

以上的內容就是瀏覽器發送請求給伺服器，然後，在他們之間會傳送什麼樣的文件的內容。
那接下來我們就來介紹 Ajax 在幹嘛吧。

什麼是 AJAX？

AJAX可以達到不需要重新刷新頁面，而達到跟後端取得相對應資料的效果。

課程名稱: 透過 XMLHttpRequest 物件跨瀏覽器撈資料
第一，
我們會先創建一個XMLHttpRequest的物件，並利用這個物件去跟伺服器做互動。

第二，
當XMLHttpRequest的物件創立成功時，我們會利用open這個函式來決定我們是要從伺服器端撈資料過來或是丟資料到伺服器端
即

1 2	var ptr = new XMLHttpRequest(); ptr.open('get', '你要擷取資料的網址', true);

上面的第二行程式碼，open的三個參數代表的意義分別為
格式: 最常用的是get (從伺服器端拿資料回來)、post(從本地端丟資料到伺服器端)
網址: 將資料源的網址放到這個欄位裡面
同步或非同步: 當此引數為true(非同步) 而當此引數為false(同步)

第三，
我們可以利用XMLHttpRequest物件回傳的readyState的值，來判斷本地端和伺服器端彼此之間的關係
當readyState = 0，代表XMLHttpRequest物件還沒有完成初始化，還沒有連結到你要撈的資料
當readyState = 1，你用了open()，但你還沒有把資料傳過去
當readyState = 2，偵測到你有用send()
當readyState = 3，loading
當readyState = 4，你撈到資料了，數據已經完全接收

第四，
利用XMLHttpRequest物件的send函式
ptr.send(null);

以上這行在send裡面放入null的原因是因為，我並沒有要送資料到資料端，所以，放null，
而當你使用完send函式之後，你看ptr回傳的readyState的值應該會是回傳4，代表已經撈到資料了，
接著，你再看responseText這個屬性值，應該就有把資料端的資料讀近來了。
而為什麼readyState會直接從1跳到4呢，是因為這次的練習範例的內容很少，
所以，讀取資料端的速度很快，其實是有經過2 和 3的過程，只是太快了，你看不到，所以，才會有這種錯覺~~

AJAX 非同步觀念 (上)

這邊講解XMLHttpRequest物件的open函式的第三個引數的用意
若

1
2
3

ptr.open('get', '你要擷取資料的網址', true);
ptr.send(null);
console.log(ptr.responseText);

若你在open的第三個引數放入true，你會發現在console.log(ptr.responseText) 出現的內容式空的，
若你今天把true改成false時，此時console.log(ptr.responseText)就有資料源的內容。
而以上這個現象就是Ajax同步與非同步的體現
當第三個引數等於true時，代表非同步，不會等資料傳回來，就讓程式繼續往下跑，等到回傳才會自動回傳
當第三個引數等於false時，代表同步，它等資料傳回來，才讓程式繼續往下跑

AJAX 非同步觀念 (下)

這個小節在講解，當你的AJAX是在非同步的狀態下，要怎在資料回傳的時候，將資料或取出來
例

var ptr = new XMLHttpRequest();
ptr.open('get','資料源網址',true);
ptr.send(null);

ptr.onload = function(){
   console.log(ptr.responseText);
}

以上這個onload事件，就是用在當AJAX非同步時，當資料回傳時，就可以把資料源的資料擷取回來。

HTTP狀態碼

這小節是在說明你可以利用XMLHttpRequest物件回傳的status屬性值，來判斷你是否有正確地將資料源的資料擷取回來。
當status 是200，代表你是從正確的資料源拮取資料
當status 是404，代表你是從錯誤的資料源拮取資料
例:

var ptr = new XMLHttpRequest();
ptr.open('get','資料源網址',true);
ptr.send(null);

ptr.onload = function(){
   if(ptr.status == 200){
      console.log(ptr.responseText);
   }else {
      console.log("資料錯誤!!");
   }
}

你可以看到在ptr的onload事件裡面，你可以利用status的屬性值來寫保護，當回傳是200時，才去截取資料源的資料，若不是就顯示資料錯誤的提示訊息。
另外，onload事件是代表加載完成後立即發生，以上面的範例為例，代表當ptr物件加載完成後，才會觸發後面function的內容。

Landy Blog

AJAX課程筆記-1