ถามเกี่ยวกับ ajax สักนิดครับ
<html>
<head>
<title>TEST AJAX</title>
</head>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax(url) {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
HttPRequest.open('POST',url,true);
HttPRequest.send(null);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById("mySpan").innerHTML = HttPRequest.responseText;
}
}
/*
HttPRequest.onreadystatechange = call function .... // Call other function
*/
}
</script>
<body>
<span id="mySpan"></span>
<a href="page1.php" id="menu">test</a> <br /> //ผมต้องการคลิกลิ้งค์ในให้ข้อความขึ้นที่ mySpan ครับ โดยที่ไม่ใส่คำสั่ง
onClick="JavaScript:doCallAjax('page1.php');" นี้นะครับ
<input name="btnButton" id="btnButton" type="button" value="Click" onClick="JavaScript:doCallAjax('page1.php');">
</body>
</html>
ปล. ช่วยแนะนำด้วยครับ ผมกำลังศึกษาการเขียน Ajax ล้วนๆ ครับ ชอบคุณครับ
ถ้าไม่ต้องการใส่ onclick ใน code HTML ก็ต้องใช้ onclick นอกโค้ด HTML เช่น
alert(this.href);
return false; // ไม่ต้องไปต่อ
};
ขอบคุณครับ ผมได้ใส่ที่อาจารย์ให้ไปแล้ว แต่ผมอยากให้มันโชว์ข้อมูลที่อยู่ในไฟล์ page1.php ตรง <span id="mySpan"></span> ตรงนี้ด้วยอ่ะครับ
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ทดสอบ Ajax</title>
</head>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax(url) {
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
HttPRequest.open('POST',url,true);
HttPRequest.send(null);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById("mySpan").innerHTML = HttPRequest.responseText;
}
}
}
</script>
<body>
<span id="mySpan"></span>
<a href="page1.php" id="menu">test</a>
<script type="text/javascript">
document.getElementById('menu').onclick = function(){
alert(this.href);
return true;
};
</script>
</body>
</html>
ถ้าทุกอย่างสำเร็จ นั่นหมายความความจะมี ข้อความ แจ้ง url มาให้ทราบ ตาม alert(this.href) ซึ่ง ถ้าออกมาตามนี้แสดงว่าฟังก์ชั่นถูกต้อง ส่วนจะทำอะไต่อ ก็แล้วแต่ครับ ... แค่แทนที่ฟังก์ชั่นข้างต้นด้วยสิ่งที่ต้องการครับ
โดยใช้ <a href="page1.php" id="menu">test</a> ลิ้งค์นี้ในการเรียกข้อมูลมาครับ
ขอบคุณครับ