Simple AJAX example using jQuery

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use.

Why should I use jQuery as opposed to regular JavaScript?

Now I know what you may be thinking... why load a whole JavaScript library/framework, just to do a simple AJAX request?  

My answer:  There is no reason.  Don't.  
I believe that you should only use a library like jQuery if you are solving some complex problems and/or you want to use some of the vast custom plug-ins that are available with some libraries.

Should I host the jQuery library or let Google do it?

There are two ways you can include the jQuery library.

You will see me using the Google-hosted library for the few reasons explained here:
http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/

Enough of the talking, lets get to coding!

In this example I will be using PHP, but since jQuery can be used with just about all web languages - you can use any of them you would like. I am also going to make this article really really simple, so don't expect deep jQuery functionality!

First Include jquery.js (Again, I am using Google)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

Select all Open in new window

Next is the jQuery function that will execute the request

<script type="text/javascript">
                      function ajax_request(first_name,last_name){
                         $.post("somepage.php", { first_name: ""+first_name+"", last_name: ""+last_name+"" },
                             function(data){
                                 $("#return_data_div").html(data);
                         }); 
                      }
                      </script>

Select all Open in new window

Lastly (on this page) we will add the div that will reveal our AJAX results and the link that will execute the function.

<a href="javascript:ajax_request('Greg','Alexander');">Who wrote this article on experts-exchange.com?</a>
                      <div id="return_data_div"></div>

Select all Open in new window

Finally, here is the somepage.php that is nested within the jQuery function as seen above. Because the variables that I pass this page are sent via POST, my PHP program on the host I can access those variables via:
 
     $_POST[ 'var_name' ];

<?php
                      echo $_POST['first_name']." ".$_POST['last_name'];
                      ?>

Select all Open in new window

That is it!  Here it is all together:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
                      
                      <script type="text/javascript">
                      function ajax_request(first_name,last_name){
                         $.post("somepage.php", { first_name: ""+first_name+"", last_name: ""+last_name+"" },
                             function(data){
                                 $("#return_data_div").html(data);
                         }); 
                      }
                      </script>
                      
                      <a href="javascript:ajax_request('Greg','Alexander');">Who wrote this article on experts-exchange.com?</a>
                      <div id="return_data_div"></div>

Select all Open in new window

Remember, somepage.php doesn't have to be PHP -- it can be any page you can access on the web.



Final Thoughts

Now that you have a basic example and can see how simple it can be to use jQuery's AJAX functions, I encourage you to continue to learn this wonderful library.

    http://api.jquery.com/category/ajax/

I plan to post more articles on using jQuery to solve very simple to very complex problems in the near future. I thank you for reading this article and happy jQuery-ing!