Simple AJAX example using jQuery: AJAX, 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.

Download from jQuery's site and store it on your server

Host it externally through via Google's jQuery stored 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>

1:

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>

1:
2:
3:
4:
5:
6:
7:
8:

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>

1:
2:

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'];
?>

1:
2:
3:

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>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

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.

[Ed. Note:] ...subject, of course, to cross-domain browser security policies. That is, the target page typically must be hosted on the same domain and subdomain as the original page that issues the jQuery AJAX requests.

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!

Gain Access to all our Tech Resources

Get personalized answers

Ask unlimited questions

Access Proven Solutions

Search 3.2 million solutions

Read In-Depth How-To Guides

1000+ articles, demos, & tips

Watch Step by Step Tutorials

Learn direct from top tech pros

And Much More!

Your complete tech resource

30-day free trial. Register in 60 seconds.

Simple AJAX example using jQuery

AJAX

jQuery

Jquery

About The Author

Comments

Add your Comment

Join Experts Exchange Today

Gain Access to all our Tech Resources

Get personalized answers

Access Proven Solutions

Read In-Depth How-To Guides

Watch Step by Step Tutorials

And Much More!

Top Jquery Experts