The jQuery library has a full suite of AJAX (Asynchronous JavaScript and XML) capabilities. The functions and methods therein allow us to load data from the server without a browser page refresh. Given below are some tutorials that would let you know how to perform it, Enjoy!

Update 28/02/2013: Removed broken links and added new images.

1. Create a Shoutbox using PHP and AJAX

A stunning and dynamic shoutbox based in PHP and AJAX (using jQuery).
Shoutbox-using-PHP-and-Ajax.jpg
SourceDemo

2. Refreshing an element at a set time interval using jQuery and a sprinkle of Ajax

You can have some information changed at a set time interval.
Refreshing-element-at-a-set-time-interval-using-jquery.jpg
SourceDemo

3. CakePHP Ajax “Quick Save” with jQuery

When you are in an administration panel, sometimes you want a “quick save” feature that allows you to save without leaving the page. Here is how to accomplish this with CakePHP and jQuery
CakePHP-Quick-Save.jpg
Source + Demo

4. Ajax Login Form Using Jquery and PHP

This will show you on how to create an ajax-powered login form. Using Jquery and PHP.
Ajax-Login-Form-with-jQuery-and-PHP.jpg
Source + Demo

5. Twitter Like More Button with jQuery and Ajax

An interesting tutorial on how to create Twitter Like More button using Jquery and AJAX.
Twitter-Like-More-Button.jpg
SourceDemo

6. Exactly Twitter like Follow and Remove buttons with jQuery and Ajax

Twitter like follow and remove buttons with fadeOut and fadeIn effect.
Exactly-Twitter-Like-Follow-and-Remove-Buttons.jpg
SourceDemo

7. Submit a Form without Refreshing page with jQuery and Ajax

A very simple tutorial submitting HTML form values without refreshing page using jQuery and Ajax.
Submit-a-Form-without-Refreshing-Page.jpg
SourceDemo

8. Delete a Record with animation fade-out effect using jQuery and Ajax

jQuery tutorial delete action with out refreshing page.
Delete-a-Record-with-Fade-out-Effect.jpg
SourceDemo

9. Ajax Add a Record with Button Status Change using jQuery

Learn on how to add a record with button status change, like Facebook and Twitter..
Ajax-Add-a-Record-with-Button-Status-Change.jpg
SourceDemo

10. Insert and Load Record using jQuery and Ajax

This tutorials explains how to insert and display record without refreshing web page.
Insert-and-Load-Record-using-jquery-and-ajax.jpg
Source + Demo

11. Auto-populating Select Boxes using jQuery & Ajax

If you are familiar with using select boxes for categorisation and sub-categories, such as ebay does when selling an item, usually this can require a lot of JavaScript to maintain the select boxes, but jQuery can hugely simplify this task by adding a dash of AJAX.
Auto-populating-Select-Boxes.jpg
SourceDemo

12. Ajax Multiple File Upload Form using jQuery

Learn how to create an AJAXified multiple file upload form that uses a lot lesser server side code and also provides a very nice user interface.
Ajax-Multiple-File-Upload.jpg
Source + Demo

13. AjaxFileUpload

This plugin is a hacked version of Ajaxupload plugin created by yvind Saltvik, which is really good enought for normal use. Its idea is to create a iframe and submit the specified form to it for further processing.
Ajax-File-Upload.jpg
SourceDemo

14. Combining jQuery Form Validation and Ajax Submission with ASP.NET

In this tutorial will show you how to combine jQuery form validation and AJAX submission with ASP.NET.
Combining-jQuery-Form-Validation.jpg
Source + Demo

15. Dynamic Loading of ComboBox using jQuery and Ajax in PHP

Learn to create a dynamic loading of dropdown. Simple solution which is created by jQuery.
Dynamic-loading-of-ComboBox-using-jquery.jpg
SourceDemo

16. AJAX-ZOOM

It uses image tiles to quickly generate a portion of the zoomed image (similar to Google Maps).
Ajax-Zoom.jpg
Source + Demom

17. AjaxPager

is a JQuery + Bootstrap plugin that creates a pagination control bar, according to configuration, that will make remote requests for data.
AjaxPager.jpg
SourceDemo

18. AjaxPanel

A jQuery plugin that provides a uniform way to update HTML elements, updating is based on jQuery’s low-level AJAX implementation.
AjaxPanel.jpg
SourceDemo

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • Pingback: 20 jQuery and Ajax Plugins « « Big Engine Media Big Engine Media()

  • http://www.7lifedesign.com Yordan

    Very nice tutorials. Thank you.

  • Aneeq

    This is the simplest code to select and display records from MySQL database table and display in PHP.

    $cn=mysql_connect($db_host,$db_user,$db_password) or die(mysql_error());
    mysql_select_db($db_name,$cn) or die(mysql_error());

    $sql = “SELECT field_name FROM table_name”;
    $rs = mysql_query($sql) or die(mysql_error());

    while($row = mysql_fetch_array($rs)){

    echo $field_name = $row[“field_name”];
    echo “”;

    }
    mysql_free_result($rs);

    Source:
    http://phphelp.co/2012/04/26/how-to-select-and-display-

    mysql-records-data-in-php/

    OR

    http://addr.pk/acfd

  • Nikel

    Puffs

  • john

    Thanks

  • http://www.facebook.com/justinismyfriend Rinzzler Justin

    i tried 4 links and all were dead please update !! take as an example the top plugin

    • http://jquery4u.com/ jQuery4u

      Thanks for the heads up Rinzzler, will update links.
      Sam

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.