jQuery + AJAX + (Google Search API || Yahoo Search API)

As is clear from the title - this post will be devoted to working with the Google Search API and the Yahoo Search API through jQuery JavaScript library.

Yahoo Search AJAX API

I'll start by using the Yahoo Search API . And for that there are 2 reasons:

1. Google service is more buggy than Yahoo (it’s still green)
2. Yahoo does not pay attention to the ref = "nofollow" attribute, due to which its issue is more complete

')
So let's get started, first we need to register a Yahoo account and get an " Application Id ".

Your favorite bookmark for a while will be http://developer.yahoo.com/search/ .

Next, we decide for ourselves what search interests us (all links to the relevant sections of the documentation for the Yahoo API):

• Audio Search
  
  • Album Search
    Artist Search
    Download Location
    Song search
    
    
    Autos custom
    Content analysis
    Image Search
    Local Search
    
    • Local Search V3
    
    
    MyWeb 2.0
    
    • Related Tags
      Tag Search
      URL Search
      
      
      News Search
      Site explorer
      
      • Pages
        Inlinks
        Update Notification
        
        
        Video Search
        Web search
        
        • Web search
          Context search
          Related Queries
          Spelling Suggest
          
        
        
        
        There are many of them, but we will choose one - Web Search, and we will continue to experiment on it.
        
        

        We make a REST request

        
        
        Using the links above, we get the base of our URL, for Web Search these are:
        search.yahooapis.com/WebSearchService/V1/webSearch
        
        Add your API ID appid = YahooDemo and query = PHP itself (before adding a query, you must prepare it using the encodeURIComponent function)
        
        As a result, we get the following URL:
        
        

        http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&query=PHP

        
        
        This is our necessary minimum, but XML is not the most digestible format for JavaScript, we prefer JSON, and even better than JSONP . To do this, we need to specify the output format using the output parameter. To use the charms of JSONP, we also need to specify the name of the callback function, and now our URL will look like this:
        
        

        http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&output=json&callback=foo&query=PHP

        
        
        

        Javascript

        
        
        Now take jQuery and get the following construction:
        

         $ .getJSON ("http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&output=json&query=PHP&callback=?",
         function (data) {
             var ul = document.createElement ("ul");
             $ .each (data.ResultSet.Result, function (i, val) {
                    var li = document.createElement ("li");
                	 var inner = '<a href="'+val.Url+'" title="'+val.Url+'" target="_blank">' + val.Title + "</a>";
                	 if (val.Summary! = "" && val.Summary! = "undefined") {
                		 inner + = "-" + val.Summary;
                	 }
                	 li.innerHTML = inner;        						
                	 ul.appendChild (li);
             });
             $ ('body'). html (ul);
         });
        

        
        
        This example is similar to the following:
        

         $ .ajax ({
                     // AJAX-specified URL
                    url: "http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&output=json&query=PHP&callback=?",
                    dataType: "jsonp",
                    // Handle the success event
                    success: function (data) {
                        // equal to previuos example
                        // ...
                    }
         });
        

        
        
        Note : we have slightly changed the request - now it ends in ... & callback =? - it is necessary that jQuery substituted the correct name of the callback function in the request. The callback function in this example creates a UL list in which the LI elements will match the search results. (each type of search has its own, specific fields, see the above links for a more detailed description).
        
        As we can see, everything is quite simple - now the output of search results falls entirely on your imagination ...
        
        

        Google Search AJAX API

        
        
        If you have already encountered the Google Search AJAX API, then you know - they have a wonderful JavaScript library that is quite difficult to customize for specific needs, therefore, by analogy with the Yahoo API, we use JSONP. But first ... we need to get the " AJAX Search API Key ".
        
        Our starting point will be the page: http://code.google.com/apis/ajaxsearch/documentation/reference.html
        
        

        We make a REST request

        
        
        Select the type of search, and the corresponding base URL:
        
        • Web Search - http://ajax.googleapis.com/ajax/services/search/web
        • Local Search - http://ajax.googleapis.com/ajax/services/search/local
        • Video Search - http://ajax.googleapis.com/ajax/services/search/video
        • Blog Search - http://ajax.googleapis.com/ajax/services/search/blogs
        • News Search - http://ajax.googleapis.com/ajax/services/search/news
        • Book Search - http://ajax.googleapis.com/ajax/services/search/books
        • Image Search - http://ajax.googleapis.com/ajax/services/search/images
        
        
        You need to specify three parameters - this is the API version - v = 1.0 , your API Key is key = your-key and the request itself is q = PHP (the key is not a required parameter, but highly recommended):
        
        

        http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=PHP

        
        
        Note : each type of search has its own specific parameters, all of which are described in the documentation .
        
        

        Javascript

        
        
        Now returning to our beloved JSONP - Google has done us a disservice - for the JSONP organization, it provided as many as two parameters - callback and context and they are mutually binding, and the context parameter will always be returned to us in the callback function as the first parameter (this is done for so that we can distinguish between simultaneous calls to the API). But there is one catch - this is not suitable for working with jQuery, since jQuery expects data as the first parameter, for this reason I had to go for a trick and create an intermediate callback function:
        
        

         // callback function
         function GoogleCallback (func, data) {
             window [func] (data);
         }
        

        
        
        Now we are ready to “ask”:
        

         // change key !!!
         $ .getJSON ("http://ajax.googleapis.com/ajax/services/search/web?v=1.0?key=your-key&q=PHP&callback=GoogleCallback&context=?",
         function (data) {
             var ul = document.createElement ("ul");
             $ .each (data.results, function (i, val) {
                	 var li = document.createElement ("li");
                	 li.innerHTML = '<a href="'+val.url+'" title="'+val.url+'" target="_blank">' + val.title + "</a> -" + val.content;  						
                	 ul.appendChild (li);
             });
             $ ('body'). html (ul);
         });
        

        
        
        Note : each type of results has its own properties, more information can be found in the documentation .
        
        As you can see, now we are not limited by the “capabilities” of Google’s JavaScript library, and we are free to use the data at our discretion, which is what we really wanted ...
        
        PS: Using a similar approach - we remove the restriction on the presentation of data, and what is important - we transfer the load from the server to the client (this is how the search is organized on the website analyzer.hohli.com ).
        
        Crossposting: http://anton.shevchuk.name/