File "ajax3.html"

Full Path: /home/analogde/www/Jquery/chapter03/ajax3.html
File size: 1.34 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<html> 
  <head> 
    <title>Sending Data to the Server</title> 

    <script language = "javascript">
      var XMLHttpRequestObject = false; 

      if (window.XMLHttpRequest) {
        XMLHttpRequestObject = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        XMLHttpRequestObject = new 
          ActiveXObject("Microsoft.XMLHTTP");
      }

      function getData(dataSource, divID) 
      { 
        if(XMLHttpRequestObject) {
          var obj = document.getElementById(divID); 
          XMLHttpRequestObject.open("GET", dataSource); 

          XMLHttpRequestObject.onreadystatechange = function() 
          { 
            if (XMLHttpRequestObject.readyState == 4 && 
              XMLHttpRequestObject.status == 200) { 
                obj.innerHTML = XMLHttpRequestObject.responseText; 
            } 
          } 

          XMLHttpRequestObject.send(null); 
        }
      }
    </script>
  </head> 

  <body>

    <h1>Sending Data to the Server</h1>

    <form>
      <input type = "button" value = "Fetch message 1" 
        onclick = "getData('dataresponder.php?data=1', 'targetDiv')"> 
      <input type = "button" value = "Fetch message 2" 
        onclick = "getData('dataresponder.php?data=2', 'targetDiv')"> 
    </form>

    <div id="targetDiv">
      <p>The fetched message will appear here.</p> 
    </div> 

  </body> 
</html>