[Web dev] – Ajax for Dummies [2]

Hey! What’s up?

So we have got some idea about Ajax in the last post. Basically, it is something that goes to the server, get data for you and return/ display in your page (on the Browser) without reloading the page or loading another page. Easy, right?

Well, so to make it, only one language can do it!!! Make a guess!

Correct! It’s JavaScript (or I’d pretend that you said JavaScript haha). Since JavaScript is the client-side programming language, it runs on your Browser. If you’re not sure, it works after your HTML page has been loaded.


In this post, I will make a simple demo, very simple (before we move to a real-world example in the next post), which is to have Ajax get the data from a PHP page on the server, without reloading the page/ or loading the PHP page to handle it. Ok, let’s codeeee!!!!

  1. We create a folder in htdocs, with two files: index.html and handler.php. The PHP file will return value for Ajax to get and display it in the HTML page.
  2. In the file ‘handler.php’, we code like this:

<?php 

$firstNumber = $_POST['firstNumber'];
$secondNumber = $_POST['secondNumber'];
echo $firstNumber + $secondNumber;

?>

Just this simple, we’re going to get the value of parameter firstNumber and secondNumber from HTML file and return the sum.
 3. In the body of the file index.html, just add a button, a pair of <h2> tag (we will display the return data in these pair of tag) and embed a video from Youtube.

 <button id="btn">Click Me</button>
 <h2>...</h2>

 <iframe width="961" height="541" src="https://www.youtube.com/embed/iWZmdoY1aTE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


You can get the video’s embedded code just by right-clicking on the video on Youtube and choose ‘Copy embed code’. Maybe you’re wondering why I place a video in the HTML page. Well, a video in play without interruption is the most obvious evidence for the fact that a page is not reloading.
Okay, now we have some fun with JavaScript, I’ll put the code directly in the HTML page (for a clear demonstration). Also, I use jQuery as I don’t want the code to get lengthy (do remember to add jQuery CDN or a path to your jQuery file).
HTML code
Let me explain a bit about the code

$(document).ready(function(){

    $("#btn").click(function(){
        $.post("./handler.php", {firstNumber:1, secondNumber:2}, function(data){
             $("h2").html(data);
        });
    });    
}); 

$(“#btn”).click(function()… : When we click the button with id “btn”, it will trigger Ajax to work for you.
$.post(“./handle.php”, {firstNumber:1, secondNumber:2}, function(data)…: there are three ways you can call Ajax, namely as $.post(), $.get() and $.ajax(). $.ajax can be used for both http method post or get as long as we specify it in the parameter. In this post, I use method “POST” (the same to GET) as long as you change the global variable $_POST() to $_GET() in file handler.php.
It has three parameters:
– “./handle.php”: The link that you want to send to data from HTML page to and get the result returned from it.
– {firstNumber:1, secondNumber:2}: The data you send from HTML page to PHP page.
– function(data): this is a callback function (if you haven’t heard of it, it’s okay, just understand it as a function passed into another function as an argument) with the parameter is the data returned from the PHP page. The code in this callback function ($(“h2”).html(data);) is how we do with the data. In this case, we display it in the <h2> tag.
Do you see it running?

Go to the HTML page,  playing the video. While it’s running, click the button ‘Click me’. Wow! number ‘3’ just displays in the <h2> tag, isn’t it? (and the video is still playing). It is the sum of 1 and 3 you sent from Ajax to the file ‘handler.php’. Obviously, PHP on the server has been called to return the data but your page is not reloading at all. Cool, huh?

In the next post, I will make a demo on how GitHub can check the username of members when they register whenever they type each character. Stay tuned!!! I’ll be back soon.

Happy coding!

—————————————

The post content is inspired by my mentor, Mr.K.

 

Leave a Reply

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