<

Go Premium for a chance to win a PS4. Enter to Win

x

Simple AJAX example using jQuery

Published on
11,312 Points
4,412 Views
4 Endorsements
Last Modified:
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>

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>

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>

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

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>

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!
4
Comment
3 Comments
 

Expert Comment

by:dineshfdr
Keep it up..Dude
0
 
LVL 3

Expert Comment

by:Pedro Chagas
Congratulations! Excellent article.
0
 
LVL 36

Expert Comment

by:Loganathan Natarajan
Thx, great tip
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Join & Write a Comment

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month