AJAX 學習筆記

參考網站：http://www.w3schools.com/ajax/default.asp

---

什麼是AJAX?

AJAX是Asynchronous Javascript And XML的縮寫，主要用途是可以更新部份網頁內容，而不用重新整理整個頁面，如此一來可以做出互動性比較強的網頁。舉例來說，用Google搜尋的時候，雖然你還沒打完關鍵字，他就會有一些建議列在下面，而且會跟著你打的字不同隨時更新。

---

AJAX的流程

step 1.
當某個AJAX的相關事件發生時，你的瀏覽器會產生一個XMLHttpRequest的物件，並且透過網路傳送到遠端的伺服器。

step 2.
伺服器接收到了以後，會做些處理並且送出回應到用戶端的瀏覽器。

stem 3.
瀏覽器用javascript處理完伺服器的回應之後，便可以更新網頁上的內容。

---

XMLHttpRequest 物件

XMLHttpRequest是AJAX的靈魂，他可以在你看不到的地方與伺服器交換資料。

---

產生XMLHttpRequest 物件

variable = new XMLHttpRequest();

 如果是比較舊的瀏覽器，像是IE5, IE6（還有人在用嗎=  =），就要使用ActiveX Object:

variable = new ActiveXObject("Microsoft.XMLHTTP");

---

傳送request到伺服器
要傳送request，我們要利用open() 和 send()兩種XMLHttpRequest的method達成。
假設我們已經有創造一個xmlhttp的XMLHttpRequest物件：

xmlhttp.open( "GET", "demo.asp", true);
xmlhttp.send();

Method	內容描述
open(method, url, async)	指定這個XMLHttpRequest的相關性質 method: 指定要傳送的方法，包括 POST 和 GET url: 指定server處理這個request的檔案 async: 同步(true) 或不同步(false) 處理，下面會說明
send(string)	傳送request到伺服器 string: 只有在傳送方法為POST 才需要用到。

---

METHOD: GET 或 POST?

在大部分的情況下，GET比POST還要簡單而且快速，但是在以下狀況時，必須使用POST：
1. 在伺服器端更新檔和或資料庫
2. 傳送龐大的資料量時（GET有大小的限制）
3. 傳送使用者的輸入資料（可以含有變數，而且POST比較穩當、安全）

關於GET 和 POST更詳細的說明，可以參考這個網站。
而GET、POST、和 "快取" 的關係，則可以參考這裡。

---

GET

一個簡單的GET request如下

xmlhttp.open("GET", "test.asp", true);
xmlhttp.send();

如果要避免快取造成每次傳回的內容都一樣，可以在url後面加上變數：

xmlhttp.open("GET", "test.asp?t=" + Math.random(), true);
xmlhttp.send();

而要傳送資料的話，就把資料放在url後面：

xmlhttp.open("GET", "test.asp?num1=3&num2=8", true);
xmlhttp.send(); 

---

POST
一個基本的POST request如下

xmlhttp.open("POST", "test.asp", true);
xmlhttp.send();

當你需要傳送像是html的資料，必須用setRequestHeader 函式為資料加上header：
xmlhttp.open("POST", "test.asp", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("num1=3&num2=8");

Method	內容描述
setRequestHeader(header, value)	在request中加入header                     header: 指定header value: 指定header的值

---

URL: 在伺服器端的檔案
這裡指定的url，是在伺服器端的一個檔案。這個檔案可以是任何種類，像是 .txt , .xml , .asp , .php等等。

---

Asynchronous：不同步(true) 或同步(false)？
這裡的不同步是說，當我們送出request之後，不需要等到伺服器傳回response才會繼續動作。一般不會建議在將這個變數設成false，因為如果伺服器因為某些原因沒有傳回response，你的javascript就會停在那裡不會繼續動作。

xmlhttp.open("GET", "test.asp", true);

--TRUE
當我們設為不同步(true)，javascript就可以趁著等待伺服器回覆的時間，執行其他的部份。有個事件叫做onreadystatechange，他可以偵測伺服器端狀態的改變。我們必須指定一個function，當伺服器回應完畢之後來執行他：

xmlhttp.open("Post", "test.asp", true);
xmlhttp.onreadystatechange = function(){
   if (xmlhttp.readystate==4 && xmlhttp.status==200){
     document.getRlementById("myDiv").innerHTML=xmlhttp.responseText;
   }
}
xmlhttp.send();

*藍字的部份下面會有說明

--FALSE
當asynchronous設為false時，不等伺服器回應不會繼續跑，因此程式碼會循序的執行。我們不必用到onreadystatechange，直接將要執行的function放在後頭即可。

xmlhttp.open("POST", test.asp", false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;