Kevin Powell - Community•4mo ago

AJAX or fetch()?

Hey everyone, I just finished learning HTML/CSS and a bit of DOM manipulation. I decided to learn jQuery because it seemed easier for tasks like hiding or showing a div with a button click and adding some animations. Recently, I came across an AJAX course on YouTube. After some research, I learned that AJAX is connected to jQuery and allows us to update data without reloading the page. I'm trying to understand the POST and GET methods and discovered that I can create things like chatbots with AJAX. However, I also found a video mentioning that there's a more modern and easier way to handle these tasks using the Fetch() function in JavaScript. Since I'm new to backend or server fetching concepts, I'm excited to learn something new. Can anyone give advice on whether I should stick with AJAX or start with the Fetch() function? Any tips or resources for beginners would be greatly appreciated!

17 Replies

Jochem•4mo ago

jQuery in general is somewhat outdated, and I wouldn't recommend learning it as a beginner fetch is 100% the way to go between $.ajax() and fetch()

Chris Bolson•4mo ago

AJAX = Asynchronous JavaScript and XML. AJAX itself isn't limited to jQuery. jQuery just made it simpler to use compared to the then native method of making calls to remote files in JavaScript. fetch() has now made this process much simpler in modern JavaScript so there really is no need to use the old jQuery method. As Jochem has already said, jQuery in general is now outdated and not really recommended (unless you have to work with legacy projects). In general the term AJAX is still used, wrongly or rightly, for calls made to remote scripts via JavaScript, even if they don't return XML (returning JSON is much more common). In summary, I agree 100% with Jochem, fetch() is the way to go.

buczOP•4mo ago

i only use jQuery for DOM manipulation, because its much easier than ES6 js, if its outdated is there another library or framework that i can use?

Jochem•4mo ago

mind if I ask why you find it easier? my experience with jQuery from back in the 00s is that it's 95% using $(".css.query") and that's just document.querySelector() now as for other frameworks, the industry has shifted towards using component frameworks

buczOP•4mo ago

i find it simpler writing something like: $(document).ready(function () { $("button").click(function () { alert("Button was clicked!"); }); }); than document.querySelector("button")?.addEventListener("click", () => alert("Button was clicked!")); I guess i dont like ES6 pretty much

Jochem•4mo ago

Okay. Just be aware that most workplaces will not be using jquery anywhere other than legacy projects

ἔρως•4mo ago

.click has been deprecated since jquery 3.3.0 and is supposed to be removed in jquery 4 use .on('click', ...) jquery does make html manipulations stupid easy, and has plenty of compatibility fixes for many events however, it does cause some things to be harder than needed, like getting the submitter button from the submit event it does make some things stupid easy though, like sending a form over ajax:

$form.on('submit', function(e){
    e.preventDefault();
    $.post($form.attr('action'), $.serialize($form));
});

$form.on('submit', function(e){
    e.preventDefault();
    $.post($form.attr('action'), $.serialize($form));
});

moving stuff around and adding/deleting is also a lot easier but you are absolutely right in that jquery is more legacy i doubt that new projects use it but cant see why not, if i heard some people say that a 400kb+ runtime in wasm isnt that bad and the stuff it does still make some sense, despite everything being more standard even js now has .closest like jquery

buczOP•4mo ago

thank you so much for this again, i only use jquery for the .click function, might use php for fetching a data and playing around with the get and post method instead

ἔρως•4mo ago

if you use a library just for a single event, you're doing it wrong $.click(function(){ ... }) is just element.addEventListener('click', function(){ ... }) if you're not using the full power of jquery, it isn't worth it to even think about it at all

Jochem•4mo ago

and if you don't want to write out addEventListener, use an IDE with autocomplete, or write your own helper function:

function click (element, handler) {
  element.addEventListener('click', handler);
}

function click (element, handler) {
  element.addEventListener('click', handler);
}

ἔρως•4mo ago

or even write your own "jquery" like this:

class $ {
  #element;
  
  constructor(element) {
    this.#element = element;
  }

  function click(handler) {
    this.on('click', handler);
  }
  
  function on(event, handler) {
    this.#element.addEventListener(event, handler);
  }
}

class $ {
  #element;
  
  constructor(element) {
    this.#element = element;
  }

  function click(handler) {
    this.on('click', handler);
  }
  
  function on(event, handler) {
    this.#element.addEventListener(event, handler);
  }
}

and you can just do $(elem).click(_ => ...)

Jochem•4mo ago

class $ {
  #element;
  
  constructor(element) {
    this.#element = document.querySelector(element);
  }

  function click(handler) {
    this.on('click', handler);
  }
  
  function on(event, handler) {
    this.#element.addEventListener(event, handler);
  }
}

class $ {
  #element;
  
  constructor(element) {
    this.#element = document.querySelector(element);
  }

  function click(handler) {
    this.on('click', handler);
  }
  
  function on(event, handler) {
    this.#element.addEventListener(event, handler);
  }
}

even closer!

ἔρως•4mo ago

even even closer!

class $ {
  #element;
  
  constructor(element) {
    this.#element = typeof element === 'string'
      ? document.querySelector(element)
      : element;
  }

  function click(handler) {
    this.on('click', handler);
  }
  
  function on(event, handler) {
    this.#element.addEventListener(event, handler);
  }
}

class $ {
  #element;
  
  constructor(element) {
    this.#element = typeof element === 'string'
      ? document.querySelector(element)
      : element;
  }

  function click(handler) {
    this.on('click', handler);
  }
  
  function on(event, handler) {
    this.#element.addEventListener(event, handler);
  }
}

it's nowhere as good, but it does the thing-ish

Jochem•4mo ago

lol 😄 Spongebob title card: 307 messages later "Let's just import jQuery..."

ἔρως•4mo ago

i mean, depends on what is actually used but hey, reimplementing a tiny jquery port, like zeptos, is a cool exercise

Jochem•4mo ago

oh, definitely. Lots to learn from it (but we're getting off topic...)

ἔρως•4mo ago

yes we are going back into topic... jquery uses the old and complex XMLHttpRequest, while fetch is a much simpler api there are things that are a lot easier with fetch, like receiving json but there are things that are A LOT easier in xhr, like a file upload progress bar but the basics, both do it really well except that jquery parses the json response automatically for you

Gaming

Programming

AJAX or fetch()?