Ajax: บันทึก
Submitted by wd on Tue, 2007-03-06 16:48
จากการทดลอง Ajax ในครั้งก่อน
เราใช้พารามิเตอร์ตัวเดียวในการส่งผ่านระหว่างบราวเซอร์กับฟังก์ชั่นในจาวาสคริปต์
ต่อมาต้องการทดลองส่งผ่านพารามิเตอร์มากขึ้น ปรากฎว่าทำไม่ได้
สาเหตุเป็นเพราะค่าตัวแปรในฟังก์ชั่นของจาวาสคริปต์ เป็นแบบตัวแปรท้องถิ่น
ไม่สามารถส่งผ่านออกไประหว่างฟังก์ชั่นได้ (ต้องกลับไปอ่านจาวาสคริปต์อีกทีนึง)
บันทึกวิธีการแก้ปัญหาแบบชั่วคราว ด้วยการกำหนดค่าตัวแปรเป็นแบบ global ไว้ข้างนอก
แล้วส่งผ่านระหว่างฟังก์ชั่นด้วยการใช้ตัวแปรที่กำหนดไว้แทน
ทดสอบด้วย...
- ตรงนี้เป็นลิงก์ โหลดไฟล์ ajax1.txt มาแสดงที่ตำแหน่ง
id001 - ตรงนี้เป็นลิงก์ โหลดไฟล์ ajax2.txt มาแสดงที่ตำแหน่ง
id002 - ตรงนี้เป็นลิงก์ โหลดไฟล์ ajax1.txt มาแสดงที่ตำแหน่ง
id002 - ตรงนี้เป็นลิงก์ โหลดไฟล์ ajax2.txt มาแสดงที่ตำแหน่ง
id001
ตรงนี้เป็นบรรทัดที่จะแทรกข้อความที่รับจาก 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>
f0nt.com
Recent comments