******** 送出資料使用 GET 或 POST ********

=== GET ===

GET method 顧名思義,原本是瀏覽器用來向 Web Server 請求取得一資料,
後來在應用上可以在 url 後方加上一些 query string 一同傳給 Web Server,
使 Web Server 取得這些資料來使用。

如果是簡單的應用,只是單方面向 Web Server 取得資料,
或者只需要提供一些訊息給 Web Server 來取得想要的資料,
就可以使用 GET 的方式傳送 request。
而使用 GET method 的重點就在於 url 後方的 query string

使用 GET method 傳遞時,先將要傳輸的資料編成名值對,例如 name=王大明、age=20,
然後附加到 url 後方,名值對之間以 & 串接起來,url 和 query string 用 ? 串接起來,
例如要將 name 為張三,age 為 38 的資料附加到 getform.php 的後方,
串起來就會變成「getform.php?name=張三&age=38」,
(通常「張三」這類字串會先用 Javascript 的 escape() 編碼成網路傳輸用的字元)
寫過這一類網頁應用程式的人應該對此用法不陌生,
差別在於不是透過 form,而是透過 request 送出資料而已。

編好 url 後,將資料傳入 request.open 當第二個引數,看起來就會像這樣:


request.open("GET","getform.php?name="+escape(name)
                  +"&age="+escape(age),true);

使用 GET 有一點必須注意。由於瀏覽器通常會使用 cache 儲存曾經 request 過的網頁,
當請求一個曾經取得過的網頁資料時(依據 url),瀏覽器會先從 cache 裡找資料出來,
就算將瀏覽器 refresh 更新網頁,還是只會從 cache 中找出來(至少 IE 會這樣做),
為了取得更新的資料,url 裡可以加上一個會經常變動的資料,
這樣一來,每次瀏覽器就會重新發出請求,而不會從 cache 找出資料;
做法上可以在 query string 中加上一個「時間」的資料,
例如透過 Javascript 可以加上類似

“&dummytime=”+new Date().getTime()

的程式碼(取得目前時間的長整數值),
如此一來每次都會產生不同的 url 字串,cache 中就找不到一樣的 url 而會重新發出請求了。

=== POST ===

POST method 顧名思義,原本就是用來將網頁中的表單資料「傳給」後端 Web Server。
POST method 跟 GET method 使用上有個不同的地方,就是可以傳輸的資料長度
GET 會將資料加到 url 中,通常是文字資料,
而各家瀏覽器都會限制 url 的資料長度不能超過某個上限(通常是 2000 左右);
POST 則會將資料包成一塊,然後整個傳給後端 Web Server,資料長度並沒有限制,
因此連圖片之類的 binary 檔案都可以上傳;
所以如果有大量資料要傳給後端 Web Server 的話,可以使用 POST method 來傳遞。

使用 POST 傳遞資料時,request.open 的第二個引數只要傳入處理程式檔名就好了,
實際要傳輸的資料則傳入 request.send 中。

一般來說,使用 POST method 還是傳遞名值對的字串資料,
此時還是將資料編成像是 query string 一般,用 & 隔開的名值對,
差別在於前面不用加上 ? 號(因為不用和 url 串接起來),
然後將整個字串資料傳給 request.send 當引數。

在使用 request.send 傳送資料之前,還有一件工作要做。
當使用 GET method 將資料附加在 url 後方傳送給 Web Server 時,
Web Server 知道所收到的資料是名值對的字串資料(因為同 url 都是字串),
所以可以正確處理所收到的資料;
但是使用 POST method 傳出資料時,Web Server 不知道包成一塊的資料形態是什麼,
有可能是 xml,也有可能是圖檔,也有可能是執行檔等等,
在 Web Server 無法得知資料形態的狀況下,就不知道該怎麼處理資料,
因此在瀏覽器送出資料前,要先指定這個 POST 所包的資料是哪一種形態。使用

request.setRequestHeader(String name,String value);

指定傳出資料的形態。例如名值對的資料形態就是 application/x-www-form-urlencoded,寫法為:


request.setRequestHeader("Content-Type",
              "application/x-www-form-urlencoded");

綜合上述說明,要使用 POST 傳送 name=張三,age=38 的資料可以如下:


request.onreadystatechange=updatePage;
request.open("POST","getform.php",true);
request.setRequestHeader("Content-Type",
              "application/x-www-form-urlencoded");
request.send("name="+escape(name)+"&age="+escape(age));

記得 setRequestHeader 一定要在 open 之後才能呼叫,否則會出現錯誤。