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

摘要:MIS2000Lab.的「HTML5 認證考試, 從零開始」#14 / #15 -- AJAX ( XHR,XmlHttpRequest) 與 jQuery




 

 

上一篇文章:MIS2000Lab.的「HTML5 認證考試,從零開始」#12 / #13 -- HTML5 與 JavaScript輸入驗證

本文內容,將會在2014年底,碁峰出版社推出的HTML5新書裡面

 
不好意思,因為內容將會出書,所以目前公開的東西都經過大量簡化
日後出書的話,針對每一個方法、屬性都會仔細解說
 
9789863475750

HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

  • 出版商:碁峰
  • 出版日期:2015-04-09
  • 台幣定價:
  • $480
  • 售價:7.9 折 $379
  • 語言:繁體中文
  • ISBN:9863475750
  • ISBN-13:9789863475750
 
 
 
 
 
有別於ASP.NET AJAX使用了現成工具 UpdatePanel,
這裡要跟大家分享的是XHR ( XmlHttpRequest ),對啦!自己寫程式
 
瀏覽器(Client端,使用者端、前端)與Web Server(伺服器端,後端)的互動
是經由HTTP要求(request)的發送與收取來進行。
 
即使您在瀏覽器輸入一段URL網址,都是針對Web Server發出一個要求。
Web Server接收到您的要求(request)之後,會回應(response)網頁給您瀏覽。
 
瀏覽器收到HTML架構文件的回應之後,會轉成DOM(doctment Object Model)然後呈現出畫面
 

 

 

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錯誤狀態碼,請參閱
 
 
前面講完了 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,
或是您可以參閱我以前的文章:
 
 
 
==== 處理「非同步」的回應 ====
 
 
下面的程式碼是用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 ******
 

本文內容,將會在2014年底,碁峰出版社推出的HTML5新書裡面

不好意思,因為內容將會出書,所以目前公開的東西都經過大量簡化
日後出書的話,針對每一個方法、屬性都會仔細解說
 
 
 
上面提到 JavaScript寫AJAX,XHR,XmlHttpRequest
 
這裡要分享的是 jQuery的寫法。
 
 
jQuery提供了ajax()函式比前面提及的XMLHttpReqyest物件更好操作。
 
原理雷同,但程式碼與步驟更簡潔。
 
 
==== jQeury傳遞非同步的要求 ====
 

$.get(url網址, body, function名稱);  
// 第一個參數是URL網址。  
// 第二個參數body是選填、非必要參數。  
// 第三個參數是AJAX callback之後要執行的function名稱。  
 
您也可以改用post來做,取代get。在此不贅述。
 
如果要處理JSON資料,請用$.getJSON()方法。
參數跟前面相同,不過專門處理callback傳回的JSON格式,而非純文字。

$.getJSON(url網址, body, function名稱);  
// 第一個參數是URL網址。  
// 第二個參數body是選填、非必要參數。  
// 第三個參數是AJAX callback之後要執行的function名稱。  

 

==== 使用ajax()函式 ====
 
jQuery的ajax()函式新創一個XMLHttpRequest物件、傳遞要求(request)與
接收「非同步」的回應(asynchronous responses)。
 
如果執行成功,就會執行done()函式,失敗就會執行fail()函式。
 

$.ajax({  
url: '/luckydip/enter',  
type: 'GET',  
timeout: 12000,  //單位:毫秒。  
dataType: 'text'  
  
}).done(function( responseText ){  
$('#answer').text( responseText );  
// 註解:把成功後的回應寫在...裡面。 
}).fail(function() { 
alert('錯誤!請您務必填寫資料!'); 
}); 
// 註解:本程式碼將會從 /luckydip/enter這段URL網址,傳回一個文字格式的資料。
// 傳回值將會呈現在網頁中某一個id名為answer的元素(HTML標籤)裡面。 

 
更完整的資訊請看 http://api.jquery.com/jquery.ajax/

 

相關範例:

[入門範例] ASP.NET Web Service (asmx) 與 jQuery AJAX

 

 

==== 用jQuery將表單資料序列化(serializing)====
 
延續前面的範例並修改如下。我們使用$.ajax()函式送出表單資料給遠端的Server,
 
使用HTTP POST方法並加入JSON格式的data屬性
以便將資料以參數列表(parameter list)的方式傳遞出去。
 

$.ajax({  
url: '/luckydip/enterWithName',  
type: 'POST',  
timeout: 12000,  //單位:毫秒。  
dataType: 'text'  
data: {  
firstName: myForm.fname.value,  
lastName: myForm.lname.value  
});  
});  

 

另外兩種作法
  •  .serialize()方法,如同查詢字串(Query String)的文字格式產生一系列的「欄位」與「值」。
  •  
  •  .serializeArray()方法,產生JSON格式的陣列來表示「欄位」與「值」。
 
 
 
 
 
 
 

本文內容,將會在2014年底,碁峰出版社推出的HTML5新書裡面

 
不好意思,因為內容將會出書,所以目前公開的東西都經過大量簡化
日後出書的話,針對每一個方法、屬性都會仔細解說
 
 
下一篇文章

 
 
 
 
 
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材
9789863475750

HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

  • 出版商:碁峰
  • 出版日期:2015-04-09
  • 台幣定價:
  • $480
  • 售價:7.9 折 $379
  • 語言:繁體中文
  • ISBN:9863475750
  • ISBN-13:9789863475750
  •  
  • 語言:繁體中文
  • 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

 
 

 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學,遠距教學 (Web Form 約 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學,遠距教學 (ASP.NET MVC 約 140hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.tw  或  school (at) mis2000lab.net

 (1) 第一天 ASP.NET MVC5 完整影片(5.5小時 / .NET 4.x版)免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片(3小時 / .NET Core 6.0~8.0)免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。 

.........   facebook社團   https://www.facebook.com/mis2000lab   ......................

.........  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載,請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)。

...................................................................................................................................................... 

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課