上一篇文章：http://ithelp.ithome.com.tw/question/10158769

有別於ASP.NET AJAX使用了現成工具 UpdatePanel，
這裡要跟大家分享的是XHR ( XmlHttpRequest )，對啦！自己寫程式

瀏覽器（Client端，使用者端、前端）與Web Server（伺服器端，後端）的互動
是經由HTTP要求（request）的發送與收取來進行。

即使您在瀏覽器輸入一段URL網址，都是針對Web Server發出一個要求。
Web Server接收到您的要求（request）之後，會回應（response）網頁給您瀏覽。

瀏覽器收到HTML架構文件的回應之後，會轉成DOM（doctment Object Model）然後呈現出畫面

[img=415,324]http://ithelp.ithome.com.tw/upload/images/20141009/201410091113485435fd6c250af_resize_600.jpg[/img]

XMLHttpRequest物件原是IE 5的內建物件，

但現在已經普及到各大瀏覽器都予以支援，有人簡稱為XHR。

HTML5提供XMLHttpRequest物件提供一個程式的介面（interface）用來發送與收取HTTP要求（request）。

它不僅可以觸發HTTP GET運算外，還可以調用POST和HEAD要求。

XMLHttpRequest物件可以傳回text（純文字）、JSON和XML數據，並追蹤HTTP操作的狀態。

==== 使用XMLHttpRequest物件存取遠端資料 ====

下面的JavaScript程式就是創建一個XMLHttpRequest物件。

var request = new XMLHttpRequest();
// 註解：為了避免不同瀏覽器造成的差異，我個人建議您使用jQuery來處理更方便，下一篇文章會解說。

==== 處理HTTP錯誤 ====

HTTP狀態碼如果傳回200代表成功，如果傳回404表示找不到資源（檔案或網頁）。

如果您要取得更多HTPP錯誤狀態，可以使用這段程式碼：

function tryMyLuck() {
var request = new XMLHttpRequest();
request.open("GET", "/luckydip/enter");
request.send();
...
// 在此要等待HTTP狀態碼，傳回後才能繼續做。
...
if (request.status != 200) {
alert("HTTP錯誤狀態碼：" + request.status + " - " + request.statusText);
}
...
}

完整的HTTP錯誤狀態碼，請參閱

http://zh.wikipedia.org/wiki/HTTP%E7%8A%B6%E6%80%81%E7%A0%81

前面講完了 Request，底下要介紹回應（Response）

==== 處理回應（Response） ====

使用request物件的getResponseHeader()函式取得回應的資料型態，也就是下面程式提到的"Content-Type"

var request = new XMLHttpRequest();
...

function getResponse(request) {
var type = request.getResponseHeader("Content-Type");

switch (type) {
case "text/xml" :
return request.responseXML; 
// Server端傳回XML。
default :
return request.responseText;
// Server端傳回文字（或HTML、JSON、XML、CSV）。
}
}

當然，您也可以使用 JSON.parse()處理JSON格式

前面有簡單介紹過JSON，或是您可以參閱我以前的文章：

http://www.dotblogs.com.tw/mis2000lab/archive/2013/10/24/json_jquery.aspx

==== 處理「非同步」的回應 ====

下面的程式碼是用onreadystatechange事件的callback來抓取readystatechange事件。

XMLHttpRequest物件有一個readyState屬性，用不同數值 (0~4)代表各種狀態：

request.onreadystatechange = function() {
if (request.readyState === 4) {
var response = JSON.parse(request.responseText);
...
}
};

==== 透過要求（Request）傳送資料 ====

使用HTTP GET要求（request）從Web Server傳資料給瀏覽器（Client端），您也可以用HTTP POST要求從瀏覽器傳送資料給Web Server。

使用POST方法的話，在XMLHTTPRequest物件的open()必須特別註明為POST參數（詳見下面程式），

而且呼叫send()有一個body參數（選填、非必要參數），body可以是字串或是Server可解析的任何格式。

假如您使用GET來傳遞資料，body參數可以包含參數以便定義Server回傳的資料。不用參數也行，body便會設定為null（空值）。

var request = new XMLHttpRequest();
...
request.open("POST", url);
request.send(body);

//倘若要傳遞或是把物件「序列化」成JSON格式，請用JSON.stringify()函式。

下一篇文章將會介紹jQuery來做AJAX，不要走開，馬上回來。

http://ithelp.ithome.com.tw/question/10159099

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期：2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item_id=1003110