UXDE dot Net Wordpress Themes

40 Constructive Tutorials Using AJAX Technology

AJAX is an interactive web development tool which has gained a lot of popularity recently and has allowed web developers to enhance their experience through this user-friendly application. It is gaining more attention and exposure by the web developers because it has fulfilled their requirement to have faster websites and page views that can provide them with as much information as they require without using a lot of resources. Through 40 Constructive Tutorials Using AJAX Technology, we have aimed at helping you out with ideas which you can use to create these on your own. Although there are services and tools of AJAX as well but are paying more attention towards the tutorials in this post. Hope you will enjoy it.

Uploading Files with AJAX

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.

Ajax Upload; A file upload script with progress-bar, drag-and-drop.

This plugin uses XHR for uploading multiple files with progress-bar in FF3.6+, Safari4+, Chrome and falls back to hidden iframe based upload in other browsers, providing good user experience everywhere.

Testing Your JavaScript with Jasmine

We all know we should be testing our code, but we don’t actually do it. I guess it’s fair to say that most of us put it off because, nine times out of ten, it means learning yet another concept. In this tutorial, I’ll introduce you to a great little framework for testing your JavaScript code with ease.

 

Animated AJAX Record Deletion Using MooTools

I’m a huge fan of WordPress’ method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here’s how to achieve that functionality with MooTools JavaScript.

 

Ajax Data Controls and Effects to Work with Tables

An useful collection of Ajax Data Controls and Effects that will help you to work with tables.

 

How to Create an Infinite Scrolling Web Gallery

When working my way through a web gallery, I find it annoying when I must change pages; so in today’s tutorial, we will learn how to create an auto-generating, one-page, infinite scrolling gallery with PHP and AJAX. Let’s get started!

 

How I Made the Domai.nr Chrome Extension

Writing a nifty Chrome Extension honestly isn’t as difficult as you might think. In this tutorial, I’m going to walk you through how I took an API offered by a great domain-name search service, Domai.nr, and created a Chrome extension for them, simply using their API.

 

More Sample AjaxControlToolkit TabContainer Themes …

After working on a YUI TabView theme for the AjaxControlToolkit’s TabContainer control, I thought it might be fun to create a few more TabContainer themes for some of the other tab-style controls that I have seen floating around the web.  I was especially curious in seeing what it would take to include images in each of the tab panel header’s.

 

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.

 

How to Upload Files with CodeIgniter and AJAX

Uploading files asnychronously can be a pain at the best of times, but when coupled with CodeIgniter, it can be a particularly frustrating experience. I finally found a way that not only works consistently, but keeps to the MVC pattern. Read on to find out how!

 

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 .

 

Table Examples and Demos

Built in MooTools, TableGear gets your data onto a Web page. It handles submitted data both from AJAX calls and a standard post, and it returns data to the application. Check out the demo here.

 

Getting Real-Time with Pusher

Do you want to spice up your web applications by making them real-time — but don’t want to create new infrastructures for the sole purpose of getting web sockets to work? In this article, we’ll explore how to use and implement Pusher, an HTML5 WebSocket-powered real-time messaging service for your applications.

 

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!

 

FancyZoom meets Prototype

Orderedlist rewrote FancyZoom in Prototype with some small changes. It now uses Apple’s rounded corners and supports pretty much any HTML you can throw in a <div> (images, text, Flash, etc.). It was built using Prototype and script.aculo.us; AJAX was not used, so it now works with any HTML already included on the page. Check out the demo here.

 

Image Previewing Examples and Demos

The imgPreview plug-in allows users to preview an image before clicking it and preloads the image so that when a user does click it there is no waiting time. The image preview displays in a tool tip-like box on hover. Check out the demo here.

 

e24TabMenu – AJAX drop-down tab menu

e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly.

 

Creating a “Filterable” Portfolio with jQuery

If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.

 

Time frame

Timeframe is open source, tested, and available for forking, pushing, and pulling at Github:

 

How to Build an RSS Reader with jQuery Mobile

Today, we’ll dive into jQuery Mobile, which, at the time of this writing, is in a RC1 state. We’ll build a simple Tuts+ RSS reader, using PHP and jQuery Mobile. When we’re finished, you’ll have the ability to add this simple project to your iPhone or Android phone with the click of a button, as well as the skills to build your own custom mobile web apps!

 

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.

 

