Ajax

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 src=“prototype.js”></script>
<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>