Making HTTP Requests in JavaScript with XMLHttpRequest

Published March 27, 2024 at 11:02 pm

An image with digital layout, integrating visual symbols of coding and internet browsing to depict the concept of XMLHttpRequest in JavaScript. There's a laptop screen showing lines of neat code that specifically denote HTTP requests, intersected by semi-transparent virtual arrows, signifying data exchange. This scene captures the essence of data communication and coding, but without any explicit textual elements, brand names or human figures. Soothing color gradients of blue and white can provide a sense of calmness and inspire focus.

Understanding XMLHttpRequest in JavaScript for HTTP Requests

If you are working with JavaScript and need to perform HTTP requests, XMLHttpRequest is a tool you might want to use.

TL;DR: How Do I Make HTTP Requests Using XMLHttpRequest?

Use XMLHttpRequest to create, configure, and send HTTP requests to servers and handle responses, like so:


var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
console.log(response);
}
};
xhr.send();

Let’s break down the steps in detail next.

What Is XMLHttpRequest?

It is an API available in web browsers that provides client functionality for transferring data between a client and a server.

Setting Up an XMLHttpRequest

To start using XMLHttpRequest, you need to instantiate it and configure the request.

Begin by creating a new instance:


var xhr = new XMLHttpRequest();

Open a Connection

The open() method initializes the request, or re-initializes an existing one, with method, URL, and async indicator.


xhr.open('GET', 'http://example.com/api/data', true);

‘GET’ could be replaced with ‘POST’, ‘PUT’, ‘DELETE’, etc., depending on the action you want to take.

Handling the Response

Assign a callback function to onreadystatechange to handle the response:


xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};

This function is executed every time the readyState of the request changes.

Sending the Request

With everything set up, you can send the request:


xhr.send();

This will make an asynchronous HTTP request to the server.

Handling Different HTTP Methods with XMLHttpRequest

You can use different HTTP methods like POST, PUT, DELETE, etc., by simply changing the first argument in the open() method:


xhr.open('POST', 'http://example.com/api/data', true);

For POST requests, you may need to send data:


xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ key: 'value' }));

Dealing with Network Errors

Add an onerror event listener to handle network errors:


xhr.onerror = function() {
console.error('Network error occurred');
};

Setting Request Headers

Custom headers can be set using setRequestHeader():


xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

This is often needed for server-side frameworks to detect AJAX requests.

Overcoming Synchronous Requests Drawbacks

While XMLHttpRequest supports synchronous requests, these are generally discouraged as they can block the UI and degrade user experience.

Always prefer asynchronous requests using XMLHttpRequest for a responsive interface.

Monitoring Progress with XMLHttpRequest

You can track the progress of a request by listening to the progress event:


xhr.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total * 100;
console.log(percentComplete.toFixed(2) + '%');
}
};

The event argument carries details like how many bytes have been downloaded.

Handling Timeouts in XMLHttpRequest

To avoid requests hanging indefinitely, you can configure a timeout:


xhr.timeout = 2000; // time in milliseconds
xhr.ontimeout = function() {
console.log('Request timed out!');
};

Advantages and Limitations of XMLHttpRequest

XMLHttpRequest has been the backbone of AJAX since early in web development, but it also has some limitations, prompting developers to look for more modern solutions like the Fetch API.

Advantages

  • Widely supported: Works in practically all web browsers.
  • Detailed control over HTTP requests: Such as setting headers and monitoring progress.
  • Supports both synchronous and asynchronous communication.

Limitations

  • Complex and verbose syntax: Can lead to more code for simple tasks.
  • Lacks promises: Making it harder to write clean asynchronous code.
  • Not as feature-rich: In comparison to the Fetch API.

Using XMLHttpRequest with Promises

To utilize promises with XMLHttpRequest, you can wrap it in a promise:


function makeRequest(method, url, data) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject(xhr.statusText);
}
};
xhr.onerror = function() { reject('Network error'); };
if (method === 'POST' && data) {
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));
} else {
xhr.send();
}
});
}

This function returns a promise, providing a cleaner API that you can use with .then() and .catch().

Frequently Asked Questions

Can I Use XMLHttpRequest for Cross-Domain Requests?

Yes, but the server must include appropriate CORS headers to allow cross-domain requests. If not, you will encounter security errors.

How Do I Abort an XMLHttpRequest?

If needed, you can cancel a request using the abort() method. This is particularly useful for long-standing requests the user no longer needs.

Is XMLHttpRequest Still Relevant with the Fetch API Available?

While the Fetch API is modern and more convenient, XMLHttpRequest is still relevant for legacy support and for applications where the developer requires finer control over the request.

How Do I Handle JSON Responses?

