A-AA+then

ถามเกี่ยวกับ ajax สักนิดครับ

1,456
<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 ล้วนๆ ครับ ชอบคุณครับ

4 ความคิดเห็น

คำถามเข้าใจยากจัง....ผมเดานะ

ถ้าไม่ต้องการใส่ onclick ใน code HTML ก็ต้องใช้ onclick นอกโค้ด HTML เช่น
document.getElementById('memu').onclick = function(){
  alert(this.href);
  return false;// ไม่ต้องไปต่อ
};
1

ขอบคุณครับ ผมได้ใส่ที่อาจารย์ให้ไปแล้ว แต่ผมอยากให้มันโชว์ข้อมูลที่อยู่ในไฟล์ 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>

 

2

โค้ดด้านบนที่ผมให้เป็นแค่ตัวอย่างครับ ผมไม่รู้ว่าจุดประสงต์จริงๆ คืออะไร

ถ้าทุกอย่างสำเร็จ นั่นหมายความความจะมี ข้อความ แจ้ง url มาให้ทราบ ตาม alert(this.href) ซึ่ง ถ้าออกมาตามนี้แสดงว่าฟังก์ชั่นถูกต้อง ส่วนจะทำอะไต่อ ก็แล้วแต่ครับ ... แค่แทนที่ฟังก์ชั่นข้างต้นด้วยสิ่งที่ต้องการครับ
3

จุดประสงค์ของผมก็คือ ต้องการเรียกข้อมูลที่อยู่ในไฟล์ page1.php มาแสดงใน <span id="mySpan"></span> ในหน้า index.php
โดยใช้ <a href="page1.php" id="menu">test</a> ลิ้งค์นี้ในการเรียกข้อมูลมาครับ

ขอบคุณครับ
4
^