AJAX (Asynchronous JavaScript and XML) is a technique used to fetch and send data between a web browser and server without needing to reload the entire page.
Within this application, there are two functions that are responsible for fetching and processing data.
When the button to grab the CD collection is clicked, an instance of XMLHttpRequest is created to make an asynchronous request for data from the "cd_catalog.xml" file. The response is handled by the xhttp.onload event, which triggers the myFunction(xml) function. In myFunction(xml), the XML data is processed to dynamically create an HTML table, and this table is displayed on the webpage without reloading the entire page.
The API that I chose to report on is Random Dog (github), an API service that does one simple thing:
How? Simple really. No need to go looking and hiding for access keys. All you need to do is play fetch with 🦴 the base URL at random dog's website + /woof.json or /woof.
The best thing about this simple to use API is that it will cost you absolutely no fee to use this API.
It's such an easy way to keep retention on your pet friendly website.
How exactly do we grab these pics you may ask? If you visit the baseurl + woof.json, you will receive a json response contianing information about a randomly selected dog media.
This endpoint has two parts
With this API, you can also add a query parameter called filter which would allow you to filter the types of media you'd accept on your page.
Example
Developers can take advantage of these queries to help create a more personalized experience for users with a certain file type preference.
If I were to fully ... flesh... this out I'd probably use a dropdown menu for a filter to allow users to choose the types of media they'd like to see.