ASP.NET กับ jQuery: กลไก AJAX(Asynchronous JavaScript and XML)

สวัสดีครับ ชุดบทความของ ASP.NET กับ jQuery: กลไก AJAX(Asynchronous JavaScript and XML) โดยผมจะนำเสนอหัวข้อต่างๆ ดังต่อไปนี้

แนะนำให้รู้จัก AJAX กันเล็กๆน้อยๆก่อน

AJAX  อธิบายง่ายๆมันก็คือกลไกการติดต่อสื่อสารกันระหว่าง client กับ server แบบ Asynchronous หรือเว้ากันซื่อๆก็คือ ผม(client)สั่งงานคุณ(server)ไปแล้วโดยไม่รอคุณทำงานจนเสร็จ แต่ผมจะไปทำงานอย่างอื่นต่อ แล้วเมื่อคุณทำงานเสร็จเมื่อไรแล้ว ค่อยตอบผมกลับมาตรงนี้(callback method)ก็แล้วกัน และด้วยกลไกแบบนี้นี่เอง จึงทำให้ web page ที่มีการประยุกต์ใช้กลไกติดต่อสื่อสารด้วย AJAX แล้วไม่จำเป็นต้อง refresh page หรือ submit post form ทั้งหมดอีกต่อไป ซึ่งจะส่งผลให้ web application ของเราจะดูหรู่หรา และประหยัดข้อมูลที่ต้องส่งไปยัง server ขึ้นมาอีกเยอะเลยทิเดียว

เรามาเริ่มตัวอย่างแรกกันเลยดิกว่า

ตัวอย่างนี้ผมจะแสดงวิธีการ setup jQuery AJAX ใน web page ของ ASP.NET โดยจะใช้ AJAX เรียก  html content page ง่ายๆมาแทนที่พื้นที่ของปุ่มเมื่อมีการกดปุ่ม ดูภาพข้างล่าง

ก่อนจะเริ่มแสดงให้คุณดู ผมจะบอกว่าผมใช้ Firebug แสดง web page และ Visual Studio 2010 เป็นเครื่องมือพัฒนา web application เอาละ มาเริ่มทำตามผมดังนี้

1. สร้าง new web projects ในแบบ ASP.NET Empaty Web Application ตั้งชื่อว่า AjaxWeb

2. เพิ่ม web page เปล่าๆเข้าไป 1 page ใช้ชื่อเดิมๆมันไปเลยว่า Default.aspx ได้แล้วก็  เพิ่มพื้นที่(contentArea)เพื่อใช้แสดง content และเพิ่มปุ่ม(btnSubmit)เข้าไปในพื้นที่นี้ จะได้ไว้กดเพื่อให้กลไล request แบบ AJAX มันทำงาน

<form id=”form1″ runat=”server”>
<div align=”center”>
<fieldset style=”width: 400px; height: 200px;”>
<div id=”contentArea”>
<asp:Button ID=”btnSubmit” runat=”server” Text=”กดเลยเซ่” />
</div>
</fieldset>
</div>
</form>

3. เพิ่ม page html ธรรมดาๆชื่อว่า Content.htm และเติม content ตัวอย่างนี้ลงไป

<body>
<p>
<table cellpadding=”3″ cellspacing=”3″ id=”box-table-a”>
<tr><td>Title</td><td>Author</td><td>Genre</td></tr>
<tr><td>Test Driven Development: By Example </td><td>Kent Beck</td><td>Science</td></tr>
<tr><td>Planning Extreme Programming </td><td>Kent Beck</td><td>Science</td></tr>
<tr><td>Domain-Specific Languages </td><td>Martin Fowler</td><td>Science</td></tr>
<tr><td>Analysis Patterns: Reusable Object Models</td><td>Martin Fowler</td><td>Science</td></tr>
</table>
</p>
</body>

เติมกลไก jQuery AJAX

1. setup jQuery โดยใช้ NuGet จาก http://nuget.org/List/Packages/jQuery เมื่อติดตั้งแล้วเปิด NuGet Package Manager Console แล้วพิมพ์คำสั่งนี้ PM> Install-Package jQuery

