Ajax: บันทึก

Topic: 
 

จากการทดลอง Ajax ในครั้งก่อน
เราใช้พารามิเตอร์ตัวเดียวในการส่งผ่านระหว่างบราวเซอร์กับฟังก์ชั่นในจาวาสคริปต์
ต่อมาต้องการทดลองส่งผ่านพารามิเตอร์มากขึ้น ปรากฎว่าทำไม่ได้
สาเหตุเป็นเพราะค่าตัวแปรในฟังก์ชั่นของจาวาสคริปต์ เป็นแบบตัวแปรท้องถิ่น
ไม่สามารถส่งผ่านออกไประหว่างฟังก์ชั่นได้ (ต้องกลับไปอ่านจาวาสคริปต์อีกทีนึง)

บันทึกวิธีการแก้ปัญหาแบบชั่วคราว ด้วยการกำหนดค่าตัวแปรเป็นแบบ global ไว้ข้างนอก
แล้วส่งผ่านระหว่างฟังก์ชั่นด้วยการใช้ตัวแปรที่กำหนดไว้แทน

ทดสอบด้วย...

ตรงนี้เป็นบรรทัดที่จะแทรกข้อความที่รับจาก AJAX

  • ตำแหน่ง id001 :
    แทรกตรงนี้
  • ตำแหน่ง id002 :
    แทรกตรงนี้

โค๊ดมีดังนี้

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Test AJAX</title>
</head>
<body>
<script language="javascript" type="text/javascript">
var url = "";
var htmlid = "";

function getXmlHttpRequestObject() {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest(); //Not IE
  } else {
    if(window.ActiveXObject) {
      return new ActiveXObject("Microsoft.XMLHTTP"); //IE
    } else {
      alert("Your browser doesn't support the XmlHttpRequest object. Better upgrade to Firefox.");
    }
  }
}

var receiveReq = getXmlHttpRequestObject();

function d_say(argv1,argv2) {
  if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
    url = argv1
    htmlid = argv2
    receiveReq.onreadystatechange = d_handle;
    receiveReq.open("GET",url, true);
    receiveReq.send(null);
  }
}

function d_handle() {
  if (receiveReq.readyState == 4) {
    document.getElementById(htmlid).innerHTML = receiveReq.responseText;
  }
}
</script>

<p>จากการ<a href="/node/6">ทดลอง Ajax ในครั้งก่อน</a>
เราใช้พารามิเตอร์ตัวเดียวในการส่งผ่านระหว่างบราวเซอร์กับฟังก์ชั่นในจาวาสคริปต์
ต่อมาต้องการทดลองส่งผ่านพารามิเตอร์มากขึ้น ปรากฎว่าทำไม่ได้ 
สาเหตุเป็นเพราะค่าตัวแปรในฟังก์ชั่นของจาวาสคริปต์ เป็นแบบตัวแปรท้องถิ่น
ไม่สามารถส่งผ่านออกไประหว่างฟังก์ชั่นได้ (ต้องกลับไปอ่านจาวาสคริปต์อีกทีนึง)</p>

<p>บันทึกวิธีการแก้ปัญหาแบบชั่วคราว ด้วยการกำหนดค่าตัวแปรเป็นแบบ global ไว้ข้างนอก
แล้วส่งผ่านระหว่างฟังก์ชั่นด้วยการใช้ตัวแปรที่กำหนดไว้แทน</p>

<p>ทดสอบด้วย...
<ul>
<li>ตรงนี้เป็นลิงก์ <a href="javascript:d_say('/files/ajax1.txt','id001');">โหลดไฟล์ ajax1.txt มาแสดงที่ตำแหน่ง <code>id001</code></a></li>
<li>ตรงนี้เป็นลิงก์ <a href="javascript:d_say('/files/ajax2.txt','id002');">โหลดไฟล์ ajax2.txt มาแสดงที่ตำแหน่ง <code>id002</code></a></li>
<li>ตรงนี้เป็นลิงก์ <a href="javascript:d_say('/files/ajax1.txt','id002');">โหลดไฟล์ ajax1.txt มาแสดงที่ตำแหน่ง <code>id002</code></a></li>
<li>ตรงนี้เป็นลิงก์ <a href="javascript:d_say('/files/ajax2.txt','id001');">โหลดไฟล์ ajax2.txt มาแสดงที่ตำแหน่ง <code>id001</code></a></li>
</ul>
</p>

<p>ตรงนี้เป็นบรรทัดที่จะแทรกข้อความที่รับจาก AJAX
<ul>
<li>ตำแหน่ง <code>id001 : </code><div id="id001">แทรกตรงนี้</div></li>
<li>ตำแหน่ง <code>id002 : </code><div id="id002">แทรกตรงนี้</div></li>
</ul>
</body>