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 is not right -- but correct version is on the developer's forum (see link below). As you continue to get experienced with using their API, you will find these small issues do not derail you.On the link itself...
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 stae propery 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.