2. include jquery เข้ามาใน ASP.NET page (ผมแนะนำให้คุณใส่ javascript ไว้ที่ด้านล่างสุดของ page ตามคำแนะนำที่ดีจากตรงนี้ Put Scripts at the Bottom)

<script src=”Scripts/jquery-1.6.2.js” type=”text/javascript”></script>

3. ใน script block jQuery function ของ document.ready() เรียก method ajaxSetup() เพื่อกำหนดค่า default properties ทั้งหมดของ Ajax

$.ajaxSetup({

4. ปิด cache โดยกำหนดให้เป็น false
cache: false,

5. กำหนดชนิดของการสื่อสารข้อมูลเป็น html
dataType: “html”,

6. กำหนด callback function เมื่อเกิด error จากการคิดต่อสื่อสารด้วย Ajax ไปยัง server ให้ alert ข้อความ
error: function (xhr, status, error) {
alert(‘มี error เกิดขึ้น: ‘ + error);
},

7. กำหนด timeout 30 วินาที คือเมื่อ client เรียกร้องบริการไปยัง server มันจะรอผมกลับมาแบบ asynchronous ไม่เกินเวลา 30 วินาที
timeout: 30000, //กำหนด Timeout เท่ากับ 30 วินาที

8. กำหนดชนิดของ HTTP request เป็นแบบ GET
type: “GET”,

9. กำหนด callback function HTTP request ก่อนส่ง และเมื่อสำเร็จแล้ว โดยแค่ log ไว้เฉยๆ
beforeSend: function () {
console.log(‘log นี้เกิดใน Ajax beforeSend’);
},
complete: function () {
console.log(‘log นี้เกิดใน  Ajax complete’);
}
});

เสร็จขั้นตอนการ set default properties ของ jQuery Ajax ละครับ ต่อไปใส่กลไล Ajax ให้กับปุ่ม btnSubmit กันต่อเลย

10. ใช้ jQuery selector กำหนด หรือ bind function กับ event click

$(“#btnSubmit”).click(function (e) {

11. หยุดกลไกปกติของการกดปุ่ม submit ซึ่งโดยปกติ(default) แล้วมันจะ post form ซึ่งเราไม่ต้องการกลไกแบบนั้น เราต้องการส่งแบบกลไก AJAX
e.preventDefault();

12. เรียก method ajax เพื่อส่ง HTTP request GET content page Content.htm ที่เราได้เตรียมไว้ พร้อมกับกำหนด callback function success โดยแทน content ที่ได้ไปที่ contentArea ที่ได้เตรียมไว้แล้วข้างต้น
$.ajax({
url: “Content.htm”,
success: function (data) {
$(“#contentArea”).html(“”).append(data);
}
});
});

สรุปว่าผมจะมี กลไก jQuery setup AJAX และ ผูก function เรียก AJAX ไว้กับ event click ของปุ่ม กดเลยเซ่ ได้ตามนี้

<script language=”javascript” type=”text/javascript”>
$(document).ready(function () {
$.ajaxSetup({
cache: false,
dataType: “html”,
error: function (xhr, status, error) {
alert(‘มี error เกิดขึ้น: ‘ + error);
},
timeout: 30000, //กำหนด Timeout เท่ากับ 30 วินาที
type: “GET”,
beforeSend: function () {
console.log(‘log นี้เกิดใน Ajax beforeSend’);
},
complete: function () {
console.log(‘log นี้เกิดใน  Ajax complete’);
}
});

$(“#btnSubmit”).click(function (e) {
e.preventDefault();
$.ajax({
url: “Content.htm”,
success: function (data) {
$(“#contentArea”).html(“”).append(data);
}
});
});
});
</script>

OK เสร็จแล้วกับวิธีเติมกลไก AJAX ด้วย jQuery ง่ายๆเพียงเท่านี้ web page ของคุณก็ไม่จำเป็นต้อง refresh page อีกต่อไป แล้วค่อยๆติดตาม บทความในชุด ASP.NET กับ jQuery: กลไก AJAX นี้ในลำดับต่อไปครับ

SourceCode

ขอบคุณครับ 🙂

Advertisements

#asp-net, #javascript, #jquery