iT邦幫忙

DAY 14
5

MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松系列 第 14

MIS2000Lab.的「HTML5 認證考試,從零開始」#14--AJAX ( XHR,XmlHttpRequest)

上一篇文章: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


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#13--採用JavaScript進行驗證
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#15-- AJAX ( jQuery )
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

尚未有邦友留言

立即登入留言