jQuery Ajax : jQuery and Ajax |
jQuery Ajax รูปแบบคำสั่งการใช้ jQuery กับ Ajax บน jQuery Library Framework
jQuery กับ Ajax ใน jQuery เองก็ได้ออกแบบ function ที่ทำงานร่วมกับ Ajax ได้อย่างมีประสิทธิ์ภาพ ด้วย Code คำสั่งที่สั้นมาก ๆ และยังไม่ต้องกังวลเรื่องปัญหา Cross ของ Web Browser อีกด้วย ด้วยประสิทธิ์และการออกแบบที่เป็นมาตรฐานและถูกต้องตามหลักของ W3C CSS Validation รองรับการทำงานทุกเว็บบราวเซอร์ และสามารถทำงานได้รวดเร็ว ด้วย Library ไฟล์ขนาดเล็ก องค์กรหลายๆ แห่งได้ประกาศใช้ jQuery เป็น Core หลักในการทำงานร่วมกับ Ajax เช่น Google ได้ประกาศใช้ Library ของ jQuery ใช่ร่วมกับ Application หลายตัวทีได้พัฒนาขึ้น Open Source ดัง ๆ หลายตัว หรือแม้กระทั้ง Microsoft ก้ได้นำ jQuery มาเป็นส่วนหนึ่งของ Framework ที่ใช้ในการพัฒนา ร่วมกับ ASP.NET (Web Application) ที่ทำงานร่วมกับ Ajax ด้วยเหตุผลและความในสามารถของ jQuery นี่เอง คาดว่าในอนาคต jQuery นั้นมีความจำเป็นมาก ๆ ที่จะต้องเรียนรู้ และ ศึกษาการใช้งานอย่างจริงจัง เพื่อสร้างเสริมประสบการณ์และความรู้ใหม่ ๆ ในการพัฒนา Web Application ในรูปแบบต่าง ๆ
พื้นฐาน jQuery Ajax Syntax
jQuery Ajax
$(selector).load(url,data,callback);
1. ตัวอย่างการใช้งาน jQuery แบบง่าย ๆ ผ่าน property load()
Code (webpage.php)
<?php
for($i=1;$i<=10;$i++)
{
echo $i."<br>";
}
?>
Code (jQuery)
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").load('webpage.php');
});
});
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" id="btn1" value="Load">
</body>
</html>
Screenshot
คำอธิบาย
เมื่อคลิกที่ปุ่ม Load จะมีการ load ข้อมูลจากไฟล์ webpage.php ซึ่งเป็นการทำงานง่าย ๆ ด้วยคำสั่งสั้น ๆ ของ jQuery
2. ตัวอย่างการใช้งาน jQuery แบบง่าย ๆ ผ่าน method ajax() โดยวิธีนี้สามารถตรวจสอบสถานะการทำงาน และกำหนดคุณสมบัติต่าง ๆ ได้
Code (webpage.php)
<?php
for($i=1;$i<=10;$i++)
{
echo $i."<br>";
}
?>
Code (jQuery)
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$.ajax({ url: "webpage.php" })
.success(function(result) { $("#div1").html(result); })
.error(function() { $("#div1").html("error"); })
.complete(function() { $("#div1").after("Ajax load finished"); });
});
});
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" id="btn1" value="Load">
</body>
</html>
Screenshot
คำอธิบาย
เมื่อคลิกที่ปุ่ม Load จะมีการ load ข้อมูลจากไฟล์ webpage.php โดยมีการตรวจสอบผลการทำงานว่า
.success เมื่อทำงานสมบูรณ์ไม่มีข้อผิดพลาด
.error เมื่อมีการทำงานผิดพลาด เช่น หาไฟล์ไม่เจอ 404
.complete เมื่อ Ajax มีการทำงานเสร็จสิ้น ไม่ว่าจะ suscess หรือ error ก็ตาม
3. ตัวอย่างการใช้งาน jQuery Ajax ส่งค่าแบบ $_POST
Code (webpage.php)
<?php
echo "You input : <u>".$_POST["data1"]."</u> and <u>".$_POST["data2"]."</u>";
?>
Code (jQuery)
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$.post("webpage.php", {
data1: $("#txt1").val(),
data2: $("#txt2").val()},
function(result){
$("#div1").html(result);
}
);
});
});
</script>
</head>
<body>
<input type="text" id="txt1">
<input type="text" id="txt2">
<div id="div1"></div>
<input type="button" id="btn1" value="Load">
</body>
</html>
Screenshot
คำอธิบาย
จะมีการส่งค่าตัวแปรแบบ $_POST โดยส่งค่า #txt1 และ #txt2 หรือถ้าต้องการส่งค่ามากกว่านี้ก็สามารถเพิ่มตัวแปรได้แบบง่าย ๆ เช่น
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$.post("webpage.php", {
data1: $("#txt1").val(),
data2: $("#txt2").val(),
data3: $("#txt3").val(),
data4: $("#txt4").val(),
data5: $("#txt5").val()},
function(result){
$("#div1").html(result);
}
);
});
});
</script>
4. ตัวอย่างการใช้งาน jQuery Ajax ส่งค่าแบบ $_GET
Code (webpage.php)
<?php
echo "You input : <u>".$_GET["data1"]."</u> and <u>".$_GET["data2"]."</u>";
?>
Code (jQuery)
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$.get("webpage.php", {
data1: $("#txt1").val(),
data2: $("#txt2").val()},
function(data){
$("#div1").html(data);
}
);
});
});
</script>
</head>
<body>
<input type="text" id="txt1">
<input type="text" id="txt2">
<div id="div1"></div>
<input type="button" id="btn1" value="Load">
</body>
</html>
Screenshot
คำอธิบาย
จะมีการส่งค่าตัวแปรแบบ $_GET โดยส่งค่า #txt1 และ #txt2 หรือถ้าต้องการส่งค่ามากกว่านี้ก็สามารถเพิ่มตัวแปรได้แบบง่าย ๆ เช่น
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$.get("webpage.php", {
data1: $("#txt1").val(),
data2: $("#txt2").val(),
data3: $("#txt3").val(),
data4: $("#txt4").val(),
data5: $("#txt5").val()},
function(result){
$("#div1").html(result);
}
);
});
});
</script>
จากตัวอย่าง 3-4 ตัว จะเห็นว่า jQuery สามารถลดการเขียนจำนวน Code ได้เป็นอย่างมาก และ Syntax ก็สามารถเรียนรู้เข้าใจได้อย่างไม่ยากเกินไป ซึ่งบทความนี้เป็นเพียง Basic jQuery กับ Ajax เท่านั้น สำหรับการใช้งานที่ซับซ้อน ถ้ามีโอกาสจะทำบทความไว้ให้ศึกษาเล่น ๆ กันครับ 
บทความอื่น ๆ ที่เกี่ยวข้อง jQuery กับ Ajax
Go to : jQuery Ajax : jQuery and Ajax คำสั่งพื้นฐาน การเรียกใช้งาน jQuery กับ Ajax Framework
Go to : jQuery Ajax กับ JSON ทำความเข้าใจ การรับส่งข้อมูล JSON ผ่าน jQuery กับ Ajax
|
 ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
| |
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
| |
Score Rating : |
 |
|
| |
Create/Update Date : |
2011-09-21 21:10:33 /
2017-03-19 13:19:59 |
| |
Download : |
No files |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
|
|
Load balance : Server 04
