Hello World With Ajax
เอ้า ! เร่เข้ามา… เร่เข้ามา มือใหม่อยากเขียน web application ให้หล่อๆ สวยๆ อยากได้แบบคลิกแล้วไม่ต้องโหลดหน้าเว็บซ้ำซาก จำเจ อยากได้แบบคลิกแล้วไอ้นู้นมา ไอ้นี่หายไปโอ้ย … หล่อมาก เห็นเขาเรียกมันว่า Ajax ( Asynchronous JavaScript And XML ) ไม่ขออธิบายที่มาหรือประวัตินะครับเพราะมีให้อ่านกันซะจนเยอะเยะ ขอสอนเลยแล้วกัน อิอิ ไม่อยากรอ โดยจะแบ่งเป็นสองหน้าครับ หน้าแรกคือ index.php และหน้า test.php โดยเราเขียนโค้ดที่หน้า index.php แล้วทำการเรียกค่าจากหน้า text.php แล้วนำมาแสดงที่หน้า index.php โดยไม่มีการโหลดหน้าเพจครับ เริ่มแรกเลยจัดโค้ดนำไปแล้วจะบอกว่าอะไรเป็นอะไรเน้อ
โค้ดหน้า index.php
<html>
<head>
<title> :: Hello world with Ajax :: </title>
<script type="text/javascript">
var http = false;
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
} else if(window.ActiveXObject){
http = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(data,divID){
if(http) {
var obj = document.getElementById(divID);
http.open("GET",data);
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200) {
obj.innerHTML = http.responseText;
}
}
http.send(null);
}
}
</script>
</head>
<body>
<h1> Javascript กับ Ajax </h1>
<form>
<input type="button" value="GET Data" onclick="getData('test1.php','div1')" />
</form>
<p>This is massage from server : <span id="div1">...</span></p>
</body>
</html>
มันอะไรกันบ้างเนี้ย !!! ใจเย็นเราต้องใจเย็นๆ หายใจเข้าลึกๆ แล้วค่อยดูไปทีละบรรทัด ตอนแรกที่ผมทำ hello world ของ Ajax ผมก็คิดว่าทำไมมันเยอะเยะจัง แต่ถ้าคุณ มองจริงๆก็ไม่มีอะไรยากเกินกว่าเราครับเอาล่ะมาดูกัน > 3 < /
อับดับแรกช่วงโค้ดตรงนี้
var http = false;
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
} else if(window.ActiveXObject){
http = new ActiveXObject("Microsoft.XMLHTTP");
}
ใหุ้คุณคิดง่ายๆครับเวลา Ajax ทำงานนั้นระหว่างการส่งข้อมูลไปมาต้องมีสื่อกลางในการส่ง สมมติให้เป็น “ท่อ” แล้วกัน โค้ดตรงจุดนี้เป็นการเช็คว่า browser ของผู้ที่เปิดเว็บเรานั้นรองรับการทำงานของ Ajax ได้หรือไม่ถ้าถ้า ก็จะทำการต่อท่อ โดยท่อนั้นเราให้ชื่อว่า http ครับ โดยส่วนใหญ่แล้ว browser ในปัจจุบันใช้ได้เกือบหมดแล้วถ้าคุณไม่อยู่ในยุคอดีต โดยเราจะเช็คว่า
window.XMLHttpRequest ตัวนี้มีหรือไม่ถ้าไม่มีก็ไปเช็คอีกเงื่อนไขว่าไปใช้ของ ActiveXObject ซึ่งอันนี้ของเป็นของ IE ครับในส่วนต่อมา
function getData(data,divID){
if(http) {
var obj = document.getElementById(divID);
http.open("GET",data);
http.onreadystatechange = function(){
if(http.readyState == 4 && http.status == 200) {
obj.innerHTML = http.responseText;
}
}
http.send(null);
}
}
Note : ตัวอักษรเล็กใหญ่ให้พิมพ์เหมือนนะครับ
จากโค้ดด้านบนคือฟังก์ชั่นต้องทำการเรียกถึงจะทำงานครับ จะเห็นได้ว่าเราได้ทำการเรียกฟังก์ชั่นนี้ที่
<input type="button" value="GET Data" onclick="getData('test1.php','div1')" />
ซึ่งตรงนี้เราได้ส่งไปสองค่าคือค่า data ในฟังก์ชั่นจะรับ test1.php และ divID จะรับค่า div1 และทำการเช็คว่า http "ท่อ" ของเรานั้นมีหรือไม่พร้อมใช้หรือเปล่าถ้ามีท่อก็ให้เข้าเงื่อนไข โดยกำหนดตัวแปร obj ให้เป็น tag ที่มี id เป็น div1 จากที่รับค่ามาครับ และบรรทัดต่อไปคือการเรียกหน้าโดยส่งค่าแบบ GET และหน้าที่เรียกก็คือ test1.php เสร็จแล้วบรรทัดต่อมานั้น
เราเรียกการเขียนแบบนี้ว่าฟังก์ชั่นอิน ( function in ) จะเป็นฟังก์ชั่นที่ใช้แค่ตรงจุดนี้เท่านั้นไม่สามารถเรียกจากตรงจุดอื่นได้ โดยในฟังก์ชั่นอินนั้น เราได้ทำการเช็คค่าทุกๆครั้งที่ http.onreadystatechange ได้มีการเปลี่ยนค่าจะมีการเช็คค่าในฟังก์ชั่นอินคือ http.readyState == 4 "และ" http.status == 200 หรือไม่ ถ้ามีการเปลี่ยนจนเข้าเงื่อนไขแล้วจะทำการนำค่าที่ได้จากหน้าที่เราเรียก test1.php มาใส่ใน "ระหว่าง" tag ที่มี id เป็น div1 ก็จะจบการทำงานตรงจุดนี้ แต่ว่า กำลังสงสัยสินะว่าแล้ว http.send(null) เนี้ยคืออะไร มันคือการส่งแบบ POST ครับซึ่งต้องอดใจรออีกหน่อยแล้วจะหาตัวอย่างมาให้ดูครับ จากฟังก์ชั่นนี้การทำงานของ Ajax ได้จบลง พร้อมกับนำค่าจากหน้า test1.php มาใส่ใน "ระหว่าง" tag span ที่มี id = div1 ครับ
และหน้า text.php มีเท่านี้เอง
<?php echo 'Hello world with Ajax'; ?>
ก่อนรันหน้า index.php ของเราจะเป็นอย่างนี้ครับ
เมื่อเราคลิกที่ปุ่ม GET Data แล้วจะได้ดังรูปด้านล่างครับ
โอ้ว... หล่อโค-ตะ-ระ เอ้าละ ! วันนี้ก็ได้เริ่มก้าวแรกกับ Ajax แล้ว ส่วนทำไมไม่สอนแบบ post เอาไว้บทหน้าจะสอนแบบ login แบบ ajax แล้วกันรอติดตามคร้าบบผม
จะได้หล่อเพิ่มไปอีก ฮ่าๆๆๆ แนะนำหรือสอบถามได้ที่ comment โลด !!!
เพิ่มเติม
สำหรับบางคนที่สงสัยและถามผมนะครับเกี่ยวกับ onreadystate กับ Status ว่ามันมีสถานะอะไร เป็นเลขอะไรแล้วมีความหมายว่าอย่างไร
readyState มีด้วยกัน 5 สถานะครับมี 0 - 4 โดยแต่ละเลขมีความหมายดังนี้
- 0 หมายถึง การทำงานยังไม่เริ่ม ( Unintialized )
- 1 หมายถึง กำลังดาวน์โหลดข้อมูล ( Loading )
- 2 หมายถึง ดาวน์โหลดข้อมูลเสร็จเรียบร้อยแล้ว ( Loaded )
- 3 หมายถึง เมื่อเกิดการตอบโต้กับอ็อบเจกต์ http "ท่อ" ขณะที่ยังดาวน์โหลดข้อมูลไม่เสร็จ ( Interactive )
- 4 หมายถึง เสร็จสิ้นการทำงานโดยสมบูรณ์ ( Complete )
ทุกการเชื่อมต่อแต่ละครั้ง readyState จะเปลี่ยนแปลงสถานะ 1->2->3->4 ตามลำดับ
และในส่วนของ status นั้นจะเป็นค่าอ่านได้จากที่นี่ครับ status
บทความที่เกี่ยวข้อง
You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.
Pingback: oxygenyoyo | login by Ajax | oxygenyoyo