- Making a Remote Request to the Google API
- Creating a Google API JavaScript Object
- Searching the Google Video Search Service Using Ajax
- Parsing the JSON Video Result Set
- 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 Video Search Service Using Ajax
We’ll start by making sure the web page has fully loaded by using the window.onload function to activate the video search. This ensures that all the HTML elements and assets are fully loaded before trying to access them programmatically. The function that initializes the search will be called GoogleAPI.SearchVideos. This function also sets a callback method to retrieve the JSON result set and makes the search request to the Google Video Search API through our gateway.php file. In this example, the callback for the search is GoogleAPI.onVideosSearched. The gateway path will be the path of the gateway.php file with a feed argument that points to the Google Video Search.
The video 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 |
|---|---|---|
|
v |
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 video results 0-4. However, if you want to retrieve additional video results, you can change the start to 4, which will retrieve video results 4-8. This allows us to gather random video results, create controls to navigate through pages of video results, 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 video search specific argument that can be used to filter results (Table 3).
Table 3—Google Video 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 and as the start argument we’re also using the GoogleAPI.Index property to determine what record to receive the search results from. The GoogleAPI.Index property will later be used to increase the starting point for the search in order to page through results. The required arguments—v=1.0 and q, which is currently set to “Peachpit”—are also included. The search query or q property can be changed to any value using the GoogleAPI.Query variable in the window.onload event where we are initiating all of the object properties.
Once the gateway URL is 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.onVideosSearched is triggered.