- Making a Remote Request to the Google API
- Requesting Remote Results from Google with Ajax
- Parsing the Response
- Rendering the Results
- Summary
- Additional Resources
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Requesting Remote Results from Google with Ajax
Using PHP to access the Google Image Search service allows us to easily access the JSON result set using Ajax. To get started, we’ll need to download the jsonparser from http://www.json.org in order to parse the result set from Google. With the jsonparser, we’ll start by creating a new JavaScript object, which we’ll call GoogleAPI (Listing 2), and we’ll include the jsonparser file at the top of the file. To keep the JavaScript self-contained, I’ve used the document.write statement to write the include within the GoogleAPI.js file. This GoogleAPI object will handle most of the functionality, making all the Ajax requests, parsing the JSON and rendering the HTML elements in the web page.
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.SearchImages is our initialization method for the search; it sets a callback method to retrieve the results and makes a request to the Google Image Search API through our gateway.php file. In this example, the callback for the search is GoogleAPI.onImagesSearched. The gateway path will be the path of the gateway.php file with a feed argument that points to the Google Image Search API.
The image search service has a number of arguments that you can choose from; the required arguments are listed in Table 1. Table 2 lists all of the optional arguments for filtering results, etc.
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 |
# 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 images 0-4. However, if you want to retrieve additional images, you can change the start to 4, which will retrieve images 4-8. This allows us to gather random images, create controls to navigate through pages of images, 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. |
A number of optional image search specific arguments can be used to filter results (Table 3).
Table 3—Google Image Search Specific Arguments
|
Argument |
Description |
|
safe |
Can be set to active, moderate, or off. |
|
imgsz |
Restricts the image size; this argument can be set to icon, small|medium|large|xlarge, xxlarge or huge. |
|
imgc |
Refers to the colorization; this argument can be set to either gray for grayscale or color. |
|
imgcolor |
Tells the search filter to limit the results to images of a specified color—for example, black, blue, brown, and so on. |
|
imgtype |
Restricts the search to images of either face, photo, clipart or lineart. |
|
as_filetype |
Restricts the search to images of a specific filetype. The accepted filetypes are jpg, png, gif, or bmp. |
|
as_sitesearch |
Specifies what domain to search for specific images. This argument may produce few results unless searching a stock image web site, or similar. |
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 images each time a search query is made. We are also including the required arguments—v=1.0 and q—which is currently set to “Peachpit”, but can be changed in the GoogleAPI.imageQuery variable. In fact, this variable could even be set through a text input to allow users to perform their own searches.
Now that the gateway URL is constructed, we can make the actual Ajax request. 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 it, 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.onImagesSearched is triggered.