Building your search engine:

Let's Put It All Together

At this point, there aren't a lot of surprises with how it goes together, so let's look at the code of the search from our earlier presentation. Note that the provided URL on Goodreads at the time of this writing is not right -- but the correct version is on the developer's forum (see link below). As you continue to get experienced with using their API, you may run intothese small issues, but you will rarely be the only one! The forum is a great place to see what others have done in the same situation.

On the link itself...

On getting variable search fields...

Note of the example API Methods indicate not needing OAuth when in fact it is needed (post comments), show the developer key missing from the parameters (it is always required) -- take these summaries with a grain of salt to get you on your way! Now let's look at the code:

						//Get the results of the pull down:
			var search = document.getElementById("searchType").value;
			

This small piece is no different from what we've done before -- it grabs user input from a pull-down menu (see below for HTML). But it's really the only difference to this point, as now we are dealing with multiple user inputs to append to our search.

Above: we are still making our Ajax call with XMLHttpRequest, even though things are slightly re-arranged. The onreadystatechange event holds the status of the request by storing our function and calling it automatically when the state property changes. So we are getting to our asynchronous process in a slightly different way. A ready state of 4 means that the request has finished and our response is ready, and of course the status is the same -- a 200 is a good transfer while a 404 means the desired resource was not located.

Now our function is called, passing our request, and with this, the response is parsed in a different fashion -- it looks through the elements using the 'getElementsByTagName' process, and creates our table at the same time. Obviously, you could write any of the hundreds of Goodreads data fields to your results in this fashion, creating new columns as needed.

Here is the HTML needed for this -- this is like the examples discussed before -- a very basic layout.

Tackling OAuth... »