XMLHttpRequest object or the newer fetch() method.
Both methods allow you to make GET, POST, PUT, DELETE, and other types of HTTP requests. You can modify the method, headers, and body of the request as needed.
How to can we use this code?
Here’s an example of how you could use the XMLHttpRequest example in an HTML file:
In this example, when the button is clicked, the
makeRequest() function is called, which creates a new XMLHttpRequest object, sets its
onreadystatechange event handler, opens a GET request to the specified URL, and sends the request. When the request completes successfully, the response text is logged to the console.
You can modify this code to suit your needs, such as changing the URL, modifying the request method or headers, or processing the response in a different way.
Fetching data from an API: You can use an HTTP request to fetch data from an API in JSON or XML format. For example, you might use an HTTP request to get weather data from a weather API or to get movie information from a movie database API.
Submitting a form: When a user submits a form on a webpage, you can use an HTTP request to send the form data to a server for processing. This can be done using the POST method and sending the data in the request body.
Uploading files: You can use an HTTP request to upload files to a server. This can be done using the POST method and setting the request body to the file contents. You can also use the XMLHttpRequest object to create a file upload progress bar.
Interacting with a server: You can use an HTTP request to interact with a server in various ways, such as updating data, deleting data, or creating new data. This can be done using the appropriate HTTP methods, such as PUT, DELETE, or POST.
More about submitting a form using an HTTP request
We create a new FormData object from the form data, which we then send as the request body in the HTTP request. We set the request method to POST and the URL to the server endpoint that will handle the form submission.
Finally, we set an event listener on the form for the “submit” event. When the event is triggered, we send the HTTP request with the form data, and when the request is completed successfully, we log the response to the console.
You would need to modify the URL in the
xhr.open() function to the correct URL for your server endpoint that will handle the form submission. You can also modify the data sent in the form and the way the response is handled to suit your needs.
How do we configure it?
1 Setting the request method: You can set the request method using the
open() method of the XMLHttpRequest object. The default method is GET, but you can also use other methods such as POST, PUT, DELETE, etc.
2 Setting request headers: You can set request headers using the
setRequestHeader() method of the XMLHttpRequest object. This method takes two parameters: the name of the header and the value of the header.
3 Sending data in the request body: You can send data in the request body using the
send() method of the XMLHttpRequest object. The data can be in various formats, such as JSON, XML, or plain text.
4 Handling the response: You can handle the response using the “
onreadystatechange” event handler of the XMLHttpRequest object. This event handler is called every time the state of the request changes.
In this example, we set the request method to GET, send the request to the server, and set the
onreadystatechange event handler to log the response to the console when the request is completed successfully.