Ajax commonly is thought of as single language, but in truth AJAX is a combination of more than one technology. It uses HTML and CSS. By using AJAX we can create real-time feedback to our users using server-side validation scripts. Its becoming commonplace in many design niches as its very flexible, easy on the eye and can really improve user experience due to its fast response times. I have gathered a list of great Ajax tutorials from across the web which will allow you to experiment and get you started with Ajax, the tutorials are superb and answer most questions you may have.
1. Build An AJAX Powered Shopping Cart
The NETTUTS community asked for it. So here you are! One of the innovations of the web is online shopping. It allows us to buy things without ever leaving the comfort of our homes. However, the most basic element of online shopping, the shopping cart, has not evolved much. In this tutorial, we’re going to make an AJAX powered shopping cart using PHP, jQuery, and a few nifty plugins.
2. An AJAX Based Shopping Cart with PHP, CSS & jQuery
In this tutorial we are going to create an AJAX-driven shopping cart. All the products are going to be stored in a MySQL database, with PHP showing and processing the data.
3. A simple AJAX website with jQuery
This time we are going to create a simple AJAX website with jQuery and the right amount of PHP & CSS. It is going to have a few pages loaded by AJAX from the PHP back-end, and a complete support of the browser history – a real pain for any AJAX or Flash site .
4. AJAX Multiple File Upload Form Using jQuery
Multiple file upload forms are sometimes essential for your web application but managing upload from multiple file input boxes becomes a bit tedious and lengthy. But thanks to jQuery using which we can make this task easier too. Today I’m going to create an AJAXified multiple file upload form that uses a lot lesser server side code and also provides a very nice user interface.
5. Creating an AJAX Web App Using the Bit.ly API
Over the past few years, the web has seen an explosion in the number of URL shorteners. A lot of this growth is due to popular microblogging and social networking sites such as Twitter. With this growth, comes the demand for custom use and the ability for developers to create their own apps to take advantage of the shortening service. Today, we will use Twitter’s url shortener of choice and create an AJAX web app using the bit.ly API and the jQuery library.
When discussing real time communication, there aren’t many solutions that can rival the power of a simple webchat. What is even better, is that you already have all the tools you need to create one – your web browser. This, coupled with the fact that this is also one of the most requested tutorials by Tutorialzine’s readers, means that it is about time to start coding.
7. A Twitter List Powered Fan Page
Also, at the same time, they expanded their API to include list management functionality. This allows us to use these new tools to create a widget that flips lists the other way around – a fan page you can put in your sidebar, that allows your visitors to fill in their twitter name and join a specially crafted fan list in your twitter account.
8. Adding a scroller to your website that supports Ajax
Sometimes, a nice and sharp design is ruined by the addition of a scroller. By default, the OS styles the scroller and that (arguably) makes it look ugly. For this tutorial, I’ll be using a nice little script called fleXcroll and then adding some code to add support for loading content via Ajax. I’ll also be using jQuery, but of course, you can use any other JavaScript framework or just plain old JavaScript.
9. An AJAX Click to Appreciate Badge
Today we are implementing such a badge, which you can include in every page of your website with a bit of jQuery magic. So go ahead and download the zip from the button above (PSD included!) and continue with the tutorial.
10. AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL
I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here)!
11. Simple AJAX Commenting System
This time, we are making a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.
12. Facebook like Autosuggestion with jQuery, Ajax and PHP.
I received a lot of request from my readers that asked to me how to implement Autosuggestion search with jquery. I love facebook API it’s neat, so I had developed Facebook like Autosuggestion user search with jQuery, Ajax and PHP. It’s simple and clean just you have to change the database details.
13. AJAX-ed Todo List With PHP, MySQL & jQuery
In this tutorial we are making a simple AJAX-ed Todo List App, with PHP, MySQL and jQuery. In the process we are going to demonstrate PHP’s OOP capabilities, play with jQuery UI and implement some nice AJAX functionality.
14. Multiple Ajax Requests with Jquery
Last few days I have been working with APIs for instant search results, I had an idea to implement a super instant search with multiple APIs like twitter, youtube, yahoo and bing. But jquery older versions doesn’t support multiple ajax call-backs, luckily I had found Jquery 1.5 has released a new method called $.when finally I have developed super fast search at kokkoroko.com.
15. Learn how to AJAXify Comment Forms
In addition, we’ll also implement a bit of server and client-side validation to better secure our data. When submitting to the database, we’ll also review the most secure methods, including the use of prepared statements, which will bind the necessary values to each query, rather than embed them.
16. How to Code a Fun To-Do List With PHP and AJAX
For this week’s Premium tutorial, we’ll be working with many different technologies. Ultimately, we’ll be building a to-do list that will allow you, or your user, to create, update, and delete items asynchronously. To accomplish our task, we’ll be using PHP and jQuery’s AJAX capabilities. I think you’ll find that it’s not quite as hard as you might initially think. I’ll show you exactly how!
17. Live Table Edit with Jquery and Ajax
I love Jquery framework, feels that we can do awesome things. Let’s take a look at how to implement live table edit with Jquery and real time database update using Ajax. This is an interesting concept playing with DOM objects. You know that majority of readers had requested this tutorial, hope you guys like it!
18. How To: AJAXify WordPress Comment Posting
Today i will show you how to enable AJAX comments with client side JavaScript comment form validation on your WordPress blog step by step that should work with most versions of WordPress. We’ll be modifying the WordPress theme files to do that. In few days, i’ll be releasing a WordPress plugin that will automatically enable AJAX Comments. So, do subscribe to our RSS Feed or e-mail updates so that you are the first to know about it.
19. AJAX Username Availability Checker Using MooTools 1.2
There a many examples of egregious usages of AJAX out there but every once in a while you find a great usage of AJAX. One great usage is the username availability checker. Why make the user submit their form if you can just use AJAX to let them know if it’s available right away? Here’s how you can implement a username available checker using MooTools 1.2.
20. Ajax Image Upload without Refreshing Page using Jquery.
Are you looking for ajax file/image upload and preview without refreshing page using Jquery. I had implemented this ajax form submitting using jquery.form plugin and used Arun Shekar’s image cropping PHP code for uploading images. Just five lines of JavaScript code, Using this you can upload files, image and videos.
21. Sweet AJAX Tabs With jQuery 1.4 & CSS3
Today we are making an AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery, so be sure to download the zip archive from the button above and continue with step one.
22. AJAX-enabled Sticky Notes With PHP & jQuery
Today we are making an AJAX-enabled Sticky Note management system. It will give visitors the ability to create notes with a live preview, and move them around on the screen. Every movement is going to be sent to the back-end via AJAX and saved in the database.
23. Create a Twitter-Like “Load More” Widget
Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.
24. Fancy Quotes With jQuery, AJAX & CSS
Today we are making a fancy quote rating system that will display a number of famous quotes and will enable our site visitors to rate their favorites.
In this tutorial we are going to make an AJAX contact form which leverages modern web development techniques.
I can’t seem to reach the end of the fun stuff you can do with emerging web technologies. Today, I’m going to show you how to do something that—until the last while—has been almost unprecedented: uploading files via AJAX.
27. A Simple Twitter App with Ruby on Rails – Messages With Ajax
Ruby on Rails is a web application framework that promotes rapid development. Clients’ demands are ever increasing yet they still expect the same quality of output.
28. Fun with jQuery Templating and AJAX
In this tutorial, we’ll take a look at how jQuery’s beta templating system can be put to excellent use in order to completely decouple our HTML from our scripts. We’ll also take a quick look at jQuery 1.5′s completely revamped AJAX module.
29. Bing Instant Search with Jquery and Ajax
Some days back I had posted a popular article ‘Youtube instant search with Jquery and Ajax’. I received a lot of request from my readers that asked to me how to instant web search results so I had coded Bing instant search with real time search results. Just few lines of code, reading Bing search JSON API file with Jquery.
In this tutorial I will show you how to create simple AJAX file upload system using PHP and JavaScript.
31. How to send a mail with php ajax and jquery in facebook style
One of the website that I love is facebook. I’m not talking about the social network, well I like this social network, but I prefer twitter and linkedin for “professional use”, but this is another question, because I’m talking about the design.:)
32. Dynamic Dependent Select Box using Jquery and Ajax
How to do dynamic dependent select box using Jquery, Ajax, PHP and Mysql. Dependent select box when a selection is made in a “Parent” box it allow to refresh a “child” box list data. In this post I had given a database relationship example betweent “catergory” and “subcategory”. It’s very simple jquery code hope you like this.
33. Building a Sleek AJAX Email Signup Form
In this tutorial, we’ll learn how to create a slick email signup form. This form will harness the full power of AJAX, meaning that we will submit data to the server, validate it, and receive a response – all without a single page refresh! Along the way, you should pick up some useful tips related to PHP and JavaScript, as well as general programming best practices.
Removing contents with Ajax is a useful tool to have in any web designers kit. Using a few lines of jQuery we can remove a div and simultaneously remove a record from the database with Ajax. In the download and demo you’ll see a small red cross to the right of each comment. Clicking the cross will remove the comment div with a slide up animation which will remove the div. click the image below to check out the demo.
35. Creating an AJAX Login Form using MooTools
This is a tutorial useful to learn how to Ajaxify a basic login form. To do that we’ll use the powerful framework MooTools:
36. Submit multiple forms with jQuery and Ajax.
Two weeks back I had posted “Facebook like multi Toggle Comment Box with jQuery and PHP” I received emails from my readers that asked to me how to submit multiple forms with jQuery and ajax. So in this tutorial I implemented. Download the script just you have to change the database details. Take a look live demo
37. Voting system with jQuery, Ajax and PHP.
This post about Dzone like voting system with jQuery, Ajax and PHP. This script helps you to display user votes on blog post. IP address based voting system I hope you like this thanks! Take a look at live demo and give your votes.
38. Better File Uploads with AJAX and JavaServer Faces
Browser-based file uploads, in particular those involving the HTML
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. Once a user submits the file, the browser will appear to be inactive while it attempts to upload the file to the server. While this happening in the background, many impatient users would start to assume that the server is “hanging” and would try to submit the file again. This of course, only helps to make matters worse.
39. Create a shoutbox using PHP and AJAX (with jQuery)
Continuing with the tutorials about AJAX and jQuery we will create a stunning and dynamic shoutbox based in PHP and AJAX (using jQuery).
40. Building a 5 Star Rating System with jQuery, AJAX and PHP
In this tutorial, you’ll learn how to build a rating system with AJAX, PHP, and jQuery. Votes will be recorded and updated in real-time with the magic of AJAX, and we’ll also leverage the power of PHP so that you don’t even need a database!
41. Favorite Rating with jQuery and Ajax.
I received a mail from my reader that asked to me how to implement Show the love rating system like amypink.com. So I had designed Favorite Rating with jQuery and Ajax.. It’s simple just changing little code on my old post Voting system with jQuery, Ajax and PHP.. Take a look at live demo
42. Create a Dynamic Scrolling Content Box Using AJAX
If you have used Google Reader, then you might have noticed the way Google Reader shows feed items, it loads up few items first when you click on a feed and as you scroll down to view more items, it fetches more items dynamically and adds it to the list.
43. Youtube like Rating with Jquery and Ajax
I received a email request from my reader that asked to me how to implement Youtube like rating with Jquery. It is so nice with quick bar results, So that I had designed a simple script with PHP,Jquery and Ajax. Sure you will like it. Live demo
44. Submit A Form Without Page Refresh using jQuery
Previously on NETTUTS, Philo showed how you can use jQuery to add form validation to wordpress comments that works without any page reload. Another great way of utlizing jQuery to enhance user experience is to not just validate, but to submit your form entirely without a page refresh.
45. How To Parse XML Using jQuery and Ajax
In this tutorial I will show you how to parse or process an xml document to display the data on a page in html form. It can be used to filter raw RSS feeds, set up a cool sitemap on your blog or even the groundwork for your own search auto complete.
46. Comment System with jQuery, Ajax and PHP (Version 2.0).
Three months back I had posted an popular article Comment system with jQuery, Ajax and PHP.. Most of the readers commented about displaying existing(old) comments and database design. So in this post I had updated the old code.
47. Checking Username Availability with Mootools and Request.JSON
In this tutorial you will learn how to use Mootools’ Request.JSON function to check a username against an array or database. In this example we will be using a simple MySQL database. I will try to do as much hand holding as I can, but having a little experience with PHP and MySQL will be a plus.
48. Chatting with Jquery and Ajax.
I received lot of email requests from my reader that asked to me how to develop a facebook lite chat application. In this post I’m just giving an idea about chat application with simple javascript. I had implemented this at clouds.9lessons.info
49. How to Create an Ajax Style File Uploader
In this tutorial we will be creating a simple Ajax style file uploader using jQuery, Ajax and Php. Something you can easily implement on your site, complete with front and backend validation.
50. Display JSON Data with jQuery and Ajax
JSON (Java Script Object Notation) is a lightweight data passing format and human readable contains java structures. In this post I want to explain Creating JSON file with PHP and Display JSON data using jquery and Ajax. Using JSON we can interchange data between the browsers and the server.
51. Live Username Availability Checking using Ajax and jQuery.
Simple script to check username availability using jQuery and Ajax. Try out demo and use it. I used gif loader and jquery fade in effects to make it fit. You can find many script like this but i want to keep my valuable users here to share their development needs.
52. AJAX Pagination using jQuery and PHP with Animation
I have created an Ajax JQuery based pagination few months before which my users liked very much and there are thousands of downloads of that tutorial. So, I thought to create on another tutorial for pagination with some jquery effects to make stylish and attractive. Its animated loading of records using jquery animation. I hope you will like it very much as it looks nice.
53. Twitter Like More Button with jQuery and Ajax.
This is an interesting tutorial I had developed this using jQuery and Ajax. Some days back twitter added new feature like ‘more’ button it’s nice the some thing I’m presenting in this post.
54. 20 More Excellent AJAX Effects You Should Know
Back in October we wowed you with 20 Excellent Ajax Effects You Should Know. The post went on to become one of the most popular ever published at Nettuts+. This time around we have twenty more equally excellent Ajax effects for you to know and love.
55. N-Level of Dynamic Loading of DropDowns using Ajax and PHP. Part 2
This is version 2 of my previous tutorial which was dynamic loading of combos with Ajax. But its much more than that. Its now for n-level dropdowns, I mean if you have parent-child records untill n-level and you want to load them using dropdowns with ajax. It is my favorit tutorial and very useful for any one. We often needs ajax loading of dropdowns and this is for n-level records. Hope you will like it. Cheers !
56. Insert and Load Record using jQuery and Ajax.
This tutorials explains how to insert and display record without refreshing web page. I had developed using jQuery and Ajax it’s simple and useful take a look at this post.
57. Ajax Shopping Cart: Create a Stylish Shopping Cart Using JQuery and PHP
You have seen many Ajax and JQuery based shopping carts examples over internet. I have created here a JQuery based shopping cart which doesn’t call any Ajax request but save all shopping into a form and in the end we just simple submit that form where ever we want to be submitted. I used jQuery and CSS to create this stylish Cart. Hope you will like it.
58. Chatting with Jquery and Ajax.
I received lot of email requests from my reader that asked to me how to develop a facebook lite chat application. In this post I’m just giving an idea about chat application with simple javascript. I had implemented this at clouds.9lessons.info
59. Ajax Domain Checker Application with JQuery and PHP
Last few days I was searching about checking domain names availablity using Ajax and PHP. I found some solution and I thought to create a post on my blog so that any one can get this simple script easily. I used jQuery and CSS3 to put some attractive look in this. Share it if you like this tutorial. Thanks a lot !
60. Delete Records with Random Animation Effect using jQuery and Ajax.
Some days back I had posted “Delete a Record with animation fade-out effect using jQuery and Ajax”. In this post I want to explain delete records with random animation(slideup and fadeout) effect using jQuery framework. Very simple code just 10 lines. Take a look at live demo.
61. Fancy Ajax Tabs Navigation with Ajax CSS and PHP
This tutorial is one of my favorite because I like tutorials in which CSS work is much better. It is a simple ajax based tabs navigations and I hope you will like it. I used CSS3 to put some stylish look in it. You can change the size of frame or button size colors as you like.
62. Create Bit.ly Short URLs Using Jquery and Ajax
How to create Bit.ly short URLs using Jquery and Ajax. Many tutorials available on web about short URLs using server side script, this script works on client side. It is easy just 5 lines of code calling Bit.ly API. You have to modify the username and API key. Use it and make URLs shorts and neat.
63. New Ajax Star Rating System in Tag Cloud Style using JQuery and PHP
New tutorial in Rating System series is here for you. It is a stylish and animated rating system I created many Ajax based Rating and Voting systems over 99Points.info. You can get
Youtube Style Ratings and Ajax Rating In this rating system i used tag cloud technique, where top times rated star will be show bigger than others. So when you want to give a rate to any image or post, Click on your desired star number from 1-5 and then this star will go to bigger and bigger on each click. This is an awesome and unique rating system. Hope you like. You can get facebook style comment script, facebook style extracting url data, youtube style share button, facebook style profile edit, Ajax search tutorial, Dynamic dropdown using jQuery and Ajax and many others.
64. Fresh: Ajax Heart Rating System with JQuery and PHP
This is another Rating System and Im sure you can get many awesome rating and voting script at 99Point.info I used animate() function of jQuery to get some stylish effect.
When I create Youtube Style Ratings and Ajax Rating Many readers liked this and I thought I would give some stylish rating systems. This is created with Jquery and PHP. Hope You like it and don’t forget to subscribe with email. Thanks !
65. Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL
Polling system or Voting system is very common in web sites. Voting can be about your site or blog or some other thing just to get the user attention and get your idea about your product.
66. Ajax Stylish Captcha and Contact Form using JQuery and PHP.
First of all, thanks to all of my readers who like my work and prove this by sending feedbacks over facebook style tutorials. I always try to create some useful tutorials for my users using Jquery. This tutorial is about ajax based contact form with jquery validation and ajax based captcha.
67. Facebook Style Wall Posting and Comments System using jQuery PHP and Ajax
Facebook style wall posting and commenting system. Try a new reloaded version of demo which is almost similar to facebook style.
My previous facebook style posting system was not so much like original facebook posting style and also there is no commenting system So I created this tutorial again to complete the commenting system and I tried my best to give my dear users a complete posting script with comments system. Facebook is now a days top social networking site. So I have created some tutorials similar to facebook. Youtube style rating is also very popular tutorial on this blog. Hope you like it.
68. Display Collapsed Comments like Facebook with Jquery and Ajax
In this post I want to explain Facebook like Collapsed Comments, while clicking View all Comments link it displays all the existing comments. I made a demo with jquery, ajax and php. Take a look at this live demo
69. Best PHP/AJAX Grid System. Good for Newbie web developers
Few days ago I have developed a Grid system using PHP, jQuery and Ajax. I want to share this with my dear users. It is not very well parametrized or generic but if have little much understanding of jQuery and Ajax then its easy to use. Give your feed back about zGrid.
70. Create Ajax Rating/Voting system in Dzone and Digg Style
In my previous tutorial i explain how to create simple ajax rating using Ajax, PHP and CSS3. In this part i am going to create Digg.com and Dzone.com voting style.
sss
adssad
etyreyrre
many thanks for this!
aa
very nice…!!
very imprasive collection
Many thanks for sharing.. Try my website http://www.clever-click.co.uk
The best
Thanks for sharing free free of charge
wonderful work in here. I am grateful
Extremly good site
superb tutorial.Thank u very much,helped me a lot
There are some interesting points in time in this article but I don’t know if I see all of them center to heart. There is some validity but I will take hold opinion until I look into it further. Good article , thanks and we want more! Added utdesign13.com to FeedBurner as well
I’m impressed!!! Really informative blog post on utdesign13.com my friend. I just wanted to comment & say keep up the quality work.
Some really interesting details you have written on utdesign13.com .Aided me a lot, just what I was searching for
.
Nice post. Thanks
This is such a great resource that you are providing and you give it away for free. I enjoy seeing websites that understand the value of providing a prime resource for free. I truly loved reading your posts on utdesign13.com . Thanks!
Such informative web site! Large thanks! Thanks for a good time visiting utdesign13.com . It is really a pleasure understanding a web site like this filled with nice information. Thanks!
I just want to say I’m all new to blogging and site-building and certainly savored you’re web site. Probably I’m likely to bookmark your blog . You definitely have very good articles and reviews. Kudos for revealing your blog site.
I like this site so much, saved to favorites. “To hold a pen is to be at war.” by Francois Marie Arouet Voltaire.
Woow keren
Mas bro