DEV Community

XMLHttpRequest in JavaScript

Adam Roynon on March 26, 2020

XMLHttpRequest is an object in JavaScript that allows you to send AJAX requests to the server, it allows you to get a response from the server usin...

Read full post

Artem Tamoian • Mar 26 '20

It's 2020, use promise-based fetch() instead.

Adam Roynon • Mar 26 '20

I agree that you there are better solutions now. It's always good to refresh on the underlying principles and workings though

Artem Tamoian • Mar 27 '20 • Edited

Is using var and non-strict equality (==) a part of refreshing on the underlying principles?

Adam Roynon • Mar 27 '20

Using var is fine for these examples as it is block scoped. I could have use the new let/const keywords plus non-strict equality, etc, etc. But for just showing the basics of XMLHttpRequest they're not needed and it would have over complicated the simple examples.

Artem Tamoian • Mar 27 '20

There's no point in using legacy and problematic syntax such as var and ==. For beginners, it makes sense to show correct examples of modern JavaScript. We don't speak Old Slavonic teaching kids Russian, so why should we use the legacy syntax when teaching people how to code?

Artem Tamoian • Mar 27 '20

The last example is even incorrect, XMLHttpRequest will not do JSON.stringify() automatically for you. Try running this code in the console:

var data = {
  id: 13,
  name: "John Smith",
  age: 34
}

var xhttp = new XMLHttpRequest();

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

xhttp.open("POST", "/addUser", true);
xhttp.send(data);

It sends [object Object] instead of JSON you expect.

Adam Roynon • Mar 30 '20

As you have pointed out, a more modern approach to this problem is to use a library such as axios. However, some people (not everyone) enjoy learning about the behind the scenes "magic" that goes into these libraries. I agree, you shouldn't teach beginners bad habits, but they should also know where you're able to use var/let and what the differences are. Imagine you're working for a client who demands vanilla JS or a specific browser compatibility, etc.

Artem Tamoian • Mar 31 '20

Usually there is no need for even axios, because fetch is enough for most of the use cases. And there is Babel for compatibility.

Artem Tamoian • Mar 31 '20

Okay, my point is that you clearly don't have a lot of experience in JavaScript and software engineering. This is totally okay, but if you're not confident in what you're doing, please, don't write articles trying to teach people – you mislead them.

Your content, in general, is not high-quality, most of your articles are basically retelling the docs. And usually retelling inaccurately, this is the problem. You don't make any value to anyone.

It's up to you for sure, though I suggest you finish your bachelor's, work full-time for a few years and get back to blogging with experience and understanding.

Adam Roynon • Mar 31 '20

I appreciate the feedback but it is very presumptuous and condescending, thanks

Pacharapol Withayasakpunt • Mar 26 '20

As I will almost always wrap in new Promise anyway, I would suggest axios, which is XMLHttpRequest based and Promise based.

Of course, fetch is already a Promise.

Adam Roynon • Mar 26 '20

Yes I agree, axios is a brilliant little library to handlr async requests