GAJAX บทที่ 5

GAjax บทนี้คงเป็นบทที่หลายๆคนอยากรู้มากที่สุด เนื่องจากจะเป็นเรื่องเกี่ยวกับ Ajax โดยตรงซึ่งเป็นหัวใจของ GAajax Class นี้จะเป็น Class ที่ทำงานเกี่ยวกับ Aajax ทั้งหมด ทั้งการรับส่งค่า แบบ GET หรือ POST สามารถควบคุม Cache ได้ และสามารถใ้ช้งาน Autorefresh ได้ และยังสามารถควบคุม การแสดง Loading ได้ด้วย

send
inintLoading
abort
getRequestBody
autoupdate

รูปแบบการใช้งาน
var req = new GAjax(options);
options เป็นข้อมูลชนิด hash ครับ ได้แก่

method: เป็น post(default) หรือ get ครับ กำหนดโหมดการส่งครับ ผมแนะนำเป็น post เสมอครับ เนื่องจากปลอดภัยกว่า
cache: เป็น false(default) หรือ true สำหรับกำหนดการใช้ cache ถ้ากำหนดเป็น true จะยอมให้ใช้ cache ของ browser ได้
asynchronous: เป็น true(default) หรือ false ครับ ถ้ากำหนดเป็น false จะต้องรอการตอบกลับก่อนถึงจะทำงานต่อได้ เหมือนกับการ ส่งค่าแบบธรรมดา
contentType: กำหนดค่า contentType ค่า default คือ application/x-www-form-urlencoded
encoding: กำหนดภาษา ปกติกำหนดเป็น UTF-8 อยู่แล้ว สามารถใช้งานกับ TIS-620 ได้ครับ แต่ผมแนะนำ UTF-8 เนื่องจากง่ายกว่า
onTimeout: ฟังก์ชั่นหากเกิด timeout
timeout: กำหนดช่วงเวลาที่จะเกิด timeout (default 4000 msec)

ฟังก์ชั่น send สำหรับทำการส่งค่าด้วย Ajax ไปยัง Server รูปแบบการใช้งาน
send(url, parameters, callback)
โดยมี parameter

url: url ปลายทาง ที่รับค่า
parameters: ข้อมูลที่ส่งไป ถ้าไม่มี กำหนดเป็น null
callback: ฟังก์ชั่นรับค่ากลับเมื่อทำงานสำเร็จ สำหรับ post ถ้าไม่สำเร็จจะไม่เรียกฟังก์ชั่นนี้

ตัวอย่างการส่งค่าแบบ asynchronous ซึ่งเป็นแบบปกติที่เราคุ้นเคยกันดี

var req = new GAjax();

req.inintLoading('wait', true);

req.send( 'action.php' , 'id=1', function(xhr){

  // รับค่ากลับมาที่ xhr เมื่อทำงานสำเร็จ

   var data = xhr.responseText; // สำหรับข้อมูลในรูป ข้อความ

  var datas = xhr.responseText.toJSON(); // สำหรับขอมูลในรูป JSON

  var xml = xhr.responseXML; // สำหรับข้อมูลในรูป XML

  alert(data);

});

ค่า return ในฟังก์ชั่น callback สามารถเป็นได้ทั้ง xhr.responseText และ xhr.responseXML (toJSON() เป็น property ของ string สำหรับแปลงข้อความ string เป็น object JSON)

ตัวอย่างการส่งค่า แบบ รอรับค่ากลับ (ตรงข้ามกับด้านบน) ซึ่งการส่งแบบนี้ Ajax จะรอการตอบกลับหลังจากคำสั่ง send ก่อนถึงจะทำงานต่อ ในคำสั่ง alert ต่อไป

var req = new GAjax({'asynchronous': false});

req.send('action.php', 'id=1');

alert( req.responseText );

ค่า return กลับจะรับค่ามาจาก object GAJAX หรือก็คือ req ในตัวอย่าง ซี่งสามารถเป็นได้ทั้ง req.responseText และ req.responseXML เช่นกัน

ตัวหนังสืือสีแดงคือการส่งข้อมูลแบบ hash ซึ่งผมจะอธิบายภายหลัง

inintLoading สำหรับกำหนดการแสดงผลตัวรอโหลด ซึ่งมีความสามารถในการแสดงผลรูปรอโหลด กลางจอภาพได้โดยอัตโนมัติ
inintLoading(loading,center);
loading: กำหนด ID ของตัวรอโหลด เช่น <div id="wait">Loading</div>
center: กำหนดการแสดงผลกลางจอภาพ true กลองจอ position ของ loading ต้องเป็น absolute และ false สำหรับการแสดงผล loading ที่ตำแหน่งเดิมของมันที่มันอยู่

abort ยกเลิก request ที่กำลังส่งอยู่ เช่น
req.abort();
getRequestBody สำหรับใช้ GAJax ในการอ่านค่าจากฟอร์มเื่พื่อส่งเลยโดยไม่ต้องอ่านเอง
var querystring = req.getRequestBody(pForm);
pForm คือ ID ของฟอร์มที่ต้องการส่ง
ค่าคืนกลับจะอยู่ในรูป query string เช่น id=1&action=delete

autoupdate การทำงาน AJax แบบ Autorefresh
autoupdate(url,interval,getrequest,callback);
url: url ปลายทาง ที่รับค่า
interval: เวลาสำหรับการอัปเดทแต่ละครั้ง หน่วยเป็น วินาที
getrequest: ฟงก์ชั่นสำหรับอ่านค่าที่ต้องการส่งไป ถ้าไม่มีให้กำหนดเป็น function(){return null}
callback: ฟังก์ชั่นรับค่ากลับเมื่อทำงานสำเร็จ

new GAjax().autoupdate( 'useronline.php' , counter_refresh_time , function(){return 'counter=' + counter_time} , function(xhr){

      var data = xhr.responseText;

 });