|
|
|
ละเลง ASP.net ด้วย Ajax ภาค XMLHttpRequest
| ส่วนสำคัญของ AJAX ที่ทำหน้าที่ในการควบคุมการแสกเปลี่ยนข้อมูลระหว่าง Web Browser กับ Server จะใช้ XMLHttpRequest Object ครับ โดยใช้ Javascript เขียน Code เพื่อควบคุม XMLHttpRequest Object โดยจะขึ้นอยู่กับ Web Browser แต่ละตัวซึ่งจะใช้ต่างกันครับ ใน IE(Internet Explorer) จะใช้ส่วนที่เรียกว่า ActiveX Object และ XMLHttpRequest Object ใน Browser ตัวอื่นที่ไม่ใช่ IE ครับ | | | Method และ Properties ของ XMLHttpRequest Object | | |
Method | | abort() | หยุดความต้องการปัจจุบัน | getAllResponseHeader() | รายงานค่า Header ทั้งหมดที่ตอบกลับมาสำหรับ HTTP Request | | Open("method","url",Asynch) | | กำหนดการติดต่อ Server | | - method :: ระบุรูปแบบการจัดส่งข้อมูล เช่น "POST" , "GET" | | - url :: url ของเอกสารที่ต้องการร้องขอข้อมูล | | - Asynch :: ระบุรูปแบบการทำงานแบบ Asynchonous เป็น Boolean เท่านั้น |
| | send(Content) | ส่ง Request ไปยัง Server | | setRequestHeader("Header,"Value") | กำหนด Header และค่าของ Header ใน HTTP Request |
Properties | | onreadystatechange | ตัวควบคุมเหตุการณ์ที่เกิดการเปลี่ยนแปลงของสถานะการทำงาน | | readystate | | ตัวเลขแสดงสถานะการทำงาน | | 0 :: ยังไม่เริ่มทำงาน | | 1 :: กำลังโอนถ่ายข้อมูล | | 2 :: โอนถ่ายข้อมูลเสร็จแล้ว | | 3 :: อยู่ระหว่างการทำงาน | | 4 :: เสร็จสิ้นการทำงาน |
| | responseText | Text Data ที่ส่งมาจาก Server | | responseXML | XML Data ที่ส่งมาจาก Server | | status | รหัสแสดงสถานะของข้อมูลที่ส่งมาจาก Server เช่น 200 คือ ตกลง และ 400 คือ ไม่พบข้อมูลที่ต้องการ | | statusText | รหัสข้อความที่ส่งมาจาก Server เช่น "OK" หรือ "NOT FOUND" |
| | | | | | ตัวอย่างหารใช้งาน XMLHttpRequest Object | | | ในตัวอย่างนี้จะเปนตัวอย่างการใช้งาน XMLHttpRequest แบบง่ายๆนะครับ จะมี webform กับ xml อย่างละไฟล์เท่านั้นครับ | | | | | | ็
| Default.aspx | ส่วนนี้เปนส่วนของ Javascript
<script language="jscript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){ //ตรวจสอบความสามารถในการใช้งาน ActiveX ของ Browser
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //ในกรณีที่เปน IE
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest(); //ในกรณีที่ไม่ใช่ IE
}
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp("GET","defaultXML.xml",true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState == 4){ //ตรวจสอบสถานะของ request
if(xmlHttp.status == 200){ //ตรวจสอบการมีอยู่ของข้อมูล
alert('ข้อความตอบสนองจาก Server :: ' + xmlHttp.responseTEXT);
}else{
alert('Status :: Reject');
}
}
}
</script>
ส่วนนี้เปนของ Body
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Click" OnClientClick="startRequest()" /></div>
</form> | | | | defaultXML.xml | | Message From Server <!-- ตรงนี้ใส่ข้อความอะไรก้อได้คับ --> |
| | | เสร็จแล้วลอง Click ที่ปุ่มดูนะคับ |
|
| Create Date : 20 กรกฎาคม 2549 | | |
| Last Update : 20 กรกฎาคม 2549 15:36:08 น. |
| Counter : 520 Pageviews. |
| |
|
 |
|
|
|
ละเลง ASP.net ด้วย AJAX ภาคกำเนิด
เมื่อพูดถึง web application ในตอนนี้แล้วคงจะมีคนรู้จัก AJAX ขึ้นมาบ้างแล้ว หรือใครที่นึกไม่ออกว่า AJAX หน้าตาเป็นอย่างไร ดูง่ายๆก้อ Mail Box ของ Gmail ไงคับ หรือถ้ายังไม่ชัดก้อในเว๊บไซท์ของ Asustek ก้อมีครับตรงส่วนการค้นหาผลิตภัณฑ์ น่ะคับ ลองดูแล้วกันนะครับ
AJAX : Asynchronous Javascript And XML เป็นเทคนิคการพัฒนา web application ให้มีความสามารถในการตอบสนองต่่อผู้ใช้งานได้ดีขึ้น ซึ่งโดยปรกติแล้วเมื่อ web page มีการเปลี่ยนแปลงข้อมูลอยู่เสมอๆ จะถูกสร้างด้วย Server Side Script หรือ CGI ซึ่งผู้ใช้งานจะต้องร้องขอหน้าเว๊บเพจนั้นใหม่ เพื่อที่จะจัดเตรียมข้อมูลที่ต้องการ ซึ่งทำให้การทำงานของ web application ค่อนข้างช้า เพราะผู้ใช้งานจะต้อง reload หน้าเว๊บเพจหน้านั้นใหม่ แต่ AJAX จะทำให้การทำงานของ web application ลื่นไหลได้มากขึ้น เพราะผู้ใช้งานไม่ต้องทำการ reload หน้าเว๊บเพจใหม่ทั้งหมด เพียงแค่่ร้องขอเพียงข้อมูลที่ต้องการ ซึ่งจะถูกส่งผ่านมาทาง XMLHttpRequest ในรูปของ XML เท่านั้น ซึ่งเล็กมากเมื่อเทียบกับหน้าเว๊บเพจทั้งหน้า | | | | | | AJAX นั้นจะประกอบด้วยเทคโนโลยีที่สำคัญดังนี้คับ | | | - Xhtml และ CSS ใช้ในการแสดงผลให้กับผู้ใช้งาน
- Document Object Model และ Javascript ใช้ในการจัดการและประมวลผลข้อมูล
- XMLHttpRequest ใช้ในการร้องขอข้อมูลจาก Server
- XML ใช้เป็นโครงสร้างของข้อมูลต่าง
| | |  | | ภาพเปรียบทียบการทำงานระหว่าง web application แบบเดิมกับแบบที่ใช้ AJAX |
| | | | | | Reference :: Wigipedia -> AJAX | | | |
|
| Create Date : 18 กรกฎาคม 2549 | | |
| Last Update : 20 กรกฎาคม 2549 15:33:58 น. |
| Counter : 294 Pageviews. |
| |
|
| |
|
|
|
|
|
|
|
Location :
กรุงเทพ Thailand
[Profile ทั้งหมด]
|
 ฝากข้อความหลังไมค์
 Rss Feed
 ผู้ติดตามบล็อก : 1 คน [?]
|
หวัดดีคับ ยินดีต้อนรับเข้าสู่ Blog ครับ
Content ของ Blog นี้ส่วนใหญ่จะเปน Programming จะพยายามอัพ Content ใหม่ๆให้เรื่อยๆนะครับ
|
|
|
|
|
|
|
|
| |
|
|
