test AJAX
Submitted by wd on Thu, 2006-07-06 06:21
ทดสอบ AJAX
เอาโค้ดมาจาก http://www.DynamicAJAX.com
ตรงนี้เป็นบรรทัดธรรมดา
ตรงนี้เป็นลิงก์ โหลดไฟล์ ajax1.txt มาแสดง
ตรงนี้เป็นลิงก์ โหลดไฟล์ ajax2.txt มาแสดง
ตรงนี้เป็นบรรทัดที่จะแทรกข้อความที่รับจาก AJAX
แทรกตรงนี้
ตรงนี้กลับมาเป็นบรรทัดธรรมดา
อธิบายมากไม่ได้ เพราะไม่มีความรู้ :P ได้แค่คัดลอกโค้ดมาให้ดูเฉย ๆ
เนื้อไฟล์ index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Test AJAX</title>
</head>
<body>
<script language="javascript" type="text/javascript">
// SEE FULL CODE AT http://www.DynamicAJAX.com
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(action) {
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
receiveReq.open("GET",action, true);
receiveReq.onreadystatechange = d_handle;
receiveReq.send(null);
}
}
function d_handle() {
if (receiveReq.readyState == 4) {
document.getElementById('d_span').innerHTML = receiveReq.responseText;
}
}
</script>
<strong>ทดสอบ AJAX</strong>
<p>เอาโค้ดมาจาก <a href="http://www.dynamicajax.com">http://www.DynamicAJAX.com</a></p>
<br />
<br />
<p>ตรงนี้เป็นบรรทัดธรรมดา</p>
<p>ตรงนี้เป็นลิงก์ <a href="javascript:d_say('files/ajax1.txt');">โหลดไฟล์ ajax1.txt มาแสดง</a></p>
<p>ตรงนี้เป็นลิงก์ <a href="javascript:d_say('files/ajax2.txt');">โหลดไฟล์ ajax2.txt มาแสดง</a></p>
<br />
<br />
<p>ตรงนี้เป็นบรรทัดที่จะแทรกข้อความที่รับจาก AJAX
<ul><div id="d_span">แทรกตรงนี้</div></ul></p>
<br />
<br />
<p>ตรงนี้กลับมาเป็นบรรทัดธรรมดา</p>
</body>
เนื้อไฟล์ ajax1.txt
ตอนนี้เอาเนื้อไฟล์ ajax1.txt มาใส่<br /> บรรทัดที่สองของ ajax1.txt
เนื้อไฟล์ ajax2.txt
เปลี่ยนแล้วจ๊ะ<br /> ตอนนี้เอาเนื้อไฟล์ ajax2.txt มาใส่<br /> บรรทัดที่สามของ ajax2.txt
f0nt.com
Comments
Web-tier Programming Codecamp II : AJAX
ลิงก์นี้อธิบายดีมาก แต่เป็น pdf นะ
Web-tier Programming Codecamp II : AJAX
Greetings
Wow! That is truly amazing!!