การพัฒนา Web Application แบบ Ajax ด้วย Jquery

Jquery เป็น javascript library ที่ได้รับความนิยมมากในการพัฒนา Web Application แบบ ajax ( ajax คือ รูปแบบการพัฒนา Web Application ที่ใช้ javascript รับส่งข้อมูลกับโปรแกรมที่อยู่ฝั่ง server  ทำให้ Web Application สามารถทำงานได้เร็วขึ้น )

ตัวอย่างขั้นตอน การพัฒนา Web Application แบบ Ajax ด้วย Jquery 

โดยตัวอย่างนี้จะเป็นการรับค่าปี พ.ศ. จาก text box แล้วนำไปแปลง เป็นปี ค.ศ. ในโปรแกรมที่เขียนด้วย PHP ที่ฝั่ง Server

1. สรา้งไฟล์ index.html ขึ้นมา

2. เขียน Code เรียกใช้ jquery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

3. สร้าง text box รับค่าปี พ.ศ. โดย กำหนดให้มี id เป็น year1

ปี พ.ศ. <input type="text" id="year1" /> 

4.สร้างปุ่มกดสำหรับสั่งให้แปลงปี พ.ศ. เป็น ค.ศ. โดยกำหนดให้เมื่อคลิกแล้วระบบจะเรียกใช้ function call_ajax() พร้อมทั้งเว้น บรรทัด ด้วย tag <br />

<input type="button" value="OK" onclick="call_ajax()" /></br>

5. สร้างส่วนแสดงปี ศ.ศ.
ปี ค.ศ. <span id="year2"></span>
6. ใส่ code javascript ส่วนที่เป็น ajax ของ jquery 

<script type="text/javascript">

function call_ajax()
{
//แสดงข้อความบอกให้รอขณะส่งข้อมูลไป
$("#year2").html("กรุณารอสักครู่....");
$.ajax({ //เรียกใช้ function ajax ของ  jquery
//ส่งค่าปี พ.ศ. เป็นแบบ GET ให้ไฟล์ ajax.php
url: "ajax.php?year="+$("#year1").val(),
success: function(data){//รับค่าที่ส่งกลับมาจากไฟล์  ajax.php
$("#year2").html(data);// แสดงปี ค.ศ.ที่รับมา (ตัวแปร data) 
}
});
}

</script>


7. สร้า้งไฟล์ ajax.php ซึ่งรับค่า ปี พ.ศ. แล้วแปลงเป็นปี ค.ศ. แล้วส่งค่าลับไป
<?php
$year=$_GET["year"];//รับค่าปี พ.ศ. 
$year-=543;//เปลี่ยนค่าปี พ.ศ. เป็น ค.ศ.
echo $year;//ส่งค่าปี ค.ศ. กลับไป
?>

รูปภาพตัวอย่าง

ก่อนคลิก ok

หลังคลิก ok