Forms vs AJAX

There are primary ways a web frontend can communicate to the backend - forms and AJAX. There's actually a big difference between these 2 methods, but when you're learning them for the first time they can be a bit confusing and a common mistake I've seen is trying to mix the two.

Let's learn a little more about each method and how they are different from each other.

Forms

A bit of history. Forms used to be the only way for a user of a website to communicate with the server. Essentially, they are an HTML-only way to send data to the server. Let's look at an example of a web page that uses forms. Can you guess what the below code does when the user clicks the "submit my info" button?

<form action="example.com/hello" method="POST">
    <input type="text" name="my_name" />
    <button type="submit">submit my info</button>
</form>

If you guessed that the web browser would send the contents of the form input elements to the server, you guessed right! In particular, the data that gets sent to the server looks like a dictionary with a single key and value:

{ my_name: "<whatever the user inputted into the single text input element>" }

Notice that the single key - my_name - corresponds exactly to the name attribute of the html text input element.

Now, some things stand out to us about the behavior of the web page after the user clicks submit:

• When the user receives the server's response, the entire web page will reload and interpret the server's response as a new HTML page! Yes, you read that right - for this reason, when we use form elements to send data to the server, the server should always be returning a completely new HTML page, rather than chunks of data, because the web browser has this default behavior of interpreting the response as a new page.
• There is very little we can do to change how the web page sends data to the server. That is, it will by default send data in this prescribed way of sending a dictionary with keys corresponding to the input element's name attributes, and values corresponding to the respective input element's values.
• The good thing is that we generally don't need to change this behavior, and in the olden days before web applications (when web sites were literally just HTML) this was all people needed. We still teach the form way of doing things because of this simplicity - we just put all of the interactivity on the server.

AJAX

Sometime in the mid 2000s, web applications got a lot more complex, and people realized that reloading the entire web page when we receive data from the server was stupid. So AJAX ("Asynchronous JavaScript and XML") was invented. The acronym makes it sound pretty complicated, but it's actually quite simple:

• We can now write code that decides what, how, and when to send data to the server.
• The same code can decide what to do with the server's response. No more reloading the entire page!

Here's the same toy example as above but written using AJAX:

<input type="text" id="my_name" />
<button id="submit_btn">submit my info</button>

<script>
$("#submit_btn").click(function(e) {
    var textInput = $("#my_name").val();
    $.post("example.com/hello", { "my_name": textInput });
});
</script>

Now this may look very different than the example above using form elements, but realize that it does basically the same thing, just using JavaScript/jQuery! The main differences are:

• We are no longer wrapping everything in <form> tags.
• Instead of having a name attribute, the text input element now has an id attribute that says id="my_name". This is because we're selecting the text input element based on its id in our JavaScript code.¹
• We're using JavaScript to define when to send data to our server now. Specifically, we are sending the data to the server when the user clicks the button with id="submit_btn".

Now, the form used to decide everything for us, including what data to send to the server (forms automatically grab the values of all input elements in between the form tags) and how to send that data (as a dictionary with keys corresponding to input element name attributes). We're no longer using forms, so we have to decide these things ourselves.

In particular, we have to explicitly grab the value of the input element ourselves and we also have to explicitly define a dictionary with the key "my_name". This is a bit of extra work we have to do, but in return, we get more flexibility.

¹This is reflecting common practice in the industry to use id tags as unique identifiers for HTML elements. In fact, this is so common that jQuery added a special selector for ids - all we have to do is call $("#whateveridyouwanttofind") and the result will be the HTML element with the id attribute of id="whateveridyouwanttofind".

We can pick arbitrary HTML elements to be our submit buttons.

So far we have been using a <button> element as our "submit button" that does the data submitting when the user clicks it. But using JavaScript, we can pick any arbitrary element to be our "submit button" - even a random <div>!

<input type="text" id="my_name" />
<div id="some_random_html_element">THIS DOESN'T LOOK LIKE A SUBMIT BUTTON???????</div>

<script>
$("#some_random_html_element").click(function(e) {
    //...
});
</script>

We can do whatever we want with the server's response.

E.G. We don't have to reload the whole page, and can just take the bits that we need and change the HTML page dynamically. This is the real benefit of using AJAX.