Just kiddinggg!!! If you’re reading this and you have no idea about Ajax, you’re not a dummy, okay?
But I reckon that most articles and even tutorials on Youtube are trying to complicate Ajax by explaining this technique with complex terms. No, it does not need to be complicated, and you need to understand it in the easiest way. So here we are!!!
I’ll go through these bullets in this first article of Ajax, so after this, you’ll have an idea of what Ajax is, and ready to move on with a very simple example in the next one.
1. There are only two ways to run a PHP page
They are using href (in <a></a> tag) and submitting a form (with action specifying a PHP page to handle it).
In simple terms, the current page disappears and a new PHP page displays. Even though the form is submitted to the same page, the client may feel it’s the same page, but you need to understand that the page has been reloaded.
For example, you are watching a video. It’s running (obviously), and you click next in the comment section to see the next page (of the comment section of course). As mentioned before, it’s href and your page will be reloaded, the video will start from the first. Let’s do some code:
Here is what we see:
Click the red button the video is running. What will you see? It will quickly refresh and the video starts at the beginning, right?
2. Another annoying example
You’re registering to be a member of a website. In the username or email, it needs to be unique, but the backend can only check it with the database to see if it is unique or not by waiting for you to click on ‘Submit’ or ‘Sign up’ button.
Imagine when you have filled up all the information such as name, password, email, DOB blah blah and then after submit, the username you chose is not available. Guess what? You have to fill in all the information again (because, as I said, it would refresh the page/ take you to another page). After three times like that, you will likely be utterly fucked up and giving up.
Trust me! The developers don’t want that to happen…
3. All hail Ajax!!!
This is when Ajax needs to work.
Look at the pic above. Do you see Ajax? He is the one who brings the username to the server to check whether it is available or not, then bring the result back to your webpage without interfering with the display and behaviour of the existing page.
By this way, the developers save your time and engagement with the website. Look at the example from GitHub here, it will check your username without refreshing the page. You also don’t need to submit anything to the server.
I don’t mean GitHub uses Ajax to do that. But Ajax can do that. Now you have had an idea of what Ajax is. Get yourself ready for the next coding demo in part 2.