XHR vs jQuery ajax vs get vs fetch

[ahmed1234550]

which one should i use and why?
and what is the differents (im a beginner)

var xhr = new XMLHttpRequest();
xhr.onload = function() {alert(1)};
xhr.open("get", "http://--------.com", true);
xhr.send();

var xhr = new XMLHttpRequest();
xhr.addEventListener( "loadend", function() {alert(1)} );
xhr.open("GET", "http://--------.com", true);
xhr.send();

var request = $.ajax({
type: 'GET',
url: "http://--------.com",
async: true,
success: function() {alert(1);}
});

var request = $.get("http://--------.com").done(function() {
  alert(1);
});

fetch("http://--------.com").then(function(response) {
  alert(1);
});

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {"done"}
}
xhr.open("GET", "http://--------.com", true);
xhr.send();

[iMostLiked]

$.get(url) is equivalent to $.ajax({type: "GET", url: url}), so it's just a short form.
Whether you use $.get or $.ajax depends on how far you have to specify the request. With $.ajax you can pass some more options to the request.

$.ajax is the same as XHR, only made easier to use.

Fetch has some missing events in contrast to XHR, like:
- progress event

xhr.upload.onprogress = function(evt){
    // Math.round((evt.loaded / evt.total) * 100) + "%"
};
xhr.upload.onload = function(){
    // finished
};

- overriding content-type header of the response
...

I'd recommend using jquery's methods and if it's a simple request $.get.

[ahmed1234550]

Originally Posted by iMostLiked

$.get(url) is equivalent to $.ajax({type: "GET", url: url}), so it's just a short form.
Whether you use $.get or $.ajax depends on how far you have to specify the request. With $.ajax you can pass some more options to the request.

$.ajax is the same as XHR, only made easier to use.

Fetch has some missing events in contrast to XHR, like:
- progress event

xhr.upload.onprogress = function(evt){
    // Math.round((evt.loaded / evt.total) * 100) + "%"
};
xhr.upload.onload = function(){
    // finished
};

- overriding content-type header of the response
...

I'd recommend using jquery's methods and if it's a simple request $.get.

thanks for your help i appreciate that, now i understand abit more
i have another question, so jquery is a library, ajax is doing the samething as xhr but behind the scenes to make it easier right?

[iMostLiked]

Originally Posted by ahmed1234550

thanks for your help i appreciate that, now i understand abit more
i have another question, so jquery is a library, ajax is doing the samething as xhr but behind the scenes to make it easier right?

Yes, correct!

[ahmed1234550]

Originally Posted by iMostLiked

Yes, correct!

alright thanks for your help

#close

[Serraniel]

#close

^