In my case, I fixed a bug in the code that would have been difficult to fix if I didn’t know HTML/CSS/javascript/j query, etc. Maybe you can relate? That’s why this is helpful. We’re going to visit http://jsonplaceholder.typicode.com/.
There we will find an API (application programming interface). The JSON after the /users provides “fake data” about users and their posts. As we type into the input box we see what we type in real-time reflected in the div with id=main.
If you refresh or close the window come back, you’ll notice the changes will be gone. This is because it’s a single-page application, and there is no real way to save the data locally that I know of (without saving session information in a database, which could potentially be hacked).
In this tutorial we’ll learn how to use the same API from jsonplaceholder.typicode.com with AJAX calls instead of refreshing or using browser history.
We’ll also show the JSON response on the same page as well as type ahead functionality for auto complete of username names.
- The first thing you need to do is visit us. If you are making this into an application for your users then you change /users to whatever endpoint you’re using. The second URL is the same, but we added a /echo after it for testing purposes. If you visit that, you should see whatever you sent in echoed back to the page.
- The next thing is that all browsers have adopted some form of Fetch API or XMLHttpRequest2 that makes making AJAX requests easier than ever before! With j Query, there are several different layers of abstraction where you can just say “does this” and trust that your request works with satisfying CORS requirements (Cross-Origin Resource Sharing). We’ll also have code examples without j Query so if you don’t use it feel free to convert our code to vanilla javascript.
- This example uses j query… more on why I’m showing this later.
- First, we’ll create a form where the user can submit a new post to our API from a JSON placeholder. We bind an ‘input’ event that gets the value of the input box and then you use fetch () to call your endpoint with that value as your parameter in this case username. The second parameter tells it what type of request to make (we’re just passing “POST” because that’s what we’re using for this example) then the callback is executed when the response comes back with status code 200 meaning success. If it responds successfully, we push whatever they sent us onto our list which in turn updates our interface… neat! That covers half of what I wanted out of this blog post so let’s get started.
- If you’re using j Query, the code is a little simpler. In our case, we need to add sync in front because when it’s not there, requests are made in serial and that’s no fun when you want them all to happen at once. There’s also a section where we go through its return value and check if the post was successful or not… this isn’t required but I think it makes your code easier to understand.
- The process for fetching data from the JSON API endpoint is exactly the same whether you use j Query or not.
- Let’s talk about sending a POST request back to JSON placeholder without using AJAX/Fetch/whatever new way browsers have adopted calling .send() which takes parameters of URL, content type, and data for the body.
- The code is longer than the AJAX version but not by much. One thing that isn’t needed that you’ll see in other tutorials is setting an extra header called Content-type to “application/x-www-form-url encoded”. I didn’t think it was necessary because we’re sending JSON back to their endpoint; they handle what kind of content it should be because it’s defined as a Restful API so there are no surprises. If you want to do this with AJAX, set a request. Override Mime Type (‘application/JSON) before making the call.
- This uses XHR2 or better known as fetch… I know, confusing! Just wanted to show a simple example of how to submit a form asynchronously. Notice that the URL is just /echo this is because we’re not sending any data so there’s nothing else needed.
If you visit the echo endpoint, you’ll see your input echoed back!
Conclusion
I think this is a nice introduction to using JSON API in the browser. It’s pretty standard stuff but I wanted to make this because often when you see simple examples they skip over AJAX and focus on plain HTML forms. The next post will be about Graph QL because it was requested!
Thanks for reading! Please share your thoughts with me on Twitter. Feel free to reach out if you have any questions or just want to show off what you’ve built! Also, if there are any topics you’d like me to cover, I’m all ears.
Masab Farooque is a Tech Geek, Writer, and Founder at The Panther Tech. He is also a lead game developer at 10StaticStudios.
When he is not writing, he is mostly playing video games