Ajax (Asynchronous JavaScript and XML)
Ajax คืออะไร ?
การสร้าง Function Ajax ไว้ใช้งานเอง
/*Document Type Javascript files*/
function createAjax()
{
var xmlHttp = false;
try{
xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
//alert('ActiveX');
}catch(err1){
try{
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
//alert('IE');
}catch(err2){
try{
xmlHttp = new XMLHttpRequest();
//alert('Chrome , Firefox');
}catch(err3){
//alert('Your Browser is not support Ajax');
xmlHttp = false;
}
}
}
return xmlHttp;
}
การสร้างฟังก์ชั่น ใช้งาน Ajax
function loadAjax()
{
//alert('loadAjax');
var ajax = createAjax();
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
//alert('ajax is ready.....');
document.getElementById('pageTarget').innerHTML = ajax.responseText;
}else{
return false;
}
}
ajax.open('POST','pageTarget1.html',true);
ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajax.send(); //ajax.send("loginName="+document.fLogin.loginName.value+"&loginPass="+document.fLogin.loginPass.value);
}
Ajax Framework
Ajax Framework คืออะไร ?
เราสามารถดาวน์โหลด Ajax Framework มาใช้ได้ที่ http://www.prototypejs.org/download เวอร์ชั่นล่าสุด 1.7.3
เมื่อโหลดเสร็จแล้วให้ copy ไปเก็บไว้ที่ root directory ครับ
การใช้ Class และ Function ของ Prototype Framework
Class Ajax.Updater
เป็นคลาสสำหรับทำการร้องขอของ Ajax และ Update ข้อมูลกลับคืน ในรูปแบบของข้อความ
รูปแบบคำสั่งของ คลาส Ajax.Updater
new Ajax.Updater(container, url, [option])
container เป็นตัวส่งตำแหน่งที่ต้องการแสดงผล
url เป็นตัวแปลชื่อไฟล์ที่จะให้โปรแกรมวิ่งไปประมวลผล
option เป็นส่วนเพิ่มเติม เช่น วิธีการส่งข้อมูล (get หรือ post)และอื่นๆ
Function serialize
serialize เป็นฟังก์ชั่นที่ใช้สำหรับอ่านค่าข้อมูลภายในฟอร์ม โดยค่าที่อยู่ในฟอร์มทั้งหมดจะถูกเก็บเอาไว้ในตัวแปร เช่น
Form.serialize(“formID”); เป็นต้น
ตัวอย่างการสร้างฟังก์ชั่นของ Ajax Framework
<script>
function loadeditspecProduct(div){
var params = Form.serialize(“form2”);
var url = “specproductEdit.php”;
var Addnew = new Ajax.Updater(div,url,{method:“post”,parameters:params});
}
</script>