Hello World With Ajax

Hello World With Ajax

เอ้า ! เร่เข้ามา… เร่เข้ามา มือใหม่อยากเขียน web application ให้หล่อๆ สวยๆ อยากได้แบบคลิกแล้วไม่ต้องโหลดหน้าเว็บซ้ำซาก จำเจ อยากได้แบบคลิกแล้วไอ้นู้นมา ไอ้นี่หายไปโอ้ย … หล่อมาก เห็นเขาเรียกมันว่า Ajax ( Asynchronous JavaScript And XML ) ไม่ขออธิบายที่มาหรือประวัตินะครับเพราะมีให้อ่านกันซะจนเยอะเยะ ขอสอนเลยแล้วกัน อิอิ ไม่อยากรอ  โดยจะแบ่งเป็นสองหน้าครับ หน้าแรกคือ index.php และหน้า test.php โดยเราเขียนโค้ดที่หน้า index.php แล้วทำการเรียกค่าจากหน้า text.php  แล้วนำมาแสดงที่หน้า index.php โดยไม่มีการโหลดหน้าเพจครับ เริ่มแรกเลยจัดโค้ดนำไปแล้วจะบอกว่าอะไรเป็นอะไรเน้อ

โค้ดหน้า index.php

[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>
[/php]

มันอะไรกันบ้างเนี้ย !!! ใจเย็นเราต้องใจเย็นๆ หายใจเข้าลึกๆ แล้วค่อยดูไปทีละบรรทัด ตอนแรกที่ผมทำ hello world ของ Ajax ผมก็คิดว่าทำไมมันเยอะเยะจัง แต่ถ้าคุณ มองจริงๆก็ไม่มีอะไรยากเกินกว่าเราครับเอาล่ะมาดูกัน > 3 < /

อับดับแรกช่วงโค้ดตรงนี้

[php]
var http = false;
if(window.XMLHttpRequest){
http = new XMLHttpRequest();
} else if(window.ActiveXObject){
http = new ActiveXObject("Microsoft.XMLHTTP");
}
[/php]

ใหุ้คุณคิดง่ายๆครับเวลา Ajax ทำงานนั้นระหว่างการส่งข้อมูลไปมาต้องมีสื่อกลางในการส่ง สมมติให้เป็น “ท่อ” แล้วกัน โค้ดตรงจุดนี้เป็นการเช็คว่า browser ของผู้ที่เปิดเว็บเรานั้นรองรับการทำงานของ Ajax ได้หรือไม่ถ้าถ้า ก็จะทำการต่อท่อ โดยท่อนั้นเราให้ชื่อว่า http ครับ โดยส่วนใหญ่แล้ว browser ในปัจจุบันใช้ได้เกือบหมดแล้วถ้าคุณไม่อยู่ในยุคอดีต โดยเราจะเช็คว่า
window.XMLHttpRequest ตัวนี้มีหรือไม่ถ้าไม่มีก็ไปเช็คอีกเงื่อนไขว่าไปใช้ของ ActiveXObject ซึ่งอันนี้ของเป็นของ IE ครับในส่วนต่อมา

[php]

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);
}
}
[/php]
Note : ตัวอักษรเล็กใหญ่ให้พิมพ์เหมือนนะครับ

จากโค้ดด้านบนคือฟังก์ชั่นต้องทำการเรียกถึงจะทำงานครับ จะเห็นได้ว่าเราได้ทำการเรียกฟังก์ชั่นนี้ที่

[php]
<input type="button" value="GET Data" onclick="getData(‘test1.php’,’div1′)" />
[/php]

ซึ่งตรงนี้เราได้ส่งไปสองค่าคือค่า 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]

<?php

echo ‘Hello world with Ajax’;

?>

[/php]

ก่อนรันหน้า 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

ถ้าคุณชอบบทความในเว็บนี้ และอยากสนับสนุนเรา เพียงแค่คุณสมัครรับข่าวสารด้านล่างจะได้รับสิทธิ์พิเศษก่อนใคร เราสัญญาว่าจะส่งบทความที่เป็นประโยชน์ต่อคุณอย่างแน่นอนครับ

Loading

Comments

  1. เยี่ยมครับ รออ่านกล่อง login แบบ ajax :D

    เพิทไม่ค่อยชอบมาเขียนโค้ด Ajax สด ๆ อะครับ ชอบใช้ Ajax built-in ใน jQuery มากกว่า ไม่ต้องจำโค้ดมาก

    1. ใช่ครับพี่ก็กำลังจะเขียนแหละแต่ว่าจะเขียนพวกพื้นฐานก่อนเพราะว่ามีหลายคนจะใช้พวกเร็วๆ ง่ายๆ แต่ไ่ม่รู้ที่มาอ่ะครับ จึงอยากสอนพื้นๆเบสิกๆ ก่อนครับ

  2. พี่ตองลองใช่ jQuery ดิ สบายกว่าเยอะ ผมกำลังศึกษาอยู่เหมือนกัน

    1. เดี๋ยวไปทีละขั้นครับเพราะว่าจะค่อยๆสอน เพื่อคนไม่ทราบว่ามันทำงานอย่างไรครับผม

  3. ว้าว มีตัวอย่าง อย่างนี้ดูเข้าใจง่ายดีครับ

    ขอบคุณครับ ผมก็กำลังศึกษาการทำอยู่เหมือนกันจะแวะเข้ามาบ่อยๆครับ

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Message us

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ปฎิเสธทั้งหมด
Manage Consent Preferences
  • คุกกี้ที่จำเป็น
    Always Active

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

  • คุกกี้ที่จำเป็น

    คุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

บันทึก