topical media & game development

talk show tell print

basic-ajax-10-ch10-examp1b.htm / htm



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  
  <title>Extracting XML</title>
  
  <script language = "javascript">
  var request = makeHTR();         
          
  function makeHTR() 
  {        
    var request;
    if(window.XMLHttpRequest)
    {
      try
      {
        request = new XMLHttpRequest();
      }
      catch (e) 
      {
          request = null;
      }
    }
    else
    {
      try 
      {
        request = new ActiveXObject("Microsoft.XMLHTTP");;
      }
      catch (e) 
      {
          request = null;
      }
    }
    // return the created object or display an error message
    if (!request) {
   
      alert("Error creating the XMLHttpRequest object.");
          }
    else 
      return request;
  }
  
  // make asynchronous HTTP request using the XMLHttpRequest object 
  function sendRequest()
  {        
  // proceed only if the xmlHttp object isn't busy
  if (request.readyState == 4 || request.readyState == 0) {
          
          request.open("GET", "feed.xml", true);  
      // define the method to handle server responses
      request.onreadystatechange = processResults;
      // make the server request
      request.send(null);
    }
  }
  
  function processResults() {
  
    // move forward only if the transaction has completed
    if (request.readyState == 4) 
    {
      // status of 200 indicates the transaction completed successfully
      if (request.status == 200) 
      {
  
            // extract the XML retrieved from the server
            
        var xmlDocument = request.responseXML;
            // obtain the document element (the root element) of the XML structure
            var channelNodes = xmlDocument.documentElement.firstChild.childNodes;
            var item = channelNodes[5].childNodes;
            var title = item[0].firstChild.nodeValue;
            // update the client display using the data received from the server
            document.getElementById('title').innerHTML = title;
            var link = item[1].firstChild.nodeValue;
            var link2 = "<a href='" + link + "'>" + link + "</a>";
            document.getElementById('link2').innerHTML = link2;
            var description = item[2].firstChild.nodeValue;
            document.getElementById('description').innerHTML = description;
      } 
      // a HTTP status different than 200 signals an error
      else 
      {
        alert("There was a problem accessing the server: " + request.statusText);
      }
    }
  }
  
            
  
        
      </script>
  
    </head>
  
   <body>
   <h1>Get Feed Results</h1>
      <form>
        <input type="button" id="feedR" value = "Extract"> 
      </form>
   
   <h4>Title: <span id="title"></span></h4>
   <h4>Link: <span id="link2"></span></h4>
   <h4>Description: <span id="description"></span></h4>
  
  <script type="text/javascript">
  var myDoc = document.getElementById('feedR');
  myDoc.onclick = sendRequest;
  </script>
          
  
   </body>
  </html>
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.