JSON and Web Services

Some APIs now offer JSON as an alternative to XML. All of Yahoo’s Web Services can return JSON if it’s requested. If you’d like to try using the Yahoo Search API, sign up for an application ID at http://api.search.yahoo.com/ webservices/register_application. My own application ID is "Etyl7xbV34Fcahn3QIHzGnpWrqwHyFKsckWdnJtUj82hE6xVTMVHWGqQmxQqlGDHK5QtvjM-". Substitute your own ID in this function:
   1:  function searchYahoo(query) {
   2:  var url = "http://api.search.yahoo.com/NewsSearchService/
   3:  V1/newsSearch?";
   4:  url+= "appid=Etyl7xbV34Fcahn3QIHzGnpWrqwHyFKsckWdnJtUj82hE6xVTMVHWGqQmxQqlGDHK5QtvjM-";
   5:  url+= "&query="+escape(query);
   6:  url+= "&output=json";
   7:  url+= "&callback=parseResponse";
   8:  getScript(url);
   9:  }
The searchYahoo function puts together a URL with the required parameters for a search. The search term itself is passed as an argument, query. The other required parameter is the application ID, appid. There are two optional parameters added to the URL. The first, output, is given a value of json, indicating that the results should be returned in JSON rather than XML. The other parameter, callback, indicates that the JSON data should be evaluated and passed to the function parseResponse. Checkout this complete code jsonsearch.js
// JScript File
function getScript(url) {
  var scripttag = document.createElement("script");
  scripttag.setAttribute("type", "text/javascript");
  scripttag.setAttribute("src", url);
  document.getElementsByTagName("head")[0].appendChild(scripttag);
  }
function searchYahoo(query) {
  var url = "http://api.search.yahoo.com/NewsSearchService/V1/newsSearch?";
  url += "appid=Etyl7xbV34Fcahn3QIHzGnpWrqwHyFKsckWdnJtUj82hE6xVTMVHWGqQmxQqlGDHK5QtvjM-";
  url += "&query=" + escape(query);
  url += "&output=json";
  url += "&callback=parseResponse";
  getScript(url);
  }
function parseResponse(data) {
  // empty the div
  var results = document.getElementById("results");
  while (results.hasChildNodes()) {
     results.removeChild(results.lastChild);
     }
  // loop through the search results
  for (var i = 0; i < data.ResultSet.Result.length; i++) {
     var title = data.ResultSet.Result[i].Title;
     var summary = data.ResultSet.Result[i].Summary;
     var url = data.ResultSet.Result[i].Url;
     // create the headline link
     var header = document.createElement("h2");
     var link = document.createElement("a");
     link.setAttribute("href", url);
     var text = document.createTextNode(title);
     link.appendChild(text);
     header.appendChild(link);
     // create the summary paragraph
     var para = document.createElement("p");
     var paratext = document.createTextNode(summary);
     para.appendChild(paratext);
     // insert the markup
     results.appendChild(header);
     results.appendChild(para);
     }
  }

<!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>

   <script src="Js/jsonsearch.js"></script>

   <title>Untitled Page</title>
</head>
<body>
   <h1>
       Yahoo! News Search</h1>
   <form onsubmit="searchYahoo(this.query.value); return false">
       <fieldset>
           <label>
               Search for</label>
           <input type="text" name="query" />
           <input type="submit" value="Search" />
       </fieldset>
       <div id="results">
       </div>
   </form>
</body>
</html>

No comments:

Post a Comment