What triggers the invocation of the onerror handler in XMLHttpRequest?

I am facing a bit of confusion when trying to understand the functionality of XMLHttpRequest's handlers. After reading the specification regarding the onerror handler, it mentions:

error [Dispatched ... ] When the request has failed.

load [Dispatched ... ] When the request has successfully completed.

The issue lies in determining what exactly constitutes as "the request has failed". This could mean

  • the request was unable to be sent at all (e.g., Connection refused and similar errors), or
  • the above scenario plus receiving an error code from the server (e.g., 404)

Furthermore, I am curious to know if this implies that onerror and onload should never trigger simultaneously.

According to this resource, the execution of the onerror handler is dependent on the status code, while onload depends on the readyState. Although this suggests they are not mutually exclusive, I am unsure if this information holds authoritative weight.

I am seeking clarification because when using the latest Opera snapshot, I noticed that onload is being triggered even when encountering a 404 status code. While checking the status is a reliable method, I am uncertain whether this aligns with the specifications or if it's simply a workaround for an issue in Opera.

javascriptajaxxmlhttprequest

Answer №1

It was noted in the feedback that onerror triggers when there is a breakdown on the connection level. Should the problem be solely at the application level, such as an HTTP error code being transmitted, then onload will still trigger. Make sure to specifically check the status code returned in your onreadystatechange handler.

Keep in mind, a denied cross-domain request will also cause the onerror handler to execute.

Answer №2

Aside from apsillers' response, it's important to remember that XMLHttpRequest automatically handles redirects in the background. This means you won't need to worry about checking for reply codes in the onload event - as this event will only be triggered once on the final call. Additionally, if you're sending payload data with the POST method and the request is redirected, XMLHttpRequest will switch the method from POST to GET and discard any payload data for security purposes. While the onload event will still occur, you'll have to manually resend your request to the new destination.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

sending a POST request with fetch

When it comes to making AJAX requests, I used to rely on jQuery in the past. However, with the rise of React, there is no longer a need to include the entire jQuery library for this purpose. Instead, it is recommended to use JavaScript's built-in fetc ...

javascriptajaxfetchaxios

Quantities with decimal points and units can be either negative or positive

I need a specialized input field that only accepts negative or positive values with decimals, followed by predefined units stored in an array. Examples of accepted values include: var inputValue = "150px"; <---- This could be anything (from the input) ...

javascripthtmlarraysvalidationvue.js

How to filter out content not contained within a specific form tag using Javascript

One feature of my webpage displays restaurant reviews, each with a like button. However, the issue arises when submitting the like form: everything within and outside of a particular form tag gets sent to the back-end. This makes it challenging to determin ...

javascriptajaxformssubmitejs

Using the jqueryRotate plugin to rotate an image by 90 degrees

Is there a way to rotate images on a webpage using the JQueryRotate script? I have 10 images that I want to be able to rotate when clicked, but I'm not sure how to implement it. Any assistance would be welcomed. This is the HTML code for the images: ...

javascriptjqueryhtmlrotation

Unable to submit form in Nextjs using react-bootstrap

Instructions To create a registration form, follow these steps: Fill out the form on the register page and then click submit. The react-bootstrap button will trigger the handleSubmit() function using onSubmit={}. Expected vs Actual Outcome I attempted va ...

javascriptnode.jsreactjsnext.jsreact-bootstrap

Dealing with the state of an array of checkboxes: What you need to know

