เกี่ยวกับเฟรมเวิร์คเขียนเองครับ ขอคำแนะนำด้วยครับ
ผมกำลังหัดเขียนอาแจคแบบเฟรมเวิร์คครับ เพราะเห็นว่าโค้ดมันสั้นดีแต่ว่าผมลองดูในโค้ดของ prototype และ GAJAX แล้วผมก็ยังไม่เข้าใจ
เพราะว่าโค้ดมันยาวเกินไป ไม่ทราบว่าถ้าผมอยากจะศึกษาเบื้องต้นอย่าง่ายๆนี่ ผมพอจะหาตัวอย่างที่โค้ดสั้นๆไม่ซับซ้อนมากได้จากที่ไหนบ้างครับ
ผมอยากให้อาจารย์ช่วยดูโค้ดของผมให้หน่อยครับ ผมเขียนขึ้นมาอย่างง่ายๆ โดยโค้ดที่ผมเขียนนี้ ผมลองดัดแปลงมาจากของอาจารย์ นิรุธ ครับ
ซึ่งหากว่าใครที่ได้ศึกษาจาก ซีดีรอมช่วยสอน ของอาจารย์ นิรุธ อำนวยศิลป์ ชุด อาแจค เห็นก็คงพอจะเดาได้ โค้ด(บางส่วน)มีดังนี้ครับ
ไฟล์ชื่อ frame.js
function myframe(){
var _Req;
var _length = 0;
var _param = "";
var _place = "";
}
myframe.prototype.change = function(){
if(this._Req.readyState == 4 && this._Req.status == 200){
document.getElementById(this._place).innerHTML = this._Req.responseText;
}else{
document.getElementById(this._place).innerHTML = "Please Wait..";
}
}
myframe.prototype.Init = function(){
this._param = "";
this._length = 0;
if(window.XMLHttpRequest){
this._Req = new XMLHttpRequest();
}else if(window.ActiveXObject){
this._Req = new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert("No Jax"); return false;
}
//ส่วนนี้ของอาจารย์นิรุธ ท่านไม่ได้เขียนแบบนี้นะครับ แต่ท่านใช้ try(){}catch(e){}
//อันนี้ผมแค่เขียนให้สั้นลง แต่ก็ได้ทดสอบกับเครื่องตัวเองทั้งสองเครื่องแล้ว โดย
//บราวเซอร์ที่ใช้ทดสอบ คือ ไออี 6 ,7 firefox 3.0 opera 9.64 แต่ google chrome จะไม่โชว์ Please wait..
//หุหุ งานเข้าอีก
}
myframe.prototype.postForm = function(formname,place){
var pForm = document.getElementById(formname);
var pBody = this.getRequestBody(pForm);
this._place = place;
var self = this;
this._Req.open("POST",pForm.action,place);
this._Req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
this._Req.onreadystatechange = function(){
self.change();
}
this._Req.send(pBody);
}
myframe.prototype.getRequestBody = function(pForm){
//โค้ดส่วนนี้ผมมั่วๆเอาน่ะครับ โดยลอกมาจากของอาจารย์ "กรกต" ครับที่หัวข้อ
//การ submit ฟอร์มด้วย AJAX เมื่อมี radio หรือ checkbox
//ซึ่งจริงๆโค้ดยาวกกว่านี้แต่ว่าผมขอเอาแค่นี้ก่อนครับหลายบันทัดแล้ว
var nParams = new Array();
for(var n = 0;n< pForm.elements.length;n++){
if(( pForm.elements[n].checked == true && pForm.elements[n].type == "radio") || (pForm.elements[n].checked == true && pForm.elements[n].type == "checkbox") || (pForm.elements[n].type != "radio" && pForm.elements[n].type != "checkbox")){
var pParam = encodeURIComponent(pForm.elements[n].name);
pParam += "=";
pParam += encodeURIComponent(pForm.elements[n].value);
nParams.push(pParam);
}
}
return nParams.join("&");
}
////จริงๆแล้วไฟล frame.js นี้มันยังมีฟังชั่นย่อยๆอีก สองสามฟังชั่นแต่ผมเห็นว่ามันยาว
///ขอจบไฟล์ frame.js แค่นี้นะครับ
ทีนี้เวลาผมจะเรียกใช้งานผมก็ แทรกไฟล์นี้เข้าไปที่ head แล้วเรียกใช้ฟังชั่นเหล่านี้ เช่น
ในไฟลชื่อ testform.php สร้างฟอร์มขึ้นมา 1 ฟอร์ม
<html>
<head>
<script src="frame.js" type="text/javascript"></script>
<script>
function getForm(){
var f1 = new myframe();
f1.Init();
f1.postForm("myForm","show");
}
</script>
</head>
<form method="POST" action="test.php" id="myForm">
<input type="text" name="t1" id="t1" onblur="getForm(this)">
</form>
<div id="show">Show</div>
</body>
</html>
//ไฟล test.php
//
<?
sleep(3);
$name = $_POST[t1];
echo"สวัสดีครับ คุณ $name";
?>
คราวนี้มาถึงคำถามครับ
ถ้าหากว่าผมอยากให้เมื่อ responseText เป็น เงื่อนไขที่เราได้กำหนดไว้ผมอยากให้มัน Redirect ไปหน้าอื่น
สมมุติผมทำหน้าล๊อกอิน เมื่อเชคล๊อคอินแล้ว ผลตอบกลับมาว่า OK แล้วให้เปลี่ยนหน้าไปที่หน้า สมาชิกนะครับ
ผมจะสามารถแก้ไข(หมายถึงเขียนโค้ดเพิ่มเติม) อย่างไรครับ ขอแนวทางด้วยครับ
สำหรับผม ในการเขียน GAJAX ผมศึกษาอย่างละเอียดกับ Frame Work ทุกตัวเท่าที่ผมหาได้
และ ตำราภาษาอังกฤษก็น้อย ภาษาไทย หาแทบไม่เจอ แต่ก็มีเล่มนึงที่น่าสนใจครับ "พัฒนาเว็บแอปพลิเคชั่นด้วย Ajax ภาคปฏิบัติ" ถึงแม้เขาจะไม่ได้เขียนมาสำหรับ PHP แต่ก็มีหลายเรื่องที่ประยุกต์ใช้ได้ครับ (ขอค่าโฆษณาด้วย)
สำหรับคำถาม
การจะเป็นไปได้ตามเงื่อนไขที่ว่า ก็มี 2 วิธีหลักๆ ครับ
1. ส่ง URL ที่ต้อง redirect ไปกับ request เลย อาจใช้เป็น input หนึ่งในฟอร์มก็ได้ เมื่อ Ajax ประมวลผลเสร็จแล้ว แสดง alert แล้ว ก็ redirect ไปได้เลย
2. ให้มีการส่ง event กลับมา อันนี้จะเข้ากับ Frame Work มากกว่า เหมือนกับ AJAX ก็ยังมี event ตอบกลับคือ onreadystatechange หรือใน GAJAX ก็มี event ตอบกลับ ที่ class GAJAX