Ajax : post http and call function in jQuery

Post by Goborijung at 2021-08-26 11:16:30 | ID: 1327

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  // jQuery Function
  $(document).ready(function(){	 
    $.fOut = function(){
      window.setTimeout(function() {
        $(".alert").fadeTo(1000, 0).slideUp(1000, function(){
            $(this).remove(); 
        });
      }, 3000);
    };  	  
  });

	// Javascript Function
  function getData(id)
	{
	  //alert(id);
    $.fOut(); //call function fOut in  jQuery

	  var cTime 	= document.getElementById("createdTime-"+id).value; 
	  var clTime 	= document.getElementById("closedTime-"+id).value; 

	  const xhttp = new XMLHttpRequest();
		xhttp.onload = function() {
		  document.getElementById("response-"+id).innerHTML = this.responseText;
		}
		xhttp.open("POST", "ticket_update.php");
		xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xhttp.send("ticket_number="+id+"&cTime="+cTime+"&clTime="+clTime);
	}
</script>

Ajax :: Ajax Framework

Post by Goborijung at 2018-12-24 11:34:44 | ID: 13

Ajax Framework คืออะไร ? 
Ajax Framework ก็คือ เทคโนโลยี Ajax ที่มีคนสร้างเป็นฟังก์ชั่น ที่พร้อมใช้งานได้เลย ทำให้ง่ายต่อการพัฒนาเว็บแอพลิชั่นต่อไป 

เราสามารถดาวน์โหลด Ajax Framework มาใช้ได้ที่ http://www.prototypejs.org/download เวอร์ชั่นล่าสุด 1.7.3 
เมื่อโหลดเสร็จแล้วให้ copy ไปเก็บไว้ที่ root directory ครับ

Ajax :: Ajax คืออะไร ?

Post by Goborijung at 2018-12-24 11:33:59 | ID: 12

Ajax ย่อมาจากคำว่า Asynchronous JavaScript and XML 
Ajax เป็นเทคโนโลยีที่พัฒนามาจาก Javascript ที่ใช้ร่วมงานกันกับ XML เป็นการโหลดข้อมูลเฉพาะบางส่วนเท่านั้น โดยที่ไม่ต้องโหลดหน้าเว็บทั้งหน้า 

Ajax :: การนำ Ajax ไปใช้งาน (do Ajax)

Post by Goborijung at 2018-12-24 11:14:33 | ID: 11

/* document type javascript */
function doAjax()
{
  //alert('doAjax function');
  var ajax = createAjax();
  ajax.onreadystatechange = function()
  {
    if(ajax.readyState == 4 && ajax.status == 200)
    {
      //alert('ajax is ready.....');
      document.getElementById('rs_id').innerHTML = ajax.responseText;
     }
     else
     {
       return false;
     }	
  }
  ajax.open('POST','page-target.html',true);
  ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  //ajax.send();							    
  ajax.send("usr="+document.fname.user.value+"&pas="+document.fname.pass.value);
}

Ajax :: การสร้างฟังก์ชั่น Ajax ไว้ใช้งานเอง

Post by Goborijung at 2018-12-24 10:31:58 | ID: 10

/*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;
}

// การใช้งาน Function
/* document type javascript */
function doAjax()
{
  //alert('doAjax function');
  var ajax = createAjax();
  ajax.onreadystatechange = function()
  {
    if(ajax.readyState == 4 && ajax.status == 200)
    {
      //alert('ajax is ready.....');
      document.getElementById('rs_id').innerHTML = ajax.responseText;
     }
     else
     {
       return false;
     }	
  }
  ajax.open('POST','page-target.html',true);
  ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  //ajax.send();							    
  ajax.send("usr="+document.fname.user.value+"&pas="+document.fname.pass.value);
}

Ajax :: การใช้ Class และ Function ของ Prototype Framework

Post by Goborijung at 2018-12-24 11:36:14 | ID: 14

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 :: ตัวอย่างการสร้างฟังก์ชั่นของ Ajax Framework

Post by Goborijung at 2018-12-24 11:37:45 | ID: 15

<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>