Shouldn't async Javascript XMLHttpRequest set XMLHttpRequest request header by default?

Question

I've made small async GET request to my server with vanilla js.

var rReq = new XMLHttpRequest();
      rReq.onload = function (e) {
          window.updateCartnRows(e.target.response);
      };
      rReq.open('GET', '/usr/cart/xhrRemoveItemsByType/' + type, true);     
      rReq.responseType = 'text';
      rReq.send();

From the client's point of view it works as expected, but my server doesn't treat it as async request, it fails xhr check if I set it.

Equal Jquery request works fine:

 $.get('/usr/cart/xhrRemoveItemsByType/' + type, function (e) {
      console.log(e);
      window.updateCartnRows(e);
  });

The difference in X-Requested-With "XMLHttpRequest" http header, which had been set by default in Jquery request. I found that vanilla js query can be fixed with this line:

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

But I'm in doubt about this solution as in documentation (e.g. MDN) nothing mentioned about necessity to set this header, just true parameter for async in XMLHttpRequest.open() method.

T.J. Crowder · Accepted Answer · 2016-12-08T12:26:28.760

1

First, you're conflating unrelated things: Whether the request is async, and whether the request originated from an XMLHttpRequest object, have nothing to do with one another.

Nothing in the XMLHttpRequest specification says it has to set that header. Historically, some implementations have set it, but that's not what's been standardized.

jQuery's source code involves setting that header explicitly (except on cross-origin requests), which is why you see it in the request made via jQuery's XHR wrapper.

If you want the request to have the header, just use the code you've included in your question to add it with setRequestHeader before calling send.

edited Dec 08 '16 at 12:26

answered Dec 08 '16 at 12:16

T.J. Crowder

1,031,962
187
1,923
1,875

I understand that XMLHttpRequest is not always async, but I'm sending namely async XMLHttpRequest. (Using xhrReq.open(method, url, async); with true for async). After reading docs I've had expectations that it will be marked as async for server(via http headers?) somehow. – Vsevolod Dec 08 '16 at 12:19
@SMetana: Nope. :-) The server doesn't care whether the client is held up waiting for the request to complete or not. (Also: Passing `true` for the second argument does exactly nothing that leaving it off would do. The default value of the argument is `true`.) – T.J. Crowder Dec 08 '16 at 12:19

score 1 · Answer 2 · answered Dec 08 '16 at 12:17

1

XMLHttpRequest is just a http client to send http request. There is no async/sync in http protocol. It's just a view in browser.

answered Dec 08 '16 at 12:17

acrazing

1,955
16
24

score 1 · Answer 3 · answered Dec 08 '16 at 12:20

1

Setting the header is an jQuery specific thing see https://github.com/jquery/jquery/blob/master/src/ajax/xhr.js#L59

You can read more about the reasons for doing so at What's the point of the X-Requested-With header?

I think your implementation of setting it is straight forward and correct if your backend requires it.

answered Dec 08 '16 at 12:20

ebi

108
5

Thanks for pointing this out. If jquery authors do it the same way, I feel more confident about this solution. – Vsevolod Dec 08 '16 at 12:47

Shouldn't async Javascript XMLHttpRequest set XMLHttpRequest request header by default?

3 Answers3