ถามเกี่ยวกับ 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 ล้วนๆ ครับ ชอบคุณครับ

05 ส.ค. 2556 4 1,484

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



ถ้าไม่ต้องการใส่ 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
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^