AJAX - Sending a Request to the Server

เพื่อที่จะส่งการร้องขอไปยัง เซิฟเวอร์ เราจะใช้ตัว open() และตัว send()  ( ตัว = method )

ตัว open() method นั้นมี 3 สิ่งที่ต้องการในการส่งข้อมูล ( three arguments )

1. อันแรกจะบอกว่าส่งข้อมูลแบบไหน เช่น POST,GET

2. อันที่สองคือ URL ที่จะให้ทำงานต่อ รับงานต่อจากการร้องขอ หมายถึง URL เป้าหมายนั่นเอง ซึ่งอยู่ฝั่งเซิฟเวอร์

3. อันที่สามไว้บอกว่าทำงานในลักษณะ asynchronously หรือ synchronously โดยค่าที่ใส่คือ true,false นั่นเอง

( โปรดศึกษาความหมายของ asynchronously เพิ่มเติม )

ตัว send() method ทำหน้าที่ส่งการร้องขอ ไปยังเซิฟเวอร์

ตัวอย่างรูปแบบดังเช่นข้างล่างนี้

———–

xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);

———–

คราวนี้เราต้องการให้ เมื่อผู้ใช้พิมพ์ข้อความเข้าไปในช่อง user name แล้วให้ช่องเวลาเกิดการเปลี่ยนแปลง

หมายถึงมีการทำงานของกระบวนการ ajax เบื้องหลังเมื่อมีการพิมพ์ข้อมูลในช่อง username ดังนั้นเราต้องมี

ส่วนของ javascript เพื่อทำงานเกี่ยวกับ ajax ในช่ิองของ username โดยเราสามารถปรับปรุงโค้ดดังข้างล่างนี้

————-

<form name="myForm">
Name: <input type="text"
onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form>

————-

เมื่อเราปรับปรุงแล้ว ไฟล์ testAjax.htm จะเป็นดังข้างล่างนี้เอง

————–

<html>
<body>
<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      document.myForm.time.value=xmlHttp.responseText;
      }
    }
  xmlHttp.open("GET","time.asp",true);
  xmlHttp.send(null);
  }
</script>
<form name="myForm">
Name: <input type="text"
onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>

————–

ในบทต่อไปเราจะสร้างไฟล์ time.asp เพื่อให้เป็นไปตามเป้าหมายของงาน โดยไฟล์ time.asp เป็นไฟล์ที่ทำงานในส่วนของ เซิฟเวอร์ และไฟล์นี้หล่ะที่ประมวลผลเวลาคืนมาผ่านทาง ajax เพื่อแสดงผลในไฟล์ testAjax.htm

แปลไม่แหล่มขออภัยด้วย.