Introduction to JQUERY - Intro to AJAX Part - 1

Guest Posts Paolo Nikko Nuñal

AJAX has gain popularity when it comes to querying data from a database due to being asynchronous thus eliminating the need of separate file in getting data. For those of you who don't know it yet, AJAX is an acronym for Asynchronous JavaScript and XML.

In short; AJAX is about getting and loading data in the background and displaying it on the same page without you having to reload it.




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here





Many applications that have use AJAX includes GMAIL, GOOGLE MAPS, YAHOO and many more.

JQUERY on the other hand has already a method that handles with JQUERY no matter what browser you are running through.

Code


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $("#btn-submit).click(function(){
     $.ajax({
       url: check-username.php
       type: "POST"
       data:
       {
           username: d_username; // d_username from input box
           password: d_password; // d_password from input box
       }
       success:
       function(result)
       {
          alert(result);
       }
     });
   });
});


</script>
</head> <body>
<input type="text" name="d_username">
<input type="password" name="d_password">
<button type="button" id="btn-submit">Submit</button>


For the Process.php text file.

Code


<?php
    $username = $_POST['username'];
    $password = $_POST['password'];

echo "The username is".$username;
echo "The password is".$password;

?>


Explanation, the above example deals how you can submit data to a server without refreshing the page. In that example we have two input boxes, with the name "dusername" and "dpassword". In the AJAX method, under data, we pair them with the POST variable and the name of the input box. So the results are "username and dusername" and "password and dpassword".

You can see that we are using the type "POST", you can also change it to GET but make sure that the php file that you use the appropriate methods in retrieving the data. Always remember that once the AJAX sends the data, it always returns the "echo" data. In our case, since we are using PHP we use echo.

This is the simplest form type of AJAX request that you can do, although there are many methods that is not covered in this tutorial.

For more information you can check out Dr. Richard's tutorial.




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here