XMLHttpRequest vs Fetch Quiz

XMLHttpRequest Methods and Events

• The xhr.send() method is used to send the request to the server.
• The xhr.onprogress event is triggered periodically while the response is being downloaded, reporting how much has been downloaded.

Error Handling

• The xhr.onerror event is triggered when an error occurs during the request.

Request Configuration

• The xhr.open() method is used to specify the main parameters of an XMLHttpRequest request, such as the method, URL, and asynchronous mode.
• The xhr.open() method is used to configure the XMLHttpRequest request, but does not open the connection.

Request Body

• The optional body parameter of the xhr.send() method contains the data to be sent with the request.

Request Completion

• The xhr.onload event is triggered when the request is complete, even if the HTTP status is like 400 or 500.

XMLHttpRequest Usage

• XMLHttpRequest should be used instead of fetch when you need more control over the request, such as setting headers, sending binary data, or tracking progress.
• The primary reason to use XMLHttpRequest in modern web development is to have more control over the request and response.
• The two primary steps to do a request using XMLHttpRequest are:
  • Calling the xhr.open() method to configure the request.
  • Calling the xhr.send() method to send the request.

Synchronous and Asynchronous Modes

• In synchronous mode, the script execution is blocked until the request is complete, while in asynchronous mode, the script execution continues, and the request is handled in the background.
• The main difference between synchronous and asynchronous modes of operation in XMLHttpRequest is that synchronous mode blocks the script execution, while asynchronous mode does not.

Test your knowledge on XMLHttpRequest, an important browser object that enables HTTP requests and data manipulation in JavaScript. Learn about its functionalities and how it compares to the newer fetch method in modern web development.