Is there a way to individually control the checked state of an array of checkboxes? Here is the array in question: const CheckboxItems = t => [ { checked: true, value: 'itemsCancelled', id: 'checkBoxItemsCancelled', ...

javascriptreactjsecmascript-6

Guide to updating text color in marquee tag with each reload

Seeking assistance in addressing the following issues... On each refresh, I want to change the text color within a marquee tag by utilizing a JavaScript function. I have obtained a color code like #18EEC5... however, when attempting to call the script fun ...

javascripthtml

Using javascript to overlay and position many images over another image

I've searched extensively but haven't been able to find any relevant answers here. Currently, I am developing a hockey scoring chance tracker. My goal is to display an image of the hockey ice where users can click to mark their input. Each click ...

javascriptjqueryhtmlcanvas

Converting an Array of Users to an Array of Email Addresses Using Google Apps Script

I am currently in the process of creating a script using Google Apps Script. My goal is to verify whether a user with the email address [email protected] has viewing or editing privileges for a folder. If the user does not have either privilege, I wa ...

javascriptarraysgoogle-apps-script

"Utilizing the include method in Rails 4 to serialize multiple variables within the to_json

When utilizing :include in json-response with to_json, I can achieve associations like this: def stats @orders = Order.all respond_to do |format| format.json { render :json => @orders.to_json(:include => :review) } end end Although it fun ...

rubyjsonajaxruby-on-rails-4

Disappearing act: Ionic tabs mysteriously disappear when the back button

Whenever I navigate in my ionic app, I notice that the tabs-bar disappears when I go to different pages and then return to the tabs. See Demo Code tab1 Here is a sample link to navigate to other pages: <ion-label routerDirection="forward" [routerLi ...

javascriptangulartypescriptionic-framework

The console.log() function does not accurately display the true value

While looping through a list and using a @click function to update other elements, I have encountered an issue with the index values bound to selectedFixtures. Each time I click on an element, it initially prints out [], and then on subsequent clicks, it ...

javascriptvue.js

Componentizing Vue for Better Reusability

Currently tackling a large application filled with legacy code, I'm facing a repetitive issue that has popped up twice already. It's becoming clear to me that there must be a more efficient way to solve this problem. Here's what I'm dea ...

javascriptlaravelvue.jsvuejs2vue-component

CSS Style in Safari does not conceal Div on Tailwind

When switching the screen from desktop to mobile in ReactJS/Tailwind, I have hidden certain images using the following code: <div className="flex shrink flex-row justify-between w-[60%] h-[25%] sm:w-[95%] sm:h-[52%] mb-[-10px] mt-[-15px] lg:mt-0&qu ...

javascripthtmlcssreactjstailwind-css

Tips for connecting Vue data to a dropdown menu

While diving into Vue.js, I'm encountering a puzzling issue. Despite receiving data from the server (5 records), it's not populating the <select> element properly. Instead of multiple options, all I see is a single one displaying {{dept.DNa ...

javascriptvue.jsvuejs2

Renewal of a personalized linestring layer in MapBox GL JS triggered by a Geocoder event

I am currently using MapBox GL JS and I have a requirement to redraw a linestring layer whenever a Geocoder.on event occurs. Upon examining my code, I noticed that the linestring only gets drawn on the first .on event, and nothing happens during subsequen ...

ajaxmapbox-gl-js

What is the process for obtaining a hashed URL from an AJAX response after submitting a form?

I am currently using a WordPress exchange plugin and I am looking to streamline the bidding process by making it ajax-based. When I submit one of the forms, the page redirects to a blank page displaying a response that looks like this: {"status":"success" ...

phpjqueryajax

Limit the frequency of rendering JSX elements in React by implementing debouncing techniques

Is there a way to delay the rendering of a jsx element in order to smooth out the animation? I have an expanding panel with content inside, and when the panel is empty, the animation works well. However, if the panel already contains content, the expansion ...

javascriptreactjsmaterial-ui

Using AngularJS to create a form and showcase JSON information

My code is below: PizzaStore.html: <!DOCTYPE html> <html ng-app="PizzaApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Delicious pizza for all!</title> ...

javascripthtmljsonangularjs

I plan to compile a collection of names in a text field and then have the ability to select and access each name individually with just a click

I am currently working on a project that involves creating an admin site using Firebase. One of the main features of the site is large text fields that display information which can be modified. For instance, the user management page includes text fields ...

javascripthtmlcssfirebasetextfield