How to use simple API using AJAX ?
- Step 1: The first step is to get the button element getElementById method.
- Step 2: The second step is to add an eventListener to the button and providing a call-back function to it.
- Step 3: Instantiate an XHR object using new keyword.
- Step 4: Open an object using open function. It takes three parameters, the first one is type (GET or POST), second is the URL for the API and last one is a boolean value (true means asynchronous call and false means synchronous call).
- Step 5: Now we will use onload function to display the data. The onload function is executed after the API call is done. We will check for the status of success. We are checking it with 200 as 200 is the success code for an HTTP request.
- Step 6: Now, we will use parse it into a JSON object so that we can easily fetch data from it.
- Step 7: In this step, we will use a loop to iterate over all the items in the object and adding it to the list using innerhtml property.
- Step 8: Last step is to send the request using the send() function.
Share your thoughts in the comments
Please Login to comment...