What is AJAX, really?

I have to start using AJAX in a project and I don't know where to start. Can someone please help?

Solution 1:

Asynchronous JavaScript And Xml. A technique for achieving bi-directional, script-driven communications between Web browsers and servers via HTTP.

See also:

• definition on Wikipedia
• AJAX Introduction on w3schools
• Ajax Workshop 1 on Ajax Lessons

Edit: As pointed out by Nosredna, JSON is often used in place of XML.

Solution 2:

The rough idea in English:

You have a web page. Some event (can be a button press or other form event, or just something triggered by a timer) occurs and triggers JavaScript code that asks the server for fresh information (like the latest value of GOOG stock).

There's a piece of code on the server that collects the info you passed and sends some info back. That's different from the page-serving job the server usually has.

When the server answers, a callback function (that you specified in the JavaScript call to the server) is called with the info from the server. Your JavaScript code uses the info to update something--like a GOOG stock chart.

Solution 3:

Not to be confused with the cleaner, AJAX, the technology term, is really describing a framework or better stated as a technique for using XML and JavaScript to make asynchronous calls to server side code...

Here are some good code samples. And some more.

While many of these samples above show how to create all of the XML Request objects, if you look into the AJAX Control Toolkit from Microsoft for ASP.NET applications or jQuery, you'll find these easier to work with.

jQuery Sample (from jQuery site):
when code is hit, the some.php file is hit passing the name and location values in.

    <script type="javascript">
        function saveDataAjax(){ 
        $.ajax({
           type: "POST",
           url: "some.php",
           data: "name=John&location=Boston",
           success: function(msg){
             alert( "Data Saved: " + msg );
           }
         });
       }
   </script>
   <input type="submit" onClick="saveDataAjax();" value="submit" />