Menu Search
Jump to the content X X
The Smashing Book #5

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. new Smashing Book 5 features smart responsive design techniques and patterns.

50 Excellent AJAX Tutorials

Advertisement

AJAX provides Web developers with plenty of opportunities to enhance the user experience and improve the performance of their websites. There are countless ways that AJAX can be used, and fortunately there are plenty of good and useful AJAX tutorials out there to help you with your own implementation.

This post serves as a collection of useful tutorials on working with AJAX in a wide variety of ways. You’ll find tutorials on working with forms, building shopping carts, creating chat features, working with log-ins and usernames and much more.

For more on AJAX see:

Useful AJAX Tutorials Link

Build an AJAX-Powered Shopping Cart5
NETTUTS shows us how to build an AJAX-powered shopping cart using PHP, jQuery and some plug-ins.

AJAX6

AJAX Username Availability Checker Using MooTools 1.27
When allowing a user to register a username, you can use AJAX with MooTools to let them check the availability of the username being submitted.

8

Introduction to AJAX Calls Using jQuery and PHP9
If you’re not familiar with using AJAX calls with jQuery and PHP, this is a good starting point.

10

AJAX and XML: AJAX for Tables11
IBM.com has a lot of useful articles on using AJAX. This one shows how to create tabs and tables.

12

AJAX and XML: AJAX for Chat13
Learn how to create a simple chat box for a website.

14

Creating a Dynamic Poll with jQuery and PHP15
This poll is created with PHP, XHTML and jQuery. AJAX effects are used to eliminate the need for a page refresh when the poll is submitted.

16

RSS AJAX JavaScript Ticker17
This AJAX ticker may be useful for displaying news headlines or similar content to visitors.

18

Building Your First AJAX Application with PHP19
An introductory post for getting started with AJAX.

20

Taking AJAX Further with PHP21
Following up on the preceding introduction, this post goes a bit further.

22

jQuery/JavaScript – Customizable AJAX Pagination23
AJAX can also be used to improve the pagination of a website.

24

One Form, Many Uses – Server-Side jQuery with Jaxer25
AJAX can help you get more use out of one form rather than create multiple forms.

26

How to Call Server-Side Function from Client-Side Code Using PageMethods in ASP.NET AJAX27
This post shows a work-around for calling server-side functions from the client side.

28

Developing Portlets Using JSF, AJAX, and Seam – Part 129, Part 230, and Part 331
An in-depth three-part series to help you create portals.

32

AJAX Forms with jQuery33
Trevor Davis shows how to create a form that will check an email address for validity, makes sure there are no blank fields and display an error if something isn’t right or complete.

34

Easily Build Powerful Client-Side AJAX Paging Using jQuery35
This is another useful tutorial on improving pagination with AJAX.

36

Use jQuery and ASP.NET AJAX to Build a Client-Side Repeater37
This tutorial shows how to improve user experience and reduce server load by using a client-side repeater.

38

Develop AJAX Applications Like the Pros – Part 1: Using the Prototype JavaScript Library and Script.aculo.us39
The first part of this three-part series includes an introduction to the Prototype JavaScript library.

40

Develop AJAX Applications Like the Pros – Part 2: Using the Prototype JavaScript Framework and Script.aculo.us41
The second of the three parts moves on to the Scriptaculous library.

Develop AJAX Applications Like the Pros – Part 3: Use DWR, Java, and the Dojo Toolkit to Integrate Java and JavaScript42
The third and final part takes you through the process of setting up a message board.

PHP Components: Autosuggest43
Using PHP and AJAX, you can add an autosuggest feature to a search box.

44

AutoCompleter Tutorial
This tutorial produces a result similar to the preceding tutorial.

A Dynamic AJAX Table Example Using Dojo and RESTful Web Services on Glassfish45
This tutorial takes you through the process of creating a dynamic table as you would see on a travel-booking website.

46

AJAX Overhaul – Part 1: Retro Fit Existing Sites with AJAX and jQuery47
Have an existing website that needs some enhancements? This tutorial series takes you through the process.

48

AJAX Overhaul – Part 2: Retro Fit Existing Sites with jQuery, AJAX, Tooltips, and Lightboxes49
The second part of this series takes you further through the process of improving a shopping website with tooltips and lightboxes.

50

AJAX Overhaul – Part 3: Retro Fit Existing Sites with jQuery, AJAX Tabs, and Photo Carousels51
The third part of the series adds some nice AJAX effects with tabs and carousels.

52

AJAX Overhaul – Part 4: Retro Fit Existing Sites with jQuery and AJAX Forms53
The final part of the series looks at enhancing the purchase form.

54

Auto Populating Select Boxes Using jQuery and AJAX55
Learn how to allow users to choose a top-level category in a select box that will trigger the subcategory box to autopopulate.

56

Using AJAX to Validate Forms57
Use PHP and jQuery with some AJAX to create a form that validates the data entered.

58

Easy AJAX with jQuery59
This tutorial includes some introductory information on AJAX and jQuery and will help you get started.

60

Quick and Dirty AJAX61 (video)
This brief video tutorial shows some ways to improve the functionality of a website with jQuery and AJAX.

62

Load Content While Scrolling with jQuery63
This tutorial creates a scrolling effect similar to DZone64’s.

65

Wicket – Updating ListViews Using an AjaxLink66
Create a table that will update without a full page refresh when a link is clicked.

67

AJAX for Evil: Spyjax68
A look at the dark side of AJAX: viewing browsing habits.

69

How to Integrate Google Calendar in Your Website Using AJAX
Calendars have a great use in a number of websites.

Edit in Place with AJAX Using jQuery JavaScript Library70
Allow a visitor to edit the HTML of a page they are visiting.

Creating an AJAX Rating Widget71
Create a rating widget that allows visitors to rate an item with stars or some other measurement.

72

Use AJAX and PHP to Build Your Mailing List73
Allow visitors to subscribe to a mailing list without a page refresh.

74

Nice AJAX Effect for Message Box Using MooTools75
Use this AJAX effect to give visitors a message based on some action.

76

Build an AJAX Dropdown Menu
This is a fairly simple tutorial on creating a drop-down menu.

Making AJAX Work with Screen Readers77
For accessibility purposes, this article covers how AJAX effects can affect users of screen readers.

78

How to Load In and Animate Content with jQuery79
Another NETTUTS tutorial for enhancing a website with jQuery and AJAX.

80

Continuous Pagination81
Another look at the subject of pagination by demonstrating continuous pagination, in which the user keeps scrolling down rather than going to another page.

82

Making Element Selection and AJAX simple with DOMAssistant83
A tutorial to get you started with the DOMAssistant JavaScript library.

84

Slider Using PHP, AJAX, and JavaScript85
Create a nice slider using PHP, JavaScript and AJAX.

ASP.NET AJAX Calendar Extender86
Seven different tips and tricks for working with this calendar extender.

Log-in/Sign-up Screen Using AJAX Modal Pop-up Extender87
This is a quick look at creating log-in and sign-up forms.

88

Dealing with Large Data in AJAX89
Get your AJAX application to meet your data requirements.

Creating a Gmail-Like AJAX Status Display90
Use Prototype and AJAX to create this status display.

91

Creating an AJAX-Enabled Calendar Control92
Another tutorial that focuses on enhancing calendars with AJAX effects.

93

JavaScript Error Publishing using ASP.NET AJAX94
Use AJAX to display errors in code.

95

(al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2007/06/20/ajax-javascript-solutions-for-professional-coding/
  2. 2 https://www.smashingmagazine.com/2008/04/15/60-more-ajax-and-javascript-solutions-for-professional-coding/
  3. 3 https://www.smashingmagazine.com/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
  4. 4 https://www.smashingmagazine.com/2007/01/26/tutorials-round-up-ajax-css-javascript-php-mysql-and-more/
  5. 5 http://nettuts.com/javascript-ajax/build-an-ajax-powered-shopping-cart/
  6. 6 http://nettuts.com/javascript-ajax/build-an-ajax-powered-shopping-cart/
  7. 7 http://davidwalsh.name/ajax-username-availability-checker-mootools-12
  8. 8 http://davidwalsh.name/ajax-username-availability-checker-mootools-12
  9. 9 http://phpmash.com/2008/10/06/introduction-to-ajax-calls-using-jquery-and-php/
  10. 10 http://phpmash.com/2008/10/06/introduction-to-ajax-calls-using-jquery-and-php/
  11. 11 http://www.ibm.com/developerworks/xml/library/x-ajaxxml10/index.html?ca=drs-tp1108
  12. 12 http://www.ibm.com/developerworks/xml/library/x-ajaxxml10/index.html?ca=drs-tp1108
  13. 13 http://www.ibm.com/developerworks/web/library/x-ajaxxml8/index.html?ca=drs-
  14. 14 http://www.ibm.com/developerworks/web/library/x-ajaxxml8/index.html?ca=drs-
  15. 15 http://nettuts.com/javascript-ajax/creating-a-dynamic-poll-with-jquery-and-php/
  16. 16 http://nettuts.com/javascript-ajax/creating-a-dynamic-poll-with-jquery-and-php/
  17. 17 http://www.javascriptkit.com/dhtmltutors/ajaxticker/index.shtml
  18. 18 http://www.javascriptkit.com/dhtmltutors/ajaxticker/index.shtml
  19. 19 http://peter.upfold.org.uk/blog/2006/09/27/building-your-first-ajax-application-with-php/
  20. 20 http://peter.upfold.org.uk/blog/2006/09/27/building-your-first-ajax-application-with-php/
  21. 21 http://peter.upfold.org.uk/blog/2007/02/18/taking-ajax-further-with-php/
  22. 22 http://peter.upfold.org.uk/blog/2007/02/18/taking-ajax-further-with-php/
  23. 23 http://loveandtheft.org/2008/09/17/jquery-javascript-customizeable-ajax-pageination/
  24. 24 http://loveandtheft.org/2008/09/17/jquery-javascript-customizeable-ajax-pageination/
  25. 25 http://www.codegobbler.com/one-form-many-uses-server-side-jquery-jaxer
  26. 26 http://www.codegobbler.com/one-form-many-uses-server-side-jquery-jaxer
  27. 27 http://www.dotnetcurry.com/ShowArticle.aspx?ID=109
  28. 28 http://www.dotnetcurry.com/ShowArticle.aspx?ID=109
  29. 29 http://www.infoq.com/articles/jsf-ajax-seam-portlets-pt-1;jsessionid=5D98C3CBDCB1F7DAC59B07E6B6FBFB19
  30. 30 http://www.infoq.com/articles/jsf-ajax-seam-portlets-pt-2;jsessionid=5D98C3CBDCB1F7DAC59B07E6B6FBFB19
  31. 31 http://www.infoq.com/articles/jsf-ajax-seam-portlets-pt-3
  32. 32 http://www.infoq.com/articles/jsf-ajax-seam-portlets-pt-1;jsessionid=5D98C3CBDCB1F7DAC59B07E6B6FBFB19
  33. 33 http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/
  34. 34 http://trevordavis.net/blog/tutorial/ajax-forms-with-jquery/
  35. 35 http://encosia.com/2008/08/20/easily-build-powerful-client-side-ajax-paging-using-jquery/
  36. 36 http://encosia.com/2008/08/20/easily-build-powerful-client-side-ajax-paging-using-jquery/
  37. 37 http://encosia.com/2008/06/26/use-jquery-and-aspnet-ajax-to-build-a-client-side-repeater/
  38. 38 http://encosia.com/2008/06/26/use-jquery-and-aspnet-ajax-to-build-a-client-side-repeater/
  39. 39 http://www.ibm.com/developerworks/web/library/wa-aj-ajaxpro1/
  40. 40 http://www.ibm.com/developerworks/web/library/wa-aj-ajaxpro1/
  41. 41 http://www.ibm.com/developerworks/web/library/wa-aj-ajaxpro2/index.html
  42. 42 http://www.ibm.com/developerworks/web/library/wa-aj-ajaxpro3/index.html?ca=dgr-jw64wa-aj-ajaxpro3&S_TACT=105AGY46&S_CMP=GRsitejw64
  43. 43 http://woork.blogspot.com/2008/03/php-components-autosuggest.html
  44. 44 http://woork.blogspot.com/2008/03/php-components-autosuggest.html
  45. 45 http://weblogs.java.net/blog/caroljmcdonald/archive/2008/07/a_dynamic_ajax.html
  46. 46 http://weblogs.java.net/blog/caroljmcdonald/archive/2008/07/a_dynamic_ajax.html
  47. 47 http://www.ibm.com/developerworks/web/library/wa-aj-overhaul1/index.html
  48. 48 http://www.ibm.com/developerworks/web/library/wa-aj-overhaul1/index.html
  49. 49 http://www.ibm.com/developerworks/web/library/wa-aj-overhaul2/index.html
  50. 50 http://www.ibm.com/developerworks/web/library/wa-aj-overhaul2/index.html
  51. 51 http://www.ibm.com/developerworks/web/library/wa-aj-overhaul3/index.html
  52. 52 http://www.ibm.com/developerworks/web/library/wa-aj-overhaul3/index.html
  53. 53 http://www.ibm.com/developerworks/web/library/wa-aj-overhaul4/index.html?ca=drs-tp3108
  54. 54 http://www.ibm.com/developerworks/web/library/wa-aj-overhaul4/index.html?ca=drs-tp3108
  55. 55 http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
  56. 56 http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
  57. 57 http://jqueryfordesigners.com/using-ajax-to-validate-forms/
  58. 58 http://jqueryfordesigners.com/using-ajax-to-validate-forms/
  59. 59 http://www.sitepoint.com/article/ajax-jquery/
  60. 60 http://www.sitepoint.com/article/ajax-jquery/
  61. 61 http://15daysofjquery.com/quick-and-dirty-ajax/14/
  62. 62 http://15daysofjquery.com/quick-and-dirty-ajax/14/
  63. 63 http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
  64. 64 http://dzone.com
  65. 65 http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
  66. 66 http://blog.xebia.com/2008/06/04/wicket-updating-listviews-using-an-ajaxlink/
  67. 67 http://blog.xebia.com/2008/06/04/wicket-updating-listviews-using-an-ajaxlink/
  68. 68 http://davidwalsh.name/ajax-evil-spyjax
  69. 69 http://davidwalsh.name/ajax-evil-spyjax
  70. 70 http://15daysofjquery.com/edit-in-place-with-ajax-using-jquery-javascript-library/15/
  71. 71 http://www.progressive-coding.com/tutorial.php?id=6
  72. 72 http://www.progressive-coding.com/tutorial.php?id=6
  73. 73 http://www.sitepoint.com/article/use-ajax-php-build-mailing-list/
  74. 74 http://www.sitepoint.com/article/use-ajax-php-build-mailing-list/
  75. 75 http://woork.blogspot.com/2008/03/nice-ajax-effect-for-message-box-using.html
  76. 76 http://woork.blogspot.com/2008/03/nice-ajax-effect-for-message-box-using.html
  77. 77 http://juicystudio.com/article/making-ajax-work-with-screen-readers.php
  78. 78 http://juicystudio.com/article/making-ajax-work-with-screen-readers.php
  79. 79 http://nettuts.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
  80. 80 http://nettuts.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
  81. 81 http://blog.paranoidferret.com/index.php/2008/05/14/javascript-tutorial-continuous-pagination/
  82. 82 http://blog.paranoidferret.com/index.php/2008/05/14/javascript-tutorial-continuous-pagination/
  83. 83 http://css.dzone.com/news/ajax-and-simple-element-select
  84. 84 http://css.dzone.com/news/ajax-and-simple-element-select
  85. 85 http://roshanbh.com.np/2008/01/slider-using-php-ajax-and-javascript.html
  86. 86 http://www.dotnetcurry.com/ShowArticle.aspx?ID=149
  87. 87 http://www.codeproject.com/KB/ajax/LoginSignupScreen.aspx
  88. 88 http://www.codeproject.com/KB/ajax/LoginSignupScreen.aspx
  89. 89 http://css.dzone.com/articles/dealing-large-data-ajax
  90. 90 http://css.dzone.com/news/creating-gmail-ajax-status-dis
  91. 91 http://css.dzone.com/news/creating-gmail-ajax-status-dis
  92. 92 http://aspnet.4guysfromrolla.com/articles/022008-1.aspx
  93. 93 http://aspnet.4guysfromrolla.com/articles/022008-1.aspx
  94. 94 http://seejoelprogram.wordpress.com/2008/02/05/javascript-error-publishing-using-aspnet-ajax/
  95. 95 http://seejoelprogram.wordpress.com/2008/02/05/javascript-error-publishing-using-aspnet-ajax/
SmashingConf Oxford

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Steven Snell is a Web designer and blogger. In addition to maintaining his own blog and writing for a number of other top design blogs, he also manages an online shop that offers premium graphic design resources.

Advertisement
  1. 1

    so nice! thanks

    0
  2. 2

    This is really great stuff! Thanks !
    I always come back for this kind of posts… just like the useful javascripts you gave last month.

    2
  3. 3

    Wow. That is a fantastic line up. You’ve got some really good tut’s in there. I was especially interested in the AJAX chat example and some of the jQuery stuff. I’m not a huge fan of jQuery only because I prefer to code from scratch but it definitely has its uses.

    Great work as always :)

    1
  4. 4

    Just a collection of many websites wich have collected ajax based scripts. Though, there are quote a few wich are awesome.

    -1
  5. 5

    WordPress does not have a good effect AJAX recommend?

    2
  6. 6

    Hey, great post!
    It would be nice if you’d post something about AHAH/AXAH too :D
    http://microformats.org/wiki/rest/ahah

    0
  7. 7

    Gracias.

    0
  8. 8

    Nice collection, some I hadn’t seen that i’m defiantly going use.

    -1
  9. 9

    Thank you for this useful collection :-)

    -1
  10. 10

    awwweesome!

    0
  11. 11

    I have written an Ajax tutorial – A Gentle Introduction to Ajax. Its really useful for beginners.

    -2
  12. 12

    Thanks ! Great one. will read the full article later.

    -1
  13. 13

    Smashin’ Ajax! thanx for the share and keep these kinda posts comin’

    :p

    0
  14. 14

    great list! the AJAX Overhaul sets would be very useful. thanks for sharing!

    2
  15. 15

    świetne :)

    -1
  16. 16

    Very Nice Sharing.
    Thanks

    2
  17. 17

    I found another excellent AJAX tut in one of the links you posted..

    Top 5 ASP.NET AJAX Articles You Must Read

    Also love the jquery tuts..way to go!!

    1
  18. 18

    Wow! Thanks a lot !

    0
  19. 19

    Great article!

    0
  20. 20

    Groobe!

    0
  21. 21

    maravilloso!

    0
  22. 22

    Excellent article!!!. Thanks!!!

    0
  23. 23

    Great article!
    Anybody know if there’s any tutorial to create chat application like Facebook’s ?

    0
  24. 24

    a lot of AJAX !!! Can i try all of this !!

    0
  25. 25

    Aw, they didn’t include my tutorial that I wrote. Its on jQuery and ajax if anyone is interested: ajax tutorials with jQuery

    1
  26. 26

    дякую

    0
  27. 27

    somewhere i saw the similar list…but i think that was 20 excellent ajax ???

    -1
  28. 28

    Thanks for including my post of slider using PHP, Ajax and Javascript….

    0
  29. 29

    That Namelezz Guy

    October 17, 2008 11:59 am

    Great article, really useful!

    -1
  30. 30

    excellent resource. some good ideas. we have long been fans of jquery, mootools and a range of other ajax components.

    0

↑ Back to top