Navigation Menu+

42 Recent AJAX Tutorials

Posted on Jul 4, 2006 by in Web

When I first started posting about AJAX over a year ago, many of the posts I found were about definitions, theory or examples. Today, most of the links that I find are tutorials and I applaud this. The following is a list of what I consider to be the best and most helpful AJAX tutorials I’ve found in the last two months. “Please let me know through email or a comment if you know of any other great AJAX tutorials and I’ll be glad to post them. Also special thanks to all of the folks who produced all of these great free learning experiences.”AJAX and API Tutorials rnGo forth and APIrnApplication Program Interfaces are, broadly speaking, tools for building software applications. An operating system API might help you build applications with a consistent interface, but Web APIs are mostly about giving you access to data. Even Web APIs aren’t a new idea. Google’s search API has been available via SOAP since 2002, and there’s definitely older services than that. However, the recent growth in Web API availability has been fuelled by two recent developments. The first, which I’ve already mentioned, was a philosophical change in the way that data is handled. The second was the introduction of AJAX. Again, not a new idea, or even a new technology, but sometimes it’s all about timing.”MapStatsrnBlog Flux MapStats is the coolest way of tracking your website visitors. Not only does it provide the normal statistics and graphs, we have incorporated the system into Google Maps! Instantly see where your latest visitors are coming from, and find out what they are looking for.”Working with the Google Web ToolkitrnThe Google Web Toolkit (GWT) is, in essence, a JavaScript generator. The interesting thing is what this JavaScript is generated from: Java. GWT takes Java code written against a special API and converts it into browser-runnable Ajax code. If that weren’t enough to make it cool, it also includes a test harness (see Figure 1) that will execute the Java code inline with a test browser, allowing you to step-through debug (see Figure 2), profile and unit test your Ajax front end in your favorite IDE or at the command line.”AJAX Auto-Complete TutorialUsing Ajax Agent and PHP for Auto-CompleternDescription: In this HOWTO I will explain how to use AjaxAgent and PHP to create an Ajax Auto-Complete box with a drill-down list of data. Although the state of this Ajax Framework is questionable it is so far the simplest and easiest framework I have found.”AJAX Editing Tutorials rnAJAX Edit In Place With PrototypernLate last year Drew McLellan posted a great article on 24ways.org called Edit-in-Place with Ajax. Using Flick as an example and Prototype to do the heavy lifting he showed how to edit text inline. Like many other people I’ve been fascinated by this approach to altering text. After playing with Drew’s example off and on I finally sat down and decided to generalize it a bit more to make it easier to use.”Easy AJAX inline text edit 2.0rnAs everybody knows, refreshing pages is so 1999. AJAX, DOM, whatever you call it makes it possible to let people edit a piece of text inline without having to use a submit button.”AJAX Flash Tutorial rnIncito – Interactive Everything“SwfJax is a new approach to asynchronous JavaScript and XML applications using revolutionary Flash technology. SwfJax uses a lightweight SWF (Adobe’s Small Web Format or simply – Flash) engine to get XML data from the server and xPath (XML Path Language) to address a part of data it has retrieved. Data can be returned back to Javascript as an Array. You can also send multiple xPath queries at once.”AJAX Form Tutorial rnHTTP Authentication with HTML FormsrnAuthentication in Web applications has been highjacked, HTTP defines a standard way of providing authentication but most apps use the evil spawn of Netscape, otherwise known as cookies. Why is this? Cookies aren’t designed for authentication, they’re a pain to use for it, insecure unless you know what you’re doing, non-standard, and unRESTful.”AJAX Gallery Tutorial rnPyxy-galleryrnPyxy-gallery is a PHP script to make an image gallery. There are many other scripts to do this, but this one is different. Maybe even better.”AJAX and Java TutorialsrnAjax for Java developers: Exploring the Google Web Toolkit“The recently released Google Web Toolkit (GWT) is a comprehensive set of APIs and tools that lets you create dynamic Web applications almost entirely in Java(TM) code. Philip McCarthy returns to his popular Ajax for Java developers series to show you what GWT can do and help you decide whether it’s right for you. (Note: You can now download an updated ZIP file containing the article source code.)”Project jMakirnjMaki is all about enabling Java developers to use JavaScript in their Java based applications as either a JSP tag library or a JSF component.jMaki uses the best parts of Java and the best parts of JavaScript to deliver a rich AJAX style widgets. jMaki currently provides bootstrap widgets for many components from Dojo, Scriptaculus, Yahoo UI Widgets and DHTML Goodies. This project also includes a set of AJAX widgets with a focus on Web 2.0 such as a RSS widget, a del.icio.us Bookmark widget, a Chat widget, and many more to come.”AJAX and Javascript Tutorials rn15 Days of jQueryrnIf your project calls for AJAX or DOM scripting and you need it done quickly, with minimal fuss, and you believe in keeping things simple, then jQuery might be perfect for you.”jsScrollingrnNice javascript text scroller with examples.”Javascript Motion Tween“Nice tutorial on how to do a purely javascript powered motion tween.”Narrative JavaScriptrnNarrative JavaScript is a small extension to the JavaScript language that enables blocking capabilities for asynchronous operations. This makes writing asynchronous code sequences easier and increases code readability.”Serving JavaScript FastrnThe next generation of web apps make heavy use of JavaScript and CSS. WeaO(TM)ll show you how to make those apps responsive and quick.”AJAX Library Tutorialsrn15 Things you can do with Yahoo! UIrnIn this article I’m going to share some of my short stories, poems, and random sonnets of affectionate escapades I’ve had with JavaScript during the last few months, which I’ve built using the Yahoo UI utilities. Some are rather embarrassing, others useful, and yet others I feel are just downright sexy. If you see something you like, feel free to take it, tweak it, and make it your own. This is what some poetry afficionados of secret societies would call a poetry slam. So for want of a better phrase, this can be a code slam.”JSXML XML Tools“JSXML includes REXML, a high-performance parser that doesn’t mind if you throw 2000 lines of (well-formed) XML at it, a builder with a unique API that invites the coding of GUIs (graphical user interfaces) around it, and an iterator that makes costly recursion unnecessary. It was released under the LGPL (it’s free for private and commercial use, no strings attached) and has been downloaded over 300 times.”Cheat Sheets for the YUI UtilitiesrnThe YUI development team has begun drafting some cheat sheets — inspired by the handy references published by ilovejackdaniels, among others — that give you a one-page dashboard of documentation for each of the library’s components.”AJAX and PHP Tutorial rnDeveloping PHP the Ajax way, Part 2: Back, Forward, Reloadrn major challenge of Asynchronous JavaScript and XML (Ajax)-driven Web sites is the lack of a Back button. We will use JavaScript to create a history stack for the Ajax photo gallery built in Part 1 of this two-part “Developing PHP the Ajax way” series. This history stack will closely mirror the history utility found in Web browsers, and it will be used to provide Back, Forward, and Reload buttons for the application.”AJAX Programing Tutorials rnAJAX Counting Nightmares“I’ve been very vocal about the AJAX counting issue; I’ve written several articles, spoken on panels, and pushed the IAB to update the impression guidelines on a very fast timeline. There’s been interest and response, and the IAB is beginning to act. But everyone involved in the process realizes this will take time. So today, my recommendations for how developers of AJAX Web pages and software applications that include advertising can deal with the unique counting issues.”AJAX Feedback MechanismrnOne thing that I have always tried to solicit as much as possible is user feedback. For example, when a user signs up for Toronto, they get a personalized email from me, complete with my actual email address. I want to make it as easy as possible to give feedback.”Building a Pagination System with AJAXrnYou know how to use AJAX to pull rows from a database, but do you know how to create an AJAX-based system to organize the records neatly into pages? You’ll know how to do that by the end of this series! This first article shows you how to build the user interface.”AJAX and Prototype Tutorials rnPrototype Window Class : IntroductionrnThis javascript class allows you to add window in a HTML page. This class is based on Prototype. The code is inspired of the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file , but it’s not mandatory. It has been tested on Safari, Camino, Firefox and IE6.”Prototype Window Class : Samples“Here is a list of sample codes to show different ways to create windows and dialogs. You can view source of each example, even edit it and test your modification immediatly in your browser. Just click again on the link to open a new window/dialog with the modified code. Each window uses a javascript function to get a new id and DO NOT call setDestroyOnClose().”Really easy field validation with PrototypernI wanted a robust javascript validation library that was simple to implement and didn’t require me do any extra work other than creating the form.”Script# PrototypernScript# brings the C# developer experience (programming and tooling) to Javascript/Ajax world. This post shares a prototype project for enabling script authoring via C#..”AJAX in Real Time Tutorials rnIntroducing AjaxSpyrnWhile playing with the new RJS templates in rails, I found it difficult to know what was actually being returned from my requests. Thus, AjaxSpy was born. It’s a simple JavaScript and CSS file. All you need to do is include the js file in the header of your document, the css is automagically included (must be in the stylesheets directory). The script relies on Prototype 1.5.0rc0, and for it to be sexy you need the Scriptaculous effects library. You can include it conditionaly based on params in the query string, or do some fancy session stuff.”Mapping website visitors in real time“A while ago I had an idea. What if I were to try to geographically locate all the visitors to my website, and tag their locations on a map? Using Google Maps, Ajax, MySQL and some PHP, it came together quite nicely.”AJAX Scalability Tutorials rnScalable AJAXrnAJAX done well can reduce server load and bandwidth, but I’ve seen a lot of people jumping on the AJAX bandwagon who don’t really consider what the impact is on the back-end. Done badly, AJAX can bring a server to its knees.”AJAX Sorting Tutorial rnSortedTable examplernSortedTable allows you to make any valid table a sortable one. Tables can be sorted automatically or manually by moving rows.”AJAX Tree Tutorials rnEditable JavaScript TreeGrid“EJS TreeGrid is DHTML component written in pure JavaScript to display and edit data in table, grid, tree view or grid with tree on HTML page.”SilverStripe AJAX Tree ControlrnNice AJAX tree tutorial and script using Prototype and Behaviour libraries.”AJAX UI Element Tutorials rnBubble TooltipsrnNearly two years ago over at pro.html.it I wrote an article on how to build pure CSS tooltips and then spice them up with a little DOM to ensure semantic use of the title attribute. Recently I was playing with a variation, a nearly pure Javascript+CSS approach where the tasks assigned are more clearly separated: interaction to javascript, presentation to CSS. So the new article on Bubble Tooltips was published this week in italian on Pro, and I’m presenting here a translation for the international audience.”More Rounded Corners with CSSrnMore rounded corners: Taking the “Sliding Doors” approach to fluid, rounded-corner/border/shadow-based dialog boxes, with examples .”AJAX Website TutorialsAJAX Desktop TutorialrnThe purpose of this tutorial is to explain, step-by-step, how to create an AJAX desktop/homepage. The homepage we will create will have most of the capabilities of established homepages like Netvibes, PageFlakes, etc.”Ajax Tabs Content ScriptrnThis tab content script uses Ajax to let you display a selection of external content on your page inside a DIV and via CSS tabs! We got our inspiration for this script from Yahoo’s new homepage, which employs such a concept to show news in an organized fashion.”XMLHttpRequest Tutorials rnAJAX:Getting Started – MDCrnThis article guides you through the AJAX basics and gives you two simple hands-on examples to get you started.”AdvancedAJAX 1.1rnAdvancedAJAX is a JavaScript object allowing to use XMLHttpRequest object easier and speeding up development of AJAX based projects. It consists a bound of methods helping creating queries, error handling, usage with HTML forms as well as connection timeouts and reconnecting.”rnFjax – a lightweight methodology for Ajax style developmentrnFjax is a technique focused on drastically streamlining the XML handling layer of web 2.0 applications. Picture Ajax’s XML parsing and handling with less than 65 lines of code! It’s not a replacement for toolsets that provide presentation-layer visual gizmos. Think of it as a new engine to put under the hood of all the great widgets that are already out there.”Responsible Asynchronous ScriptingrnAsynchronous or remote scripting has been lurking in the background of web app development for quite some time now. Originally dependent on proprietary technology like Java applets, ActiveX and Flash or clever combinations of disparate technologies like images and cookies, native support for the XMLHttpRequest (XHR) object in modern browsers has made it easier than ever to make web apps more responsive and more like their desktop counterparts. This lower barrier to entry also makes it easier to make poor decisions and inappropriate use of a powerful technology.”XmlHttpRequest Debugging for IErnSince I wrote the original XMLHttpRequest Debugging user script for Firefox (screenshot), almost a year ago, it has received a lot of positive feedback and a number of you expressed interest in having the tool support IE, to ease your AJAX development. Finally, here is a port of the script to run on IE, in the form of a bookmarkletrn