The following diagram may help you understand the difference between full-page reloads and lightweight Ajax calls:
In addition to just making your site look and feel slicker by changing small bits, Ajax also prevents requiring full-page reloads, which - especially in the case of heavy-load pages - can drastically improve the efficiency and usability of your web site. It allows you to only serve up the new information that you want without having to serve up the rest of the surrounding content that hasn't changed, and it improves the user experience by not jumping the page to the top again, leaving other changes that have been made on the page untouched, and allowing the user to better maintain their orientation on the current page after a change has been effected. In game scenarios, Ajax is also immensely useful in saving progress, points and other data states without requiring the game play to be put completely on hold in order to refresh the page. It also allows your page to ping for new data, making up-to-date news feeds and chat boxes possible where they otherwise would have required 'refresh' or 'submit' buttons.`
It typically boils down to a single function. There are two ways these functions can work. They can be separately threaded functions that allow the rest of the script on the page to continue and that simply perform a callback function that you pass along with it once the httpRequest is complete, or they can be functions that halt the rest of the page while the and directly return any output that is generated from the httpRequest. The examples we'll look at will involve the latter (a direct call and output return), but many libraries like Dojo and jQuery make use of the former type, which allows you to pass in a function to call after completion without stopping whatever else is going on on the page.
The "method" argument requires to either "get" or "post". If you're calling a relatively short set of query parameters in your URL (the stuff that comes after the '?'), then you can use "get" without any trouble. For larger data submissions, you'll want to use "post". The disadvantage to "post" is that if you later use a tool like Firebug to view the call that was made, the page that opens won't explicitly show the parameters in the address bar. However this is usually unproblematic, and in many cases, the use of "get" or "post" will have little or no impact on your application.
The "file" argument is a string containing the location/name of the file that you will be submitting this request to. This file will often be a PHP or other dynamically-generated file, because that way any parameters that you submit can be considered before generating the custom output that will be returned to you. This will make more sense in examples soon to come.
Here is a more fleshed-out example of it's use. First, note the contents of this text file, which is located in the same directory as this tutorial page.
It was that easy! The Ajax call simply grabbed the output from sample1.txt (which is static output representing an HTML table) and dropped it right into the output1 div as instructed. Note that I included an third parameter (the empty "") because there were no variables to pass to the sample1.txt page... but that could have actually contained some variable values if my script required it.
Having just mentioned it, let's look at a PHP example so you can see the usefulness more clearly. Since you can't see the source of sample2.php, here's what it contains:
What's the next logical step? Why to collect the number from the user, of course!...
Enter a number:
Recommended next: Play with the Google Maps API!