Tutorial Links - Ajax Patterns

Tutorial Links

From Ajax Patterns

(Difference between revisions)
Revision as of 04:16, 12 September 2007
220.135.57.183 (Talk | contribs)
Framework/Library/Toolkit Tutorials
← Previous diff
Revision as of 16:23, 6 August 2010
59.103.208.185 (Talk | contribs)
Getting Started Tutorials
Next diff →
Line 3: Line 3:
= Getting Started Tutorials = = Getting Started Tutorials =
-* '''[http://itexpertscentral.com/index.php/2007/04/15/ajax-overview/ Overview of AJAX]''' Startup Tutorial from IT Experts Central.+* '''[http://itexpertscentral.com/web/ajax Overview of AJAX]''' Startup Tutorial from IT Experts Central.
* [http://www.openjs.com/ajax/tutorial/ Gentle Introduction to Ajax] * [http://www.openjs.com/ajax/tutorial/ Gentle Introduction to Ajax]
* [http://www.skynapse.com/blog/?p=24 Creating an AJAX based Newsletter Sign-Up] - Introductory Tutorial from Skynapse Business Technology * [http://www.skynapse.com/blog/?p=24 Creating an AJAX based Newsletter Sign-Up] - Introductory Tutorial from Skynapse Business Technology
 +* [http://hubpages.com/_viewpage/hub/Connecting-Ajax-Functions Connecting Ajax Functions] Explains how to connect or link Ajax functions together.
* [http://publicliterature.org/ajax/ Ajax Tutorial] - presented at University of Maryland. * [http://publicliterature.org/ajax/ Ajax Tutorial] - presented at University of Maryland.
*'''[http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=10 Ajax Beginners Tutorial]''' a simple tutorial to show how to start with ajax. *'''[http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=10 Ajax Beginners Tutorial]''' a simple tutorial to show how to start with ajax.
Line 15: Line 16:
* [http://www.packtpub.com/files/Ajax_SampleChapter.pdf Free chapter] from AJAX and PHP : Building Responsive Web Applications Book. * [http://www.packtpub.com/files/Ajax_SampleChapter.pdf Free chapter] from AJAX and PHP : Building Responsive Web Applications Book.
* [http://www.webpasties.com/xmlHttpRequest/ XMLHttpRequest in Baby Steps] * [http://www.webpasties.com/xmlHttpRequest/ XMLHttpRequest in Baby Steps]
 +* [http://www.pickatutorial.com Ajax Programming Tutorials] Collection of Ajax Programming Tutorials.
* [http://www.what-is-ajax.com/what-is-ajax.aspx What is AJAX?] Overview of how to get started using AJAX. * [http://www.what-is-ajax.com/what-is-ajax.aspx What is AJAX?] Overview of how to get started using AJAX.
* '''[http://www.ajaxlines.com/ajax/stuff/article/ajaxgetting_started.php AJAX in easy steps]''' * '''[http://www.ajaxlines.com/ajax/stuff/article/ajaxgetting_started.php AJAX in easy steps]'''
Line 32: Line 34:
* [http://www-128.ibm.com/developerworks/java/library/j-ajax3/ DWR] - Ajax with Direct Web Remoting * [http://www-128.ibm.com/developerworks/java/library/j-ajax3/ DWR] - Ajax with Direct Web Remoting
* [http://www.petefreitag.com/item/515.cfm "AJAX Tutorial with Prototype] I wanted to give an example of a good use of AJAX, and at the same time keep it simple. So I thought a good example would be to build a zip code verifier. As soon as the person enters the zip code it makes a request to the server to see if the zip code is in the database, and returns the city and state. * [http://www.petefreitag.com/item/515.cfm "AJAX Tutorial with Prototype] I wanted to give an example of a good use of AJAX, and at the same time keep it simple. So I thought a good example would be to build a zip code verifier. As soon as the person enters the zip code it makes a request to the server to see if the zip code is in the database, and returns the city and state.
 +* [http://hubpages.com/_viewpage/hub/Using-Ajax-to-make-JSON-file-a-Module-for-ACP Using Ajax to make JSON file a Module for ACP] Explains how to convert a JSON file into a module for use in Active Client Pages.
* [http://wiki.xajaxproject.org/Tutorials:Learn_xajax_in_10_Minutes "Learn xajax in 10 Minutes] xajax is designed to be extremely easy to implement in both existing web applications as well as new projects. You can add the power of xajax to nearly any PHP script in seven easy steps. * [http://wiki.xajaxproject.org/Tutorials:Learn_xajax_in_10_Minutes "Learn xajax in 10 Minutes] xajax is designed to be extremely easy to implement in both existing web applications as well as new projects. You can add the power of xajax to nearly any PHP script in seven easy steps.
* [http://www-128.ibm.com/developerworks/edu/os-dw-os-phpajax-i.html?S_TACT=105AGX59&S_CMP=GR&ca=dgr-lnxw07SAJAX "Using Ajax with PHP and Sajax] This tutorial explains how to use Ajax with PHP and introduces the Simple Ajax Toolkit (Sajax), a tool written in PHP that lets you integrate server-side PHP with JavaScript that makes this work. * [http://www-128.ibm.com/developerworks/edu/os-dw-os-phpajax-i.html?S_TACT=105AGX59&S_CMP=GR&ca=dgr-lnxw07SAJAX "Using Ajax with PHP and Sajax] This tutorial explains how to use Ajax with PHP and introduces the Simple Ajax Toolkit (Sajax), a tool written in PHP that lets you integrate server-side PHP with JavaScript that makes this work.
Line 44: Line 47:
* [http://aleembawany.com/weblog/webdev/000051_ajax_instant_tutorial.html "Instant Tutorial] Simply put, AJAX allows you to make a call to an http server (typically an RSS feed or a webpage), get it‚s content and load them into your existing page without having to refresh the whole page. This means that services like email don‚t have to reload the whole page everytime you click a message, saving on bandwidth (loading the header/footer all over again) and making things more efficient. * [http://aleembawany.com/weblog/webdev/000051_ajax_instant_tutorial.html "Instant Tutorial] Simply put, AJAX allows you to make a call to an http server (typically an RSS feed or a webpage), get it‚s content and load them into your existing page without having to refresh the whole page. This means that services like email don‚t have to reload the whole page everytime you click a message, saving on bandwidth (loading the header/footer all over again) and making things more efficient.
* [http://www-128.ibm.com/developerworks/java/library/wa-ajaxintro3/index.html?ca=drs- "Advanced Requests and Responses in AJAXR] In this article, Brett McLaughlin will show you the different status codes and demonstrate how browsers handle each and he will showcase the lesser-used HTTP requests that you can make with Ajax. * [http://www-128.ibm.com/developerworks/java/library/wa-ajaxintro3/index.html?ca=drs- "Advanced Requests and Responses in AJAXR] In this article, Brett McLaughlin will show you the different status codes and demonstrate how browsers handle each and he will showcase the lesser-used HTTP requests that you can make with Ajax.
 +* [http://www.m6.net "M6.Net Hosting resources] Reliable, lowest priced Windows hosting with ASP.Net, ASP, PHP, SQL Server and MySQl
 +* [http://www.baekdal.com/articles/Usability/XMLHttpRequest-guidelines XMLHttpRequest Usability Guidelines] Covers various usability issues with XMLHttpRequest.
 +* [http://jibbering.com/2002/4/httprequest.html Using the XML HTTP Request object] Explains the XML HTTP Request object.
= [[Drag-And-Drop]] Tutorials = = [[Drag-And-Drop]] Tutorials =
Line 54: Line 60:
* [http://br.sys-con.com/read/172585.htm "Building a Drag-and-Drop Shopping Cart with AJAX] For this article, we'll create an interactive shopping experience allowing us to add items to our shopping basket by dragging and dropping them onto an icon of a shopping cart. We'll add AJAX functionality, allowing us to update our shopping cart without redrawing the entire screen. * [http://br.sys-con.com/read/172585.htm "Building a Drag-and-Drop Shopping Cart with AJAX] For this article, we'll create an interactive shopping experience allowing us to add items to our shopping basket by dragging and dropping them onto an icon of a shopping cart. We'll add AJAX functionality, allowing us to update our shopping cart without redrawing the entire screen.
* [http://downloads.symfony-project.com/demo/cart/cart.mov Drag and Drop in PHP] The same drag and drop shopping cart as mentioned above, this time in PHP. Very clear tutorial. * [http://downloads.symfony-project.com/demo/cart/cart.mov Drag and Drop in PHP] The same drag and drop shopping cart as mentioned above, this time in PHP. Very clear tutorial.
 +* [http://www.zkoss.org/smalltalks/yuiextz-0.5.2/ Grid Drap and Drop and DataBinding Tutorial with ZK and Ext JS]
 +* [http://www.zkoss.org/smalltalks/dragdrop1/recycling.dsp Drap and Drop Identifier Matching Tutorial] Source codes and flash demo available.
= Form Tutorials = = Form Tutorials =
Line 77: Line 85:
* '''[http://www.ajaxlines.com/ajax/stuff/article/an_ajax_autocomplete_text_field.php An AJAX auto-complete text field]''' The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar). * '''[http://www.ajaxlines.com/ajax/stuff/article/an_ajax_autocomplete_text_field.php An AJAX auto-complete text field]''' The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar).
* '''[http://www.ajaxlines.com/ajax/stuff/article/easy_javascript_autocomplete_script.php Easy JavaScript Autocomplete Script]''' An attempt at a simple method for javascript-based suggestion dropdowns for autocompletionThis script is an attempt at providing a solution to the problem that is clear and modular enough to be easily hacked up and modified for other uses. * '''[http://www.ajaxlines.com/ajax/stuff/article/easy_javascript_autocomplete_script.php Easy JavaScript Autocomplete Script]''' An attempt at a simple method for javascript-based suggestion dropdowns for autocompletionThis script is an attempt at providing a solution to the problem that is clear and modular enough to be easily hacked up and modified for other uses.
 +* [http://www.zkoss.org/smalltalks/autocomplete/autocomplete.dsp Simple Autocomplete with Combobox]
= [[Live Search]] Tutorials = = [[Live Search]] Tutorials =
Line 104: Line 113:
* [http://www.symfony-project.com/demo/pager.html AJAX auto pager] Tutorial on how to display a long list without worrying about page links * [http://www.symfony-project.com/demo/pager.html AJAX auto pager] Tutorial on how to display a long list without worrying about page links
* '''[http://www.ajaxlines.com/ajax/stuff/article/building_a_pagination_system_with_ajax.php Building a Pagination System with AJAX]''' You 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? * '''[http://www.ajaxlines.com/ajax/stuff/article/building_a_pagination_system_with_ajax.php Building a Pagination System with AJAX]''' You 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?
 +
 += Google Maps Tutorials =
 +* [http://www.zkoss.org/smalltalks/gmapsz3/gmapsz3.dsp Draw A Route on Your Google Maps] A tutorial on how to integrate Google Maps and gpolyline with your Ajax approach. (with source codes and flash demo)
 +* [http://www.zkoss.org/smalltalks/gmapsz/gmapsz.dsp Google Maps in your Ajax apps] A Google Maps integration tutorial.
 +
 +[http://video.yahoo.com/watch/5543843/14571356 '''Gregory Geig''']
 +[http://www.youtube.com/watch?v=tmkA7UQtNMk '''Dan Geig''']
 +[http://vids.myspace.com/index.cfm?fuseaction=vids.individual&VideoID=60669001 '''Greg Vohn''']
 +[http://www.dailymotion.com/greggy09/video/16625689 '''John Geig''']
 +[http://www.motionbox.com/videos/7a9adfb51816efc7f5 '''Greg JOhn''']
 +[http://www.veoh.com/browse/videos/category/entertainment/watch/v187868669NxYE2Qd '''Gerry Geig''']

Revision as of 16:23, 6 August 2010

This list of tutorials is a combination of the original list on AjaxPatterns.org and Max Kiesler's list of 30 tutorials. Please feel free to add your own tutorial links. For entire websites about Ajax (like this one, AjaxPatterns.org), please refer to Website Links. Other links can be located at Links and there's also a separate area for Frameworks.


Contents

Getting Started Tutorials

Big Picture Tutorials

Framework/Library/Toolkit Tutorials

  • Ajax Lines Ajax Community - Resources, Toolkits, Websites, Tutorials ect ...*
  • Ajax Window Tutorial using the Gaia Ajax Widgets library
  • AJAX Design Patterns using dojo toolkit
  • DWR Tutorial
  • DWR - Ajax with Direct Web Remoting
  • "AJAX Tutorial with Prototype I wanted to give an example of a good use of AJAX, and at the same time keep it simple. So I thought a good example would be to build a zip code verifier. As soon as the person enters the zip code it makes a request to the server to see if the zip code is in the database, and returns the city and state.
  • Using Ajax to make JSON file a Module for ACP Explains how to convert a JSON file into a module for use in Active Client Pages.
  • "Learn xajax in 10 Minutes xajax is designed to be extremely easy to implement in both existing web applications as well as new projects. You can add the power of xajax to nearly any PHP script in seven easy steps.
  • "Using Ajax with PHP and Sajax This tutorial explains how to use Ajax with PHP and introduces the Simple Ajax Toolkit (Sajax), a tool written in PHP that lets you integrate server-side PHP with JavaScript that makes this work.
  • "Developer Notes for prototype.js If you tried to use this library recently, you probably noticed that documentation is not one of its strongest points. As many other developers before me, I got my head around prototype.js by reading the source code and experimenting with it. I thought it would be nice to take notes while I learned and share with everybody else.
  • ZK Tutorial An introductory tutorial for new users of ZK , #1 Ajax on SourceForge.net.

Web Remoting Tutorials

  • "Alternate Ajax Techniques, Part 1 By now, nearly everyone who works in web development has heard of the term Ajax, which is simply a term to describe client-server communication achieved without reloading the current page. Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques aren't limited to just XMLHttp. There are several other methods.
  • "Dynamic HTML and XML: The XMLHttpRequest Object Thanks to the little-known XMLHttpRequest object, an increasing range of web clients can retrieve and submit XML data directly, all in the background.
  • "Guide to Using XMLHttpRequest Using XMLHttpRequest with php and mysql
  • "Make asynchronous requests with JavaScript and Ajax Make asynchronous requests with JavaScript and Ajax. In this article, you'll begin with the most fundamental and basic of all Ajax-related objects and programming approaches: The XMLHttpRequest object.
  • "Instant Tutorial Simply put, AJAX allows you to make a call to an http server (typically an RSS feed or a webpage), get it‚s content and load them into your existing page without having to refresh the whole page. This means that services like email don‚t have to reload the whole page everytime you click a message, saving on bandwidth (loading the header/footer all over again) and making things more efficient.
  • "Advanced Requests and Responses in AJAXR In this article, Brett McLaughlin will show you the different status codes and demonstrate how browsers handle each and he will showcase the lesser-used HTTP requests that you can make with Ajax.
  • "M6.Net Hosting resources Reliable, lowest priced Windows hosting with ASP.Net, ASP, PHP, SQL Server and MySQl
  • XMLHttpRequest Usability Guidelines Covers various usability issues with XMLHttpRequest.
  • Using the XML HTTP Request object Explains the XML HTTP Request object.

Drag-And-Drop Tutorials

This is is a script that uses Ajax to read data from external RSS sources and display them inside dragable boxes. You can also create new boxes dynamically directly from the page. This is the first version of this script.

For those of you who haven't seen Rico its another AJAX library, with quite a few cool extras. What I'm going to cover here is my first expiriment with Rico and their 'drag and drop' functionality. Getting basic drag and drop functionality is extremely easy with this library, and with just a bit of modification you can easily make it fit whatever you could want.

Form Tutorials

In this tutorial I’ll show you a simple method to pass any HTML form through AJAX without the need to hard code all form fields into the JavaScript or Server Side Script. Using this simple piece of JavaScript you can reuse it as is with any form, saving a lot of time. I’ve even added basic validation to certain form element types (which would be expected).

  • "Accessible Forms and Unobtrusive Javascript I usually try to separate backend logic from the user interface logic when creating new PHP applications. I am pro fat gui and usually have a lot of client side scripting going on. I mostly use AJAX or other remote scripting techniques to call actions defined in the PHP backend.
  • "Submit a form with Ajax The new release of CakePHP (RC2) comes with a completely rewritten AjaxHelper::form() function (with the disadvantage that it breaks existing code).
  • "Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web.

File Uploading Tutorials

  • "Better File Uploads with AJAX and JavaServer Faces In this article, we will take fresh approach and implement an AJAX-powered component that will not only upload the file to server, but also monitor the actual progress of a file upload request in "real time."
  • CakeTimer - An Ajax File Uploads Progress Bar This is a demonstration of an AJAX powered progressbar to monitor file uploads with (Cake)PHP.
  • Asynchronous file upload with AJAX progress bar in PHP One of the few things that I find lacking in PHP is the ability to report the progress of a file upload. This means that file uploads, especially uploads of larger files, can be extremely frustrating for end users when they don’t know if the upload is progressing or if it has stalled or if it has even started.

Image Gallery Tutorial

Suggestion/Autocompletion Tutorials

  • "How to create the Google Suggest feature with ASP.NET 2.0 Google Suggest seems to be the topic du jour in the blogosphere. It is a cool feature, but what I really enjoy is that it is yet another real world example of a "chubby" client.
  • "Creating an Autosuggest Textbox with JavaScript, Part 1 Over the past year, Google has branched out from its search engine into other types of Web applications. One that caused a great deal of excitement among Web developers is Google Suggest. The basic idea is very simple: as you type, Google suggests search terms that come up with results. The first suggestion is filled into the textbox as you type while a list of several suggestions appears in a dropdown list beneath the textbox.
  • An AJAX auto-complete text field The AutoSuggest class adds a popdown menu of suggested values to a text field. The user can either click directly on a suggestion to enter it into the field, or navigate the list using the up and down arrow keys, selecting a value using the tab key. The values for the suggestion list are to provided as XML (by a PHP script, or similar).
  • Easy JavaScript Autocomplete Script An attempt at a simple method for javascript-based suggestion dropdowns for autocompletionThis script is an attempt at providing a solution to the problem that is clear and modular enough to be easily hacked up and modified for other uses.
  • Simple Autocomplete with Combobox

Live Search Tutorials

  • "HOWTO: Animated Live Search / Ordered List '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.
  • "Live search explained Live search will gradually replace traditional search in web applications. As mainstream programs such as Windows Vista matures up to release, and live search is deeply integrated, we can expect more web pages implementing live search.

Rounded Corner Tutorials

  • "Rico rounded corners without all of Rico I extracted and made very minimal changes to Rico's rounded corner implementation so I could use it without needing all of Rico. Currently I'm using Script.aculo.us in all of my projects and didn't need all of Rico, but Script.aculo.us doesn't have a Rounded Corners implementation. All credit to the talented guys over at OpenRico for this!

Bold text

Headline text

Insert non-formatted text here

Sorting Tutorials

Tabbed Pages Tutorials

  • Microlink Pattern
  • "Building Tabbed Content This workshop we will be building a tabbed content browser that's Ajax powered. When ever a user clicks a tab the Ajax will communicate with the server and send back the appropriate data for that tab. We will start this workshop off with the XHTML and CSS for the tabbed content browser.
  • "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.
  • "Very Dynamic Web Interfaces One of the classic drawbacks to building a web application interface is that once a page has been downloaded to the client, the connection to the server is severed. Any attempt at a dynamic interface involves a full roundtrip of the whole page back to the server for a rebuild--a process which tends to make your web app feel inelegant and unresponsive. In this article, I'll be exploring how this problem can be tackled with the use of JavaScript and the XMLHttpRequest object.
  • "AJAX Design Patterns Excellent tutorial on how to build an AJAX powered website, with dynamic page loads.
  • "Beautiful JavaScript-Powered Pages I've been delving deeply into the world of Javascript-powered interfaces. Now that I've had some time to play and learn about the scripts and techniques that are out there, I've come to what I believe to be the ultimate combination.

Auto pager Tutorials

  • AJAX auto pager Tutorial on how to display a long list without worrying about page links
  • Building a Pagination System with AJAX You 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?

Google Maps Tutorials

Gregory Geig Dan Geig Greg Vohn John Geig Greg JOhn Gerry Geig