Showing posts with label AJAX. Show all posts
Showing posts with label AJAX. Show all posts

Sunday, December 2, 2007

30 AJAX Tutorials

AJAX Client-Server Communication 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.

AJAX Drag and Drop Tutorials
Fun with Drag and Drop with RICO
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.

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. All of those were indirect interactions typically involving something like up/down arrows next to each item. The most heinous require server roundtrips for each modification...boo.

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.

AJAX Form Tutorials
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.

AJAX File Uploader Tutorial
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."

AJAX Framework and Toolkit Tutorials
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.

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.

AJAX Getting Started Tutorial
AJAX:Getting Started
This article guides you through the AJAX basics and gives you two simple hands-on examples to get you started.

AJAX Image Gallery Tutorial
Ajax: What is it Good For?
AJAX image gallery tutorial with some history and commentary

AJAX Keyword Suggest 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.

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

AJAX 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!

AJAX Sorting Tutorial
Make all your tables sortable
Tutorial on how to make all your tables sortable

AJAX Tabbed Pages Tutorials
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.

Friday, November 30, 2007

Thinwire - Next generation Ajax Framework

ThinWire is a development framework that allows you to easily build applications for the web that look and feel like the desktop applications you're familiar with. ThinWire focuses exclusively on a server-side programming approach, rather than the blended client-side & server-side approach taken by many frameworks. A benefit of this approach is that your code base is typically written entirely in a single language on the server and therefore traditional development, debugging and unit testing methods work without modification. Further, this allows developers to spend their efforts focusing on implementing the actual business needs rather than tackling many of the complexities associated with client-side development. While virtually any web application can be built with ThinWire, when it comes to business applications, we feel there is no faster solution on which to build. To that end, a number of business banking applications built on ThinWire are currently used at a production capacity, one of which is at a top ten bank in the United States with over 1000 users.

Tutorials
  • Build Web apps with ThinWire and Java code, Part 1: Manage Web app layout
    With
    ThinWire, an open source development framework, you can build Web applications that look and feel like desktop applications. In this five-part series of tutorials, you'll learn how to develop rich Web applications using ThinWire and Java(TM) programming. In Part 1, you begin the process and learn how to deal with user interface layout issues in ThinWire. You will discover in this tutorial that providing dynamic layout management using the ThinWire framework is a relatively easy thing to do.
  • Build Web apps with ThinWire and Java code, Part 2: Using the SplitLayout Class
    With ThinWire, an open-source development framework, you can build Web applications that look and feel like desktop applications. In this five-part series, you'll learn how to develop rich Web applications using ThinWire and Java. In Part 2, you learn to use the SplitLayout class in conjunction with your own layout management code to dynamically change the layout of a ThinWire GUI based on the current size of the Web browser window.
  • Build Web apps with ThinWire and Java code, Part 3: Styling support
    With
    ThinWire, an open-source development framework, you can build Web applications that look and feel like desktop applications. In this five-part series, you'll learn how to develop rich Web applications using ThinWire and Java programming. Here in Part 3, you learn to use ThinWire styling support at both a global level and an individual component level.
  • Build Web apps with ThinWire and Java code, Part 4: Write a template class
    ThinWire is an open source development framework that lets you build Web applications that look and feel like desktop applications. This five-part series explores how to develop rich Web applications using ThinWire and Java programming. In this installation, learn how to write a template class that defines one of the most commonly used Web page layouts.
  • Build Web apps with ThinWire and Java code, Part 5: Page switching
    Part 5 of the "Build Web apps with ThinWire and Java code" series explores a methodology for separating your ThinWire and Java Web site into multiple pages, providing the ability for your clients to switch among those pages using either direct pointer links or sequential page access.
  • Developing Ajax Web Applications using ThinWire and Java
    For those who know how to write stand-alone, event-driven Java/OOP applications, this is the easiest way that I know of to develop rich web applications.

Wednesday, July 18, 2007

ASP.NET AJAX Resources, Samples, Articles, Tutorials and Toolkits

ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.
ASP.NET AJAX allows the developer to create web applications in ASP.NET 2.0 (and to a limited extent in other environments) which can update data on the web page without a complete reload of the page (a "round trip" to the server). The key technology which enables this functionality is the XMLHttpRequest object, along with Javascript and DHTML.


ASP.NET AJAX Introduction
ASP.NET AJAX Tutorials and Articles
ASP.NET AJAX Sites
ASP.NET AJAX Blogs
ASP.NET AJAX Controls and Toolkits
  • AJAX Control Toolkit - is a joint project between the community and Microsoft. Built upon the ASP.NET 2.0 AJAX Extensions, the Toolkit aims to be the biggest and best collection of web-client components available.
  • Ajax Data Controls - The purpose of this project is to Develop data controls such as GridView, DataList, Repeater, DetailsView, FromView, ObjectDataSource on top of Microsoft Ajax Framework for Client Centric Development model.
  • Ajax Sprite Toolkit - is a collection of ASP.NET AJAX Controls and Behaviors that aid in the development of 2D sprite based games that run in a web browser.
  • ASP.NET AJAX Control Set (AjaxSet) - is a project to build AJAX control and extender library. Currently only the first one control is in package Validator Extender. More controls to come. If you want to contibute feel free to contact me.
  • GSAjaxControls - General & Specialized AJAX Controls built on top of the AJAX Control Toolkit and ASP.Net AJAX 1.0

ASP.NET AJAX Resources
ASP.NET AJAX Downloads
See Also;
  1. AJAX Frameworks and Resources
  2. What is Microsoft Silverlight? Silverlight Resources, Articles and Tutorials
  3. SQL Injection Resources
  4. Prevent robots from submitting data
  5. Frameworks are more important than Programming Languages
  6. Programming Handbooks and Cheatsheets

Monday, July 9, 2007

AJAX Frameworks and Resources

AJAX (Asynchronous JavaScript and XML) is a web development technique used for creating rich and interactive web applications. Ajax is asynchronous in that loading does not interfere with normal page loading. JavaScript is the programming language that Ajax function calls are made in. Data retrieved using the technique is commonly formatted using XML, as reflected in the naming of the XMLHTTPRequest object from which Ajax is derived.

Here is the list of ajax frameworks for different programming language;




Java
  • DWR - allows Javascript in a browser to interact with Java on a server and helps you manipulate web pages with the results.
  • Google Web Toolkit - is an open source Java software development framework that makes writing AJAX applications like Google Maps and Gmail easy for developers who don't speak browser quirks as a second language.
  • ZK - is an open-source Ajax Web framework that enables rich user interface for Web applications with little programming.
  • ThinWire - is an LGPL open source, free for commercial use, development framework that allows you to easily build applications for the web that have responsive, expressive & interactive user interfaces without the complexity of the alternatives.
  • AjaxAnywhere - is designed to turn any set of existing JSP or JSF components into AJAX-aware components without complex JavaScript coding.
  • AjaxTags - is a set of JSP tags that simplify the use of Asynchronous JavaScript and XML (AJAX) technology in JavaServer Pages.
  • Telosys - is an Open Source framework designed to build easily Web 2.0 applications, based on a “Client/Server” principle, using J2EE (Servlet, JSP, JDBC), lightweight clients and AJAX technology (XML requests via HTTP).
  • Swato - is an opensource framework that help you develop your webapps easier via AJAX.
  • OpenJacob - is a free framework for building a new generation of richer, more interactive, database driven, highly personalized cross-browser web applications.
  • Javeline
  • SmartClient - delivers on the promise of AJAX, enabling high-performance, high-productivity web applications to be deployed today.
  • Java Web Parts - is a project that provides small, reusable and largely independant Java components of interest to all web application developers.
  • Ajax4JSF - is implemented using a component library that adds AJAX capability to your existing pages without having to write any JavaScript code or replace existing components with new AJAX widgets.
  • xWire - is both a framework and a programmer's toolkit and is based upon several popular open source libraries.
  • WidgetServer - is a component based, server-side, Java/XML rich-client-framework
.NET
  • ASP.NET AJAX - is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.
  • Ajax.NET Professional
  • Magic Ajax - is a free open-source framework, designed to make it easier and more intuitive for developers to integrate AJAX technology into their web pages, without replacing the ASP.NET controls and/or writing tons of javascript code.
  • Anthem.NET - adds AJAX-like features to ASP.NET.
  • Visual WebGUI - is built on top of Microsoft ASP.NET (C#) platform and extends it by providing WinForms like development for web applications.
  • The AJAX Engine - is built upon the webservice standard protocols SOAP and WSDL for transferring the data between the browser client and the web server instead of using a new or proprietary protocol.
  • ComfortASP.NET - is an AJAX like framework for ASP.NET that doesn't actually require you to learn any AJAX programming.
  • OutPost
PHP
  • Xajax - is an open source PHP class library that allows you to easily create powerful, web-based, Ajax applications using HTML, CSS, JavaScript, and PHP. Applications developed with xajax can asynchronously call server-side PHP functions and update content without reloading the page.
  • Sajax - is an open source tool to make programming websites using the Ajax framework — also known as XMLHTTPRequest or remote scripting — as easy as possible.
  • Feather Ajax - is more or less an Ajax framework that is designed to be built upon. It's meant to be as simple as possible so that you can understand how it works to learn Ajax, and continue its development for your own purposes.
  • Echo2 - is the next-generation of the Echo Web Framework, a platform for developing web-based applications that approach the capabilities of rich clients.
  • Zephyr - is an ajax based framework for php5 developers. you can easily develop business applications using this robust framework. this is extremely easy to learn and very simple to implement. you can deliver a full fledged ajax application with strong business layer in backend within some minutes. installation and deployment of packages that you develop for zephyr is hassle free.
  • SimpleJax - is a lightweight (2.3KB!) combination of JavaScript and PHP that allows you to create highly flexible, AJAX-enabled applications on the web.
  • TigerMouse - is a modern web applications framework for PHP. It relies on AJAX technology, so in pair with being lightweight enables you to build dynamic, responsive and interactive web applications.
  • AjaxCore - is an open source PHP framework that aims the ease development of rich AJAX applications, using Prototype's JavaScript standard library. This means it uses Prototype as the core for making the AJAX requests, as it's proven to be reliable on any browser, plus adding all Prototype's features and shortcuts that reduce typing and help avoid the reinvention of the wheel.
General Purpose Ajax libraries
Here is the list of ajax articles and resources;
See Also;
  1. What is Microsoft Silverlight? Silverlight Resources, Articles and Tutorials
  2. SQL Injection Resources
  3. Prevent robots from submitting data
  4. Frameworks are more important than Programming Languages