Learn to Code via Tutorials on Repl.it!

← Back to all posts
JavaScript's XMLHttpRequest
ChezCoder

Hello! Welcome to a tutorial on JavaScript's XMLHttpRequest. Now to get this straight, THIS TUTORIAL IS NOT FOR PEOPLE STARTING JAVASCRIPT. If you want to learn JavaScript, this is NOT the place.

Requirements

To use this tutorial, you need to know the following:

  • How to code in JavaScript.
  • Know what an HTTP Request is.
  • Know what HTTP Request Methods are.
  • Know how to use the document object.

Off with the stupidness, lets get programming!

What is an XMLHttpRequest?

An XMLHttpRequest is just a fancy way in saying: JavaScript's HTTPRequestSender. All it really does is send requests to read files like .txt, .xml, .json, etc. The name is kind of deceiving as you can actually send requests to other files. Not only .xml files. The XMLHttpRequest is part of something called AJAX. AJAX stands for Asynchronous JavaScript and XML. According to Google, AJAX is "a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and JavaScript." Basically, it is a better and faster way of updating webpages asynchronously, or meaning the user doesn't have to reload for the content to update.

Pros and Cons

Pros

  • Very fast and efficient way of reading files without libraries
  • Wide browser support & easy fallback code
  • Can read all sorts of files, not only .xml files
  • Can be easily used to validate forms
  • Reduces bandwidth

Cons

  • XMLHttpRequests can only send requests to local files/pages. So if you sent an XMLHttpRequest from https://exampleSite.com, you wont be able to get data from https://exampleSite2.com. There is one exception however, you can read .json files across the internet.
  • Since XMLHttpRequests are open source, people can easily view the source and change it making your site a bit less secure. Though precautions can be taken.

Code

Step 1: Create the XMLHttpRequest obj.


Step 2: Open gateway.


Step 3: Send Request.


Step 4: Get the response.


Step 5 [OPTIONAL]: Parse the file.

Thank you for reaching the end of the tutorial! If you like it, please UPVOTE!!!

If you have any questions about this topic, you can just comment below. I will try my best to reply with the my best answer!

:P

References

Voters
HewoPrsen
HahaYes
Bookie0
Highwayman
bobchewmango
BernadetteB
PowerCoder
StealthHydra179
NoelB33
AmazingMech2418
Comments
hotnewtop
Muffinlavania

Heres some attention, and also the equation to life

Pizza+Nodejs=ChezCoder

But one small tweak...

(Pizza+Nodejs=ChezCoder)<Muffinboi

ChezCoder
Bookie0

Pretty neat!

xxpertHacker

I'm suprised that no one said fetch yet. fetch is the modern equivalent of the ancient XMLHTTPRequest, you might want to look into it too. I prefer fetch as it feels easier to use. And fetch avoids callbacks, thus making it much faster and preferred.

AmazingMech2418

Nice! However, please use let instead of var. var is fine, but it causes variable hoisting which can be an issue in larger programs. Also, I would recommend putting in the xhr.responseText attribute so that beginners who want to use text or JSON can parse the responses. Also, maybe you can do a part 2 with payloads for POST requests?

ChezCoder

@AmazingMech2418 yes but we dont want to get confused with those yet

AmazingMech2418

@ChezCoder After learning about variable hoisting, I just started always using let... I know some people prefer const because of its relative immutability, but I always just use let.

ChezCoder

@AmazingMech2418 lol, also step 5 is optional, the actual finished product is step 4

AmazingMech2418

@ChezCoder Oops. Accidentally skipped over that...

ChezCoder

@AmazingMech2418 i use let when a variable is going to be local (in functions, etc) and var is global. Const is for things I wont be changing but of course, i didn't learn about it at the time I made this (this was a repost because it got like 0 upvotes and comments before)

ChezCoder

@AmazingMech2418 lol, its ok, i shoulld probably note that, my fault

AmazingMech2418

@ChezCoder I guess var would be useful for global variables... I just find it easier to just use let so that, let's say if I were to move a basic script to a function or a class, I wouldn't have to change anything to change the scope of the variables.

ChezCoder

@AmazingMech2418 lol, i think you misunderstood me, I just use var and let so when I look back in the code, I can see if the variable was global or local during debugging

AmazingMech2418

@ChezCoder Oh... I thought you meant that you used the variable hoisting to your advantage to make global variables remain global.

Codemonkey51

COOL!

ChezCoder
Codemonkey51
ChezCoder

@Codemonkey51 yay indeed!

:)

Codemonkey51
ChezCoder

@Codemonkey51 I RENAMED THE POST SHHHH

Codemonkey51

You did? @ChezCoder

ChezCoder
Codemonkey51