Blog to discuss Midnight Coders products features, ideas and trends in development of Rich Internet Applications

Friday, August 12, 2005

Building the 'Ajaxian Google' example

We worked on an example demonstrating XML Web Services integration for AJAX clients. The complete example can be found at:

http://dev.flashorb.com/weborb/examples/googleonsteroids.htm

UPDATE: although this blog entry covers some of the details of the implementation, there is a thorough review of the example available here:

The client side of the example is as basic as the Google's main interface, i.e. all it has is a search query text field. The text field is sensitive to the user's input. As soon as the user stops typing, the client sends the query to Google and displays the result. WebORB sits between the client application and Google web service and brokers the request. There are several reasons why WebORB would have to be in the picture:

  1. Some browsers do now allow direct connections to 3rd party hosts. Requests can be sent only to the server where the page is loaded from
  2. The example uses the license key we got from Google and also lets the user enter his key. Since we cannot expose our license key, we have to hide it in our server side class

The server side implementation is very simple. We used VS.NET to create a web reference for the Google service. The code instantiates web service proxy and invokes the search query method:

using System;
using googlesearch.com.google.api;
namespace googlesearch
{
public class GoogleSearch
{
public GoogleSearchResult runGoogleSearch( string query,
                                           string googleKey )
{
  if( googleKey == null )
    googleKey = "********* our google key goes here **********";

  // instantiate google web service proxy
  GoogleSearchService service = new GoogleSearchService();

  // invoke web service method
  GoogleSearchResult searchResult = service.doGoogleSearch(
                       googleKey, query,
                       0, 10, false, "", false, "", "", "" );
  // return result 'as is' to the client.
  // let WebORB serialize it so the data structure
  //looks the same in JS
  return searchResult;
  }
 }
}

The client side script is just as simple. When the page loads, the script binds to the server side object:

<body onload=bind()>


function bind()
{
  // hide the animation - need to show it only when a query
  // is in progress
  document.getElementById("animation").style.visibility = "hidden";

  // build a proxy to the backend object
  if( googleProxy == null )
    googleProxy = webORB.bind( "googlesearch.GoogleSearch",
                               "weborb.aspx" );

  requestStack = new Array();
}
When the conditions for issuing a query are met (user pauses or enters space or hits Enter), the script executes the following function:


function search()
{
  // get what the user typed in
  var search = document.getElementById( "searchtext" ).value;

  // if the user provided his own key, use in the invocation
  var googleKey = document.getElementById( "gkey" ).value;

  // mark the request in the stack - to avoid overlap
  //of multiple responses
  requestStack.push( search );

  // turn on animation notifying the user of the query in progress
  document.getElementById( "animation" ).style.visibility = "visible";

  // run the query on the backend object (see the code above)
  var async = new Async( processSearchResults, processError )


  googleProxy.runGoogleSearch( search,
                       googleKey.length != 0 ? googleKey : null,
                       async );
}
The client code invokes the remote method asynchronously - see the Async argument. The argument contains two callbacks - one for successful result and the other is for any errors returned from the invocation. See the source for the implementation of processSearchResults and processError.

Something to note about the processSearchResults is the response value maintains full fidelity with the original endpoint. As a result, the data can be accessed as:


function processSearchResults ( result )
{
   [skip]

   for( var i = 0; i < result.resultElements.length; i++ )
   {
     searchContent += result.resultElements[ i ].title;

     if( result.resultElements[ i ].snippet )
       searchContent += result.resultElements[ i ].snippet;

     searchContent += result.resultElements[ i ].URL;
   }

   [skip]

   searchResults.innerHTML = searchContent;
} 



    

    


    


      posted by Mark Piller at 
     9:11 PM 
       
    

  
  

  

  
 
  


	
    
    
3 Comments:

    
    


      

      

        Anonymous Anonymous said...
      

      

        
I get a connection timed out when trying to connect to the example :(

        
9:13 AM

         
      

      

      

        Blogger Mark Piller said...
      

      

        
We had a power outage and the server was down this morning. Try to connect again, the example is up and running.

        
11:54 PM

         
      

      

      

        Blogger Charlie Arehart said...
      

      

        
Folks, is there any download of the code for the Ajaxian example? I realize that the article has most of the code, and much of it may indeed be client side and could be gotten from a view>source of the demo page. Just wondered if you'd thought to package it all as a download. Have I missed it somehow? Don't see it offered in the blog here either. Looks nifty. I imagine others would be interested, too.

/charlie

        
9:26 PM

         
      

      

    

    
    

    Post a Comment
    

    

    	    
    


		

	<< Home