To handle JSON, parse the response text as JSON within the onreadystatechange handler:


var response = JSON.parse(xhr.responseText);

Why Does My XMLHttpRequest Return a Status of 0?

A status of 0 typically means the request failed due to reasons such as the page being requested is not found, CORS policy violation, or the request was aborted.

Does XMLHttpRequest support progress events for upload?

Yes, the XMLHttpRequest object’s upload property has its own progress event you can listen to for upload progress.

Uploading Data with XMLHttpRequest

For sending form data or files to a server, the XMLHttpRequest can be used to perform upload operations.


var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('file', fileInput.files[0]);
xhr.open('POST', 'http://example.com/api/upload', true);
xhr.send(formData);

The FormData interface allows for the asynchronous sending of form data.

Checking Upload Progress

Monitor the upload process by attaching an event listener to the upload object:


xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var uploadedPercent = (event.loaded / event.total) * 100;
console.log('Uploaded: ' + uploadedPercent.toFixed(2) + '%');
}
};

This technique gives users real-time feedback on the progress of their uploads.

Parsing XML Responses

While JSON is commonly used, you might need to deal with XML responses:


xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
parser = new DOMParser();
var xmlDoc = parser.parseFromString(xhr.responseText,'text/xml');
console.log(xmlDoc);
}
};

Using a DOMParser, you can convert a string into an XML document and interact with it as a DOM object.

Response Types and XMLHttpRequest

Set the responseType property to define the type of the response object returned by the server:


xhr.responseType = 'json';

By setting the responseType to ‘json’, you tell XMLHttpRequest to automatically parse the response as JSON, making the data ready to use.

Cancelling an XMLHttpRequest

If you need to abort an ongoing request, use the abort() method:


xhr.abort();

This can be useful when navigational actions take place or you need to handle user-initiated cancellations.

Handling HTTP Status Codes

It’s crucial to handle different HTTP status codes returned by the server:


xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
switch(xhr.status) {
case 200:
console.log('Success:', xhr.responseText);
break;
case 404:
console.log('Not Found');
break;
case 500:
console.log('Server Error');
break;
default:
console.log('Other Error', xhr.status);
}
}
};

Using a switch statement enables efficient handling of various responses.

Considerations for Security with XMLHttpRequest

Keep security in mind when making HTTP requests:

Prevent Cross-Site Scripting (XSS): Ensure the server sanitizes and escapes any user-generated content.

Validate responses: Always validate on the server side to avoid malicious data handling.

Secure endpoints: Use HTTPS to encrypt data packets sent between the client and server.

Comparing XMLHttpRequest to Other HTTP Request Methods

While XMLHttpRequest is a solid choice, other APIs like Fetch and Axios offer additional benefits:

Fetch API Pros

  • Simpler, promise-based syntax for asynchronous operations.
  • Built-in JSON support for parsing response data.
  • Streams interface for handling large downloads or uploads.

Axios Pros

  • Auto transforms JSON data on requests and responses.
  • Interceptors to perform actions before requests or responses are handled.
  • Protection against CSRF.

XMLHttpRequest Pros

  • Fine-grained control over request and response headers.
  • Support for older versions of Internet Explorer that don’t support Fetch.
  • Ability to monitor the progress of requests and uploads.

Frequently Asked Questions (continued)

Can I Set Custom Timeout for XMLHttpRequest?

Yes, set the timeout property of the XMLHttpRequest object to specify how long the request should take before automatically being terminated.

Is It Possible to Send Asynchronous Requests in Sequential Order?

Yes, chain promises or use async/await syntax to ensure asynchronous requests resolve in a sequential order.

How Can I Convert FormData to JSON While Using XMLHttpRequest?

Iterate over FormData entries and append them to a JavaScript object which can then be converted to JSON.

Grasping the fundamentals and advanced uses of XMLHttpRequest is essential for JavaScript developers who wish to interact with servers. The possibilities with this API are vast, but it’s important to keep in mind that modern alternatives like the Fetch API and Axios exist and may offer simpler and more robust solutions, depending on the specific use case.

By equipping yourself with knowledge about XMLHttpRequest, you can choose the right tool for your project’s requirements and ensure efficient data transfer in your web applications. Also, keep in mind the importance of error handling, security, and efficient data parsing when working with HTTP requests to create dependable and user-friendly applications.

In the constantly evolving landscape of web development, understanding different methods for making HTTP requests allows you to weigh the pros and cons, and pick the most suitable one for your projects. Regardless of the method you choose, proficiency in handling HTTP requests is a cornerstone of developing interactive and dynamic web applications.

Shop more on Amazon
Shop on Amazon

More Like This

See More