Ajax File Upload Tutorial

First of all I have to say that to create a pure AJAX file upload system is not possible because of security limitations of JavaScript. All of the Ajax upload systems I know use some third party tool/package or only mimics the AJAX feeling. Even so it makes file upload process a bit nicer. In the next section I will present you a solution which imitates the AJAX process, but uses a normal upload process and iFrames.

 

Creating AJAX websites based on anchor navigation

It can be very very useful to create awasome ajax based sites such as Gmail web application from Google, users will appreciate it so much. As always we will use jQuery to do the ajax part easier for all..

 

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).

 

Creating An Amazing jQuery Style Switcher with Ajax Techniques …

In this tutorial author is showing you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive entirely degradable dynamic style switcher which will be quick and easy to implement.

 

Enhancing Web Apps with AmplifyJS

There seems to be a new crop of special-purpose JavaScript libraries every week. Gone, it seems, are the days of using only one library per project. Today I’ll introduce you to a very cool component library, AmplifyJS, that offers just a few very specialized components.

 

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.

 

How to 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. For example a community that use the service to manage their events, or to display your future trips in your blog ?

 

How To Build a Widget to Display your Buzzing

A couple months ago, Google released a new Twitter-like service, called Buzz. We can use this service to display our latest buzzes on any site. So, in this tutorial, I’ll guide you through the process of building your own Buzz widget.

 

Ajax Fancy Captcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. We are introducing you to a new, intuitive way of completing “verify humanity” tasks. In order to do that you are asked to drag and drop specified item into a circle.

 

Getting Started with Spine Mobile

With the growing complexity of JavaScript applications, frameworks are an absolute must if you need to meet real world deadlines. In this article, we’re going to take a look at a new framework called Spine Mobile which you can use to create awesome mobile applications in CoffeeScript and HTML, without sacrificing the great user experience of native apps.

 

Ajax RSS reader

The first thing I thought about doing when I read about requesting Extensible Markup Language (XML) from JavaScript code on a Web page was to get some RSS and display it. But I immediately ran into the security issue of XML Hypertext Transfer Protocol (HTTP), where a page that comes from www.mysite.com can’t address pages from anywhere other than www.mysite.com. My plans to build a generic RSS reader in just the page were dashed. But Web 2.0 is all about ingenuity, and solving the problem of how to create an RSS reader with XMLHTTP teaches a lot about how to program the 2.0 Web.

 

Dig into Dojo: DOM Basics

Maybe you saw that tweet: “jQuery is a gateway drug. It leads to full-on JavaScript usage.” Part of that addiction, I contend, is learning other JavaScript frameworks. And that’s what this four-part series on the incredible Dojo Toolkit is all about: taking you to the next level of your JavaScript addiction.

 

AjaxWith

AjaxWith has a huge collection of Ajax tutorials, resources that will help you to learn Ajax in an easy way.

 

ASP.NET AJAX framework

ASP.NET AJAX is a free framework for quickly creating efficient and interactive Web applications that work across all popular browsers. ASP.NET AJAX is built-into ASP.NET 3.5. It is also available as a separate download for ASP.NET 2.0.

 

Voting System with jQuery, AJAX and PHP

Vote up or down on any particular link, giving an indication of how well an article has been received. In this tutorial, you learn how to recreate this unique voting system using jQuery, AJAX and PHP.

 

Vista-like Ajax Calendar version 2

The Vista-like Ajax Calendar (vlaCalendar) version 2 is a unobtrusive  web version of the slick and profound Windows Vista taskbar calendar, by using the MooTools javascript framework, AJAX, XHTML, CSS and PHP.

 

Introducing the ASP.NET Ajax Frameworks

This article takes a brief look at the features of some of the more widely used ASP.NET Ajax frameworks.

 

Ajax Website Slider

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.

 

Google AJAX APIs

Google’s AJAX APIs let you implement rich, dynamic web sites entirely in JavaScript and HTML. You can add a map to your site, a dynamic search box, or download feeds with just a few lines of JavaScript. If you want to play around with them, try using the Interactive Code Playground.

 

 

Abdul Haadi

Haadi is hatching out in design community through Webblog360. He is ambitious and determined to excel because he lives among design nerds.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>