Question 279842 in Html Question posted in
Some basic documentation can be found here.

Html – HTTP Form Element vs Fetch and XMLHttpRequest

I am currently learning about web development and came across HTTP. One thing that is confusing me is how exactly to make HTTP requests. In the videos I’ve watched the main way they send HTTP requests are through Form Elements. Doing a little bit more research, I also found out that HTTP requests can be done manually via Fetch and XMLHttpRequest.

So I’m a bit confused on how all 3 of these work and the benefits of choosing one over the other. I do apologize if I make any mistakes, but I’m largely confused on the entire matter. I tried manually sending HTTP Requests like PUT and POST with Fetch, but that was kind of a mess. Most tutorials were using Form Elements to do so, so now I’m left wondering if that’s just how it should be done.

I also read over Sending forms through JavaScript but it completely went over my head.

So I tried looking up various tutorials and websites to explain the matter of HTTP requests with HTML/CSS & Javascript. I’m hoping that someone can explain the differences between Forms, Fetch, and XMLHttpRequest. And what are the tradeoffs of using one over the other if that is applicable in this case.

Tags:

2

Answers


  1. 0

    1. Forms:

      • How they work: Forms are HTML elements that allow users to input data and submit it to a server. When you submit a form, the browser typically sends an HTTP request to the server.
      • Use case: Forms are suitable for basic data submissions, especially when you have user input like text fields, checkboxes, etc.
      • Tradeoffs: Forms are good for simple cases but might not be as flexible or powerful as other methods when you need more control over the request or when dealing with more complex data.

    2. XMLHttpRequest:

      • How it works: XMLHttpRequest is an older JavaScript API for making HTTP requests. It provides a way to send HTTP or HTTPS requests and handle the responses directly in the browser.
      • Use case: It’s versatile and can handle a variety of request types. It’s widely supported but has a more complex API compared to newer options.
      • Tradeoffs: It’s considered somewhat outdated and has a less intuitive API compared to Fetch. However, it’s still used in some scenarios, especially when dealing with older codebases.

    3. Fetch API:

      • How it works: Fetch is a modern JavaScript API for making HTTP requests. It provides a simpler and more powerful interface than XMLHttpRequest.
      • Use case: Fetch is the recommended approach for making HTTP requests in modern web development. It supports promises and provides a cleaner syntax compared to XMLHttpRequest.
      • Tradeoffs: It might not be as widely supported in older browsers, but this is becoming less of an issue as more browsers continue to update.

    Tradeoffs and Recommendations:

    • If you’re working on a modern project and don’t need to support older browsers, using the Fetch API is recommended for its simplicity and flexibility.
    • If you’re dealing with an older codebase or need to support older browsers, you might still encounter XMLHttpRequest in use.
    • Forms are suitable for simple data submissions but might lack the control and flexibility needed for more complex scenarios.

    In summary, Fetch is often the preferred choice for making HTTP requests in modern web development due to its simplicity and power, but understanding Forms and XMLHttpRequest can be beneficial, especially when dealing with existing code or specific use cases.

    Login or Signup to reply.
  2. 0

    I’m no expert on this topic but there are different use cases for Form, fetch and XMLHttpRequest

    1. fetch is preferred to XMLHttpRequest because it is newer and allows a more modern interface to perform requests. In comparison to forms, you can choose the body/request content through JavaScript.
    2. The form elemenent is used when you want to send a form (user input) to a backend server. Form elements send data based on their children (sub elements). Sending a form also causes the page to reload. I prefer the form element when sending data with little overhead, considering it is meant as way for the end user to send data to a server.

    TLDR; Use fetch if you want a modern api, use XMLHttpRequest if you need an older api, and use a form element if you want to send data from a series of html elements

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search