An Ajax example



The fetched message will appear here.



The jQuery Code START
    
    <script type="text/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>
    
    <style type="text/CSS">
        <!--
        .code { color: red; }
        .back { background-color: yellow; }
        -->
   </style>
  </head> 

  <body>

    <H1>An Ajax example</H1>

    <form>
      <input type="button" value="Fetch First message" onclick="getData('message1.txt', 'targetDiv')">
      <input type="button" value="Fetch Second message" onclick="getData('message2.txt', 'targetDiv')">
      <input type="button" value="Fetch Third message" onclick="getData('message3.txt', 'targetDiv')">
    </form>