topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

professional-ria-03-JSONQueryExample.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>
      <link rel=StyleSheet href="../../stylesheets/RIAStyle1.css" TYPE="text/css">
      <script 
       src="../../scripts/json.js"
       type="text/javascript">
      </script>
      <script type="text/javascript">
      //<![CDATA[
      
      var xmlhttp = false;
   
          function queryHandler(target) {
              if(target !== ""){
                  var url = '../../phpscripts/json.php?' + target;
                  xmlhttp.open('GET', url, true);
                  xmlhttp.onreadystatechange = function() {
                    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                      document.getElementById('Result').innerHTML = '';
                      parseResult(xmlhttp.responseText);
                    } else {
                      document.getElementById('State').innerHTML = "Loading...";
                    }
                  };
                  xmlhttp.send(null);
                }
          }     
          
      function cleanupResponseString(response){  
              return response.slice(response.indexOf("{"), response.lastIndexOf("}")+1);
      }
                   
      function parseResult(result){
          var resultString = cleanupResponseString(result);
          var JSON_object = eval("(" + 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 = "<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");
        } else {
          alert("Application can't create XMLHttpRequest Object.");
        }
      }
      
   
      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";
        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>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>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(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.