mo.notono.us

Wednesday, May 28, 2008

Google AJAX Libraries API with Working Example

As is all over the blogosphere (I got it from Google Operating System), Google has decided to streamline AJAX development a bit further by hosting several AJAX libraries on Google servers, and also make them available for loading through a javascript call.

I decided to try it out, but unfortunately the example given by Dion Almaer is incomplete and also has a number of typos (both in the Google blog post and on the AJAX Libraries API home page).

Below is a working example - simply copy to a text file, rename as .htm/.html and run in your favorite browser:

<html>
<head>
<title>Google Ajax API Test</title>
 
<script src="http://www.google.com/jsapi"></script>
<script>
  // Load jQuery
  google.load("jquery", "1", {uncompressed:true});
 
  // on page load complete, fire off a jQuery json-p query against Google web search
  google.setOnLoadCallback(function() {
    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=jquery+google&v=1.0&callback=?",
 
      // on search completion, process the results
      function (data) {
  if (data.responseData.results &&
            data.responseData.results.length>0) {
    //render each result
    $.each(data.responseData.results, 
       function(i, result) {
      //hacked together jquery expression
      $("<p/>").html(i+1 + ". <a href='" + result.url + "'>" + result.title + "</a>: " + result.content).appendTo("#results");
       });
        }
      });
    });
</script>
</head>
<body>
<div id="results"></div>
</body>
</html>

Labels: , , , , ,

0 Comments:

Post a Comment

<< Home