<

Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x

Simple AJAX example using jQuery

Published on
11,268 Points
4,368 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Congratulations! You’re Certified – Now What?

Starting a new career can be overwhelming. Becoming certified in your field of expertise is a great start, but where do you go from here?  Here are some tips to help you on your career journey.

Join & Write a Comment

The viewer will learn how to dynamically set the form action using jQuery.
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…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month