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>