[Web dev] – Ajax for Dummies [1]

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:

You simply add an embedded code line from Youtube to get the Video

Here is what we see:

What we see from the code above

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…

Will you be annoyed if you have to fill up the form too many times?

3. All hail Ajax!!!

This is when Ajax needs to work.

Do you see him, our hero?

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.

The Ajax guy has checked it for you. Like it?

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.

Happy Coding!!!

Leave a Reply

Your email address will not be published. Required fields are marked *