Tutorial Blog

25 Ajax Code Snippets and Tutorials

February 13, 2009 by Oli · 37 Comments Post to TwitterPost to Yahoo BuzzPost to DiggPost to RedditPost to StumbleUpon




ajaxIt’s a Friday Flashback! Our list of 25 Ajax Code Snippets and Tutorials has been recently updated and now re-released!  We’ve got two double-scoops of Ajax resources for storing, sorting and sharing code snippets as well as direct links to ajax tutorials for creating drag & drop lists, polls, rss readers, bookmarklets, and even digg-style voting scripts. Enjoy the refresher course. 

After our code snippets for web designers series, we present you with 25 Ajax tutorials and code snippets .

 

 

 


 

 

 

Drag & Drop Sortable Lists with JavaScript and CSS – In Web applications I’ve seen numerous — and personally implemented a few — ways to rearrange items in a list.

128.jpg

 

 

 


 

 

 

Better File Uploads with AJAX – Browser-based file uploads, in particular those involving the HTML <input type=”file”> tag, have always been rather lacking. As I am sure most of you are aware, uploading files exceeding 10MB often causes a very poor user experience.

220.jpg

 

 

 


 

 

 

Developing a Web-based POP 3 Client – In this article, the first of three parts, you will start creating a simple web-based POP 3 client using AJAX, which will use “XMLHttpRequest” objects to retrieve messages from a mail server.

611.jpg

 

 

 


 

 

 

AJAX username availability checking – The goal of this AJAX example is to allow a user who is registering for your site to see if the username they want to use is taken already or not.

78.jpg

 

 

 


 

 

 

AJAX RSS Reader – This AJAX reader is written in Javascript only, it just request a backend url on the same server then display the feed resulted.

811.jpg

 

 

 


 

 

 

Make an AJAX Website in Less than 10 Minutes – I’ve been toying around with AJAX apps and XMLHttpRequest but have wanted to put up a site that loads all of its content asynchronously. If you’re like me and you learn best from working with examples you’re only 10 minutes away from your first AJAX website.

97.jpg

 

 

 


 

 

 

Animated Live Search – I’ve been meaning for some time to give a little tutorial on the live search I created for this latest design. There are a few steps involved, and I’ll do my best to explain each as we go.

106.jpg

 

 

 


 

 

 

AJAX: Creating Huge Bookmarklets – A bookmarklet is a special piece of JavaScript code that can be dragged into a user’s link toolbar, and which later can be clicked on to implement cross-site behavior.

1113.jpg

 

 

 


 

 

 

Dynamically Loaded Articles

129.jpg

 

 

 


 

 

 

Integrate Google Calendar in your website using AJAX - One of the features I find it interesting in Google calendar is the possibility to create shared calendars, but also the availability of your calendar as XML or ICAL whatever it’s a private or public one. As soon as we have XML of our calendar available I was wondering why not integrating Google calendar directly in website.

146.jpg

 

 

 


 

 

 

Getting Started with Ajax – The start of 2005 saw the rise of a relatively new technology, dubbed “Ajax” by Jesse James Garrett of Adaptive Path. Ajax stands for Asynchronous JavaScript and XML.

155.jpg

 

 

 


 

 

 

Ajax Slideshow – I’ve been thinking about creating an AJAX-based slideshow for a while, and today it happened! Today I wrote my first line of code in this project (probably not the last one), but for the moment I feel very content with the results.

164.jpg

 

 

 


 

 

 

Ajax Poll Script

174.jpg

 

 

 


 

 

 

Unobtrusive Degradable Ajax Style Sheet Switcher

194.jpg

 

 

 


 

 

 

Digg style voting

204.jpg
 

 

 


 

 

 

Sortable Tables

2110.jpg

 

 

 


 

 

 

Ajax Toolbox – Play with Ajax! The toybox is designed to be a showcase for simple Ajax examples and techniques.

225.jpg

 

 

 


 

 

 

Scriptaculous – script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to make your web sites and web applications fly.

234.jpg

 

 

 


 

 

 

Prototype – Prototype is a JavaScript Framework that aims to ease development of dynamic web applications

244.jpg
 

 

 


 

 

 

Moo.fx - moo.fx is a superlightweight, ultratiny, megasmall javascript effects library, to be used with prototype.js or the mootools framework

253.jpg

 

 

 


 

 

 

codesnippets lets users tag and store useful source code snippets for Ajax as well as other programming languages such as ruby on rails and javascript.

code-snippets

 

 

 


 

 

 

DZone is another resource for sharing, storing and discovering useful code snippets.

dzone

 

 

 


 

 

 

Snippler is a code repository to store & organize all the little pieces of code that you use each day. Users can also share code snippets with other coders and designers. 

snippler

 

 

 


 

 

 

Create a progress bar using Ajax.

ajax-progress-bar

 

 

 


 

 

 

Here is some code to create an Ajax paragraph toggle.

ajax-paragraph-toggle

 

 

 


 

 

 

 

 

Joining affiliate programs needs quality web site that brings forward authentic information about the specific topic. In order to develop a web site eligible for joining top class affiliation needs high quality server hosting plan with enough web space and sufficient bandwidth. Getting through web hosting guide has been found useful in this regard. While the web page designers contribute well in developing internet marketing online business site through providing it more attractive look. The latest web design tool help a lot in making a web site worth watching.

 

 

 

 




Comments

37 Responses to “25 Ajax Code Snippets and Tutorials”
  1. Jeej - says:

    “Maybe you’ve noticed it on my site, and maybe not because my design is purposefully inconspicuous. There is a small tab just under the masthead on the right side that says “More Stuff”. When you click on it, a large area slides open with a bunch of information on it. This is the “shelf”.”

    You don’t see it in Opera. I don’t.

  2. dan - http://www.kwoff.com says:

    Nice wrap up…i hadnt seen the the Gcal stuff b4! thanks.

  3. 1dollar - http://aglomerate.com says:

    Dank je voor dit overzicht van ajax libraries.

  4. ivatld - http://www.is.edbtj.edu.za says:

    Hi My Name Is ivatsu.

  5. Blue flower - http://romnvjfyr.com says:

    good site.

  6. suzie - http://www.tutsbuzz.com/tr.html says:

    great collection, thanks…

  7. shashi - http://jerry-shashi.blogspot.com says:

    it’s nice item, have you developed your site using Ajax or Not

  8. site ekle - http://www.sitesitesi.net says:

    Ajax is a pig power to develope professional web pages. i want to learn. but it is difficult

  9. ajaxboy - http://www.ajaxkaynak.com says:

    i will add this content to my web. thx

  10. tasarım - http://www.antalyawebsite.com says:

    thank you. good tutorial.

  11. antalyaticaret - http://www.antalyaticaret.org says:

    thank you. good

  12. turkiyeotel.net - http://www.turkiyeotel.net says:

    thank you :)

  13. bilgiland.com - http://www.bilgiland.com says:

    really i love it!!!!

  14. teknolojhi.com - http://www.teknolojhi.com says:

    yes me too!

  15. antalyashop.com - http://www.antalyashop.com says:

    deneme deneme 123

    thank you

  16. inkemer.com - http://www.inkemer.com says:

    tahnk you

  17. azrehber.com - http://www.azrehber.com says:

    thank you davar

  18. 7ze.net - http://www.7ze.net says:

    thank you sanada canim

  19. antalyawebtasarimi.com - http://www.antalyawebtasarimi.com says:

    hani bana hani bana :)
    thank you editor

  20. 7ze.org - http://www.7ze.org says:

    yes thank you good appitite

  21. personelkiralama.com - http://www.personelkiralama.com says:

    personel blog is nice but you did nice work

  22. gamer - http://www.betring.net says:

    thanks

  23. dizi izle - http://video.diziyeri.com says:

    thanks http://video.diziyeri.com

  24. Fatih - http://www.gulumsesem.com says:

    Thanks

  25. dizi izle - http://www.dizivefilm.com says:

    Thank you very much

  26. MirazTutorials - http://www.miraztutorials.com says:

    Thanks for the snippets and the tutorials i knew about say half of them but the other half that i didnt know about has acpanded my knowledge so excellent :)

  27. shaz - http://www.miraztutorials.com says:

    well done and thanks for the resources and lists

Tutorial Blog