topical media & game development

talk show tell print

professional-ria-03-XMLQueryExample.htm / htm



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     
      <title>Example XML Query and Response Parse</title>
      <link rel=StyleSheet href="../../stylesheets/RIAStyle1.css" TYPE="text/css">
      <script  src="../../scripts/xmlw3cdom.js" type="text/javascript"> </script> 
      <script  src="../../scripts/xmlsax.js" type="text/javascript"> </script> 
  
      <script type="text/javascript">
      //<![CDATA[
      
      var xmlhttp = false;
   
          function queryHandler(target) {
              try {
                  netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
              } catch (e) {
              }
              if(target !== ""){
                  var url = '../../phpscripts/xmlQuery.php?' + target;
                  xmlhttp.open('GET', url, true);
                  xmlhttp.onreadystatechange = function() {
                    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                      document.getElementById('Result').innerHTML = '';
                      var cleanXMLText = cleanupResponseString(xmlhttp.responseText);   
                      parseResult(cleanXMLText);
                    } else {
                      document.getElementById('State').innerHTML = "Loading...";
                    }
                  };
                  xmlhttp.send(null);
                }
          }
                   
        
      function cleanupResponseString(response){  
              return response.slice(response.indexOf("<"), response.lastIndexOf(">")+1);
      }  
      //maybe a picture would be good here ...
          function parseResult(xml) {
          //instantiate the W3C DOM Parser
              var parser = new DOMImplementation();
          //load the XML into the parser and get the DOMDocument
              var domDoc = parser.loadXML(xml);
          //get the root node (in this case, it is ResultSet)
              var docRoot = domDoc.getDocumentElement();
          //display the data  
          document.getElementById("Title").innerHTML = docRoot.getElementsByTagName("Title").item(0).getFirstChild().getNodeValue();  
          if (docRoot.getElementsByTagName("Summary").item(0).getFirstChild() != null){
              document.getElementById("Summary").innerHTML =
              docRoot.getElementsByTagName("Summary").item(0).getFirstChild().getNodeValue(); 
          } else {
                  document.getElementById("Summary").innerHTML = "No Summary";
          }
                  // heree we are getting an attribute of ResultSet, not a node; thus a somewhat different strategy ...
                  var totalHits = docRoot.getAttributeNode("totalResultsAvailable").getNodeValue()
            
          document.getElementById("TotalHits").innerHTML = totalHits;
          document.getElementById("PictureHeader").innerHTML = "<p>an Example Picture</p>"; 
          document.getElementById("PictureURL").innerHTML = 
            "<img src=\""+
             docRoot.getElementsByTagName("ClickUrl").item(0).getFirstChild().getNodeValue() + 
            "\" alt=\""+
            docRoot.getElementsByTagName("ClickUrl").item(0).getFirstChild().getNodeValue() +
            "\"/>"
            ;
              document.getElementById("State").innerHTML = "";
          } // end function parseResult
          
      function onLoad() { 
        //TODO Lock HTTP requests against each other...
        if (window.XMLHttpRequest) {
          xmlhttp = new XMLHttpRequest();
          xmlhttp.overrideMimeType('text/xml');
        } else if (window.ActiveXObject) {
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
      
   
      function doQuery() {
        var query = document.getElementById("imageQuery").value;
        var uri = "http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query="+query+"&results=1&output=xml";
        queryHandler(uri);
      }
  
      //]]>
      </script>
  
    </head>
    <body onload="onLoad()">
      <div id="header">
      <h1>Simple XML DOM Query and Parsing Sample </h1>
      <h2>
      Use a JavaScript call to directly invoke RESTFul Service.
      Get the response back as a XML Object. Parse the XML to get Tags, tag attributes 
      and the value of the nodes delimited by tags..
      </h2>
  
    </div>
    
    <br />
    
    <div class="inputelement"><button onClick="doQuery()">Image Search Term</button>&nbsp;
          <input id="imageQuery" value="Rose" size="50"></input>
    </div>
    <br />
  
    <div id="State"></div>
    <div id="Result"></div>
    <p>TotalHits: <span id="TotalHits" style="font-weight:bold"></span> </p>   
    <p>Title: <span id="Title" style="font-weight:bold"></span> </p>   
    <p>Summary: <span id="Summary" style="font-weight:bold"></span> </p>   
    <span id="PictureHeader" class="pictureHeader"></span>
    <span id="PictureURL"></span>
    </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.