- Making a Remote Request to the Google API
- Creating a Google API JavaScript Object
- Searching the Google Blog Search Service Using Ajax
- Parsing the JSON Response
- Rendering the Results as HTML
- Additional Resources
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Searching the Google Blog Search Service Using Ajax
In order to initialize the search, it’s important to make sure that the web page has fully loaded, so we’ll start by adding a window.onload function and use it to activate the search once the page has loaded. This ensures that all the HTML elements, JavaScript, and CSS assets are fully loaded before trying to use them. GoogleAPI.SearchBlogs will be a function that initializes the search; it also sets a callback method to retrieve the JSON result set and makes the search request to the Google Blog Search API through our gateway.php file. In this example, the callback for the search is GoogleAPI.onBlogsSearched. The gateway path will be the path of the gateway.php file with a feed argument that points to the Google Blog Search.
The blog search service has a number of arguments that you can choose from; the required arguments are listed in Table 1, while Table 2 lists the optional arguments.
Table 1—Required Arguments for the Google Ajax Search API
|
Argument |
Definition |
Description |
|---|---|---|
|
t |
Version |
The only value available at this point is 1.0. |
|
q |
Query |
The search term you’re performing on the API. |
Table 2—Optional Arguments for the Google Ajax Search API
|
Argument |
Definition |
Description |
|---|---|---|
|
userip |
User IP |
Optional, but recommended by Google. |
|
rsz |
Number of results |
Can have a value of small or large. small retrieves four results, and large retrieves eight results. |
|
hl |
Host language |
Corresponds to the host language. |
|
key |
Application key |
If this argument is supplied, it must match the passed referrer header in order to be validated. The referrer header is what we are passing in gateway.php. |
|
start |
|
A powerful argument that allows you to retrieve pages of results—for example, the default is 0; therefore, if you request a small result set, you’ll receive blog posts 0-4. However, if you want to retrieve additional blog posts, you can change the start to 4, which will retrieve blog posts 4-8. This allows us to gather random blog posts, create controls to navigate through pages of blog posts, and so on. |
|
callback |
|
Allows you to alter the response format and trigger a function call. |
|
context |
|
When supplied with the callback argument, the context alters the response format normally associated with the callback. |
There is only one optional blog search specific argument that can be used to filter results (Table 3).
Table 3: Google Blog Search Specific Argument
|
Argument |
Description |
|---|---|
|
scoring |
Order search results by relevance or date. |
In this example, we are using rsz=small to retrieve four results. We’re also using the start argument, but are setting it to a random number between 0 and 50; this will give us random blog posts each time a search query is made. The required arguments—v=1.0 and q, which is currently set to “Peachpit”—are also included. The search query can be changed to any value using the GoogleAPI.blogQuery variable.
With the gateway URL constructed, we can make the Ajax request to Google. The request is made through a reusable method called GoogleAPI.makeRequest. This method creates the request object as a property of GoogleAPI, sets the onreadystatechange callback method, opens the request to the gateway URL we are passing as the argument, and finally sends the request. Once the request has been made, the onreadystatechange callback method is triggered through each stage of the readyState. Once it reaches 4, the response is fully loaded, and the callback method we set in GoogleAPI.onBlogsSearched is triggered.