topical media & game development

talk show tell print

professional-ria-03-JSONQueryParse.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 JSON Query and Response Parse</title>
      <style type="text/css">
        #mapbox{
          height: 450px;
          width: 750px;
        }
    
        h1, h2 {
          font-family: Arial,sans-serif;
          margin: 0px;
          padding: 0px;
        }
      
        h1{
          font-family: Verdana,Arial,sans-serif;
          font-size: 120%;
          color: #334d55;
        }
      
        h2{
          font-size: 100%;
          color: #006666;
        }
      
        .inputelement {
          background-color: #507565;
          border: thin solid #444444;
          padding: 5px;
          width: 738px;
        }
      
        .pictureHeader {
          font-size: 18pt; color: #ff0000; font-family: arial;
          background-color: #ffffcc;
          text-align: center
        }
  
        body {
          background-color: #7C947A;
        }
      </style> 
      
      <script 
       src="../../scripts/json.js"
       type="text/javascript">
      </script>
      <script type="text/javascript">
      //<![CDATA[
      
      var xmlhttp = false;
   
          function queryHandler(target) {
              try {
                  netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
              } catch (e) {
  //                alert("Permission UniversalBrowserRead denied.");
              }
              if(target !== ""){
                  var url = '../../phpscripts/json.php?' + target;
                  xmlhttp.open('GET', url, true);
                  xmlhttp.onreadystatechange = function() {
  //                  alert("queryHandler :onreadystatechange...\n"+xmlhttp.responseText);  
                    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                      document.getElementById('Result').innerHTML = '';
  //                    alert("queryHandler :xmlhttp.responseText...\n"+xmlhttp.responseText);  
                      parseResult(xmlhttp.responseText);
                    } else {
                      document.getElementById('State').innerHTML = "Loading...";
                    }
                  };
                  xmlhttp.send(null);
                }
          }
                   
      function parseResult(result){
  //        alert(" parseResult ...\n"+result);
          resultString = result.slice(0, -1);
          var JSON_object = eval("(" + resultString + ")");
  
  //        alert("parseResult:"+JSON_object);
                                  
  //        document.getElementById("JSONResult").innerHTML = resultString;
          document.getElementById("TotalHits").innerHTML = JSON_object.ResultSet.totalResultsAvailable;
          document.getElementById("Title").innerHTML = JSON_object.ResultSet.Result[0].Title;
          document.getElementById("Summary").innerHTML = JSON_object.ResultSet.Result[0].Summary;
  //        document.getElementById("PictureHeader").innerHTML = "<center>an Example Picture</center><BR/>"; 
          document.getElementById("PictureHeader").innerHTML = "<p>an Example Picture</p>"; 
          document.getElementById("PictureURL").innerHTML = 
            "<img src=\""+JSON_object.ResultSet.Result[0].ClickUrl+ "\" alt=\""+
            JSON_object.ResultSet.Result[0].ClickUrl +
            "\"/>"
            ;
          document.getElementById("State").innerHTML = "";
      }
  
      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=json";
  //      var uri = "http://api.local.yahoo.com/MapsService/V1/geocode?appid=YahooDemo&location=" + query;
  //      alert("doQuery...\n"+uri);
        queryHandler(uri);
      }
  
      //]]>
      </script>
  
    </head>
    <body onload="onLoad()">
      <div id="header">
      <h1>Simple JSON Query and Parsing Sample </h1>
      <h2>
      Use a JavaScript call to directly invoke RESTFul Service.
      Get the response back as a JSON Object. Use the contents as JavaScript Objects.
      </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>JSONResult: <span id="JSONResult" style="font-weight:bold"></span> </p> -->
    <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.