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.

Study at MIT for free - MIT Open Courseware

OCW is a free publication of course materials used at MIT.

• Get lecture notes, problem sets, labs and more.
• Watch lecture videos and demonstrations.
• Study a wide variety of subjects.

MIT is committed to advancing education and discovery through knowledge open to everyone.

OCW shares free lecture notes, exams, and other resources from more than 1800 courses spanning MIT's entire curriculum.

MIT OpenCourseWare is an idea—and an ideal—developed, supported, and embraced by the MIT faculty, who share the Institute's mission to advance knowledge and educate students in science, technology, and other areas of scholarship to best serve the nation and the world. In 1999 the Faculty considered how to take best advantage of the Internet to advance education, and in 2000 proposed OCW.

Easy setup and configure WampServer - MySQL5, PHP5 + PECL, Apache2, PhpMyAdmin on Windows XP

WampServer is a Windows web development environment. It allows you to create web applications with Apache, PHP and the MySQL database. It also comes with PHPMyAdmin and SQLiteManager to easily manage your databases.

WampServer installs automatically (installer), and its usage is very intuitive. You will be able to tune your server without even touching the setting files.

WampServer is the only packaged solution that will allow you to reproduce your production server. Once WampServer is installed, you have the possibility to add as many Apache, MySQL and PHP releases as you want.

WampServer also has a trayicon to manage your server and its settings.

Download WampServer package

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.
  

MySQL Singleton Class with PHP5

The singleton can be use in lot of differents cases. In this exemple we will make a MySQL connection Singleton class. This will help us to always use the same connection.

class MysqlDB{
static private $instance_MysqlDB = null;

private
$objMysqli;

/**
* Instantiate the object
**/

private function __construct(){
$this->objMysqli = new mysqli("localhost", "root", "", "mysql");
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
}
/**
* Perform a query
*
* @param string $sql
*/

public function select($sql){
$this->objMysqli->query($sql);
$this->var_dumping();
}
/**
* Var dump the current object
*/

public function var_dumping(){
var_dump($this);
}

/**
* Get the current instance for the object
*
* @return object
*/
static public function getInstance(){
if(self::$instance_MysqlDB == null){
self::$instance_MysqlDB = new self;
}
return self::$instance_MysqlDB;
}
}

---------------------------------------
To use the singleton we will never use the constructor method. We will call the getInstance method.
Here is an example :

include_once("MysqlDb.php");
MysqlDB::getInstance()->select("SELECT * FROM `help_category` LIMIT 5");

Zend Framework Overview

Fav.or.it creator Nick has explained why he chooses Zend framework among the other PHP5 frameworks.

Is it a framework?

The first thing that I always have to explain when talking about the Zend Framework is that to me it is not a ‘framework’ or not in the same way others are frameworks. This causes a lot of confusion and misunderstand of what the Zend Framework has to offer. To me most frameworks require you to conform to how they ‘think’ (something Ruby/Rails suffers from) and breaking out from their thinking requires actual alteration of the framework.

To me the Zend Framework is actually a Library, something that I can pick and choose from and although a good percentage of each module does also interact with other modules this behavior can in most cases be overridden or sub-classed and behaviour changed.

The MVC

Another difference is that a lot of Frameworks revolve around their own implementation of the MVC (Model View Controller) and again if you want to break out from how they work then you may as well not use any of the framework. The Zend Framework does of course include modules that assist in setting up a MVC and it has many great tutorials on ‘the standard’ way of doings things. But once you begin to understand how everything fits together it has incredible power for those who want to stretch its legs.

Not for beginners?

I will at this point make lots of enemies by saying that the Framework is a professional product and is not really for the beginner. Although it has made strides towards simplifying some aspects of the MVC (and other modules) it is still certainly more complex than others and if you have no inclination to do anything ‘out of the ordinary’ then my advice is to use something else.

The Modules

The Zend Framework as I mentioned earlier is made up of a range of modules (full list here) most of which fav.or.it uses at one level or another. I wont go into detail for all of them as I would just be repeating what is said in the manual.

Zend_Acl - Access Control List

I have previous written at length about the ACL and done a podcast on the subject. It is a little hard to get your head around to start off with (the reason I tried to explain it in the PodCast) but it is extremely powerful and versatile.

Zend_Auth - Authentication

Authentication made simple. Although again we have sub-classed and extended the functionality it again got us up and running within hours and then let us think about the more complex tasks by filling in the basics.

Zend_Cache - Caching

The cache is fundamental for anyone who is serious about long term scalability. It allows caching of pages/parts of pages or just raw data. It has two killer features for me 1) Range of backend solutions (File,SQL, Memcache, ZendPlatform) 2) Tagging. The back end options give me great flexibility to choose the right kind of caching for the situation plus it is easy to extend to add your own. The tagging is a delightful way to group together different pieces of information so that they can be cleaned up / listed by tag or tags.

We created a whole new interface so we could view the current state of the various caches we have and allows us to clear out entries by key (every item must have a unique key) or by tag.

For anyone thinking about investing in Zend Platform it also means that when that time comes that any caching can be handed over to the platform.

Zend_Controller / Zend_View

I am a massive fan of well structured MVC’s and the Zend Framework gives me the flexibility to do everything we could possibly want. As default creating mapping between URL & method/controller gives you quick setup. You can then easily extend the routing (how a URL gets translated).

We have a whole set of custom routes, we have a fully sub-classed dispatcher and make use of the helpers when we can.

The Zend_View is quite simple as a starting point but is easily extended and can achieve a range of design patterns. We have various extensions to give us partials and layouts. The partials allow us easy blocks that have local variables assigned to render pages. The layout lets us arrange numbers of blocks/sections.

Zend_Db - Database

I cannot recommend Zend_Db enough! It is at once very simple to get going but fantastically full of depth. I had never considered myself much of a database expert and Zend_Db allowed me to think about the programming problem rather than SQL. The ability to build select statements programmatically with a consistent interface is a dream come true.

Zend_Feed

fav.or.it is all about feed aggregation and Zend_Feed gave us a fantastic head start on consuming and producing feeds. We have sub-classed this heavily as we have a lot of special requirements but it did save us lots of time covering the basics.

Zend_Filter + Zend_Filter_Input + Zend_Validate

I put these all in together as they all have similar tasks. Although at first I found constantly building up filter/validation chains long winded (but very readable) I soon starting building helper functions that let me build the chains with shorter (not sure if clearer) syntax which could then be easily repeated.

e.g.

const FILTER_EXAMPLE = 'Alnum:Alpha:StringTrim';
$string = Filter_Helper::filter(FILTER_EXAMPLE,$string);

The same can be applied for building up Validators. At some point I will release the full syntax and the code.

The Rest

• Zend_Gdata - Easy to use and very powerful, we use it to access blogger services
• Zend_XmlRpc - This is still in its infancy but it still does the job for most tasks
• Zend_Http - Want to perform some custom request? this handles nearly everything, we use it all over the place for a range of tasks and has proved to be very robust
• Zend_Date - Dates come in lots of formats and Zend_Date means you treat them all the same, a few question marks over future performance when over using this
• Zend_Log - Does what it says on the tin, quite lightweight but easily extended to give a few extra features that makes it worthwhile
• Zend_Session - I try and keep clear of over using session data but having the ability to namespace your sessions makes this very useful

Conclusion

The Zend Framework does a fantastic job of giving you a professional quality set of tools to get going with quickly and then when required it doesn’t stop you customizing it when you need to. As you grow more confident and start to understand the underlying reasoning behind the framework you start to work with it more and more and it encourages you to achieve the same kind of extensibility that it has achieved.

Beginning Symfony tutorial - Moving from plain PHP to Framework based development

Lately, i have been busy with recent two projects, which are being developed using Symfony framework. Let me say that it is fantastic. I wonder why i didn't use it before. Symfony is PHP5 framework inspired by Rails framework, exactly suitable for Web 2.0 application development. I planned to write tutorial about how to start Symfony, but realized that there are plenty of good tutorials out there. One of them is on sitepoint. Here is the tutorial, you can follow the links to read the rest of the Symfony tutorial

With the release of symfony 1.0, it's time for those who haven't tried it yet to see what's inside this beautiful framework. Stable, fully documented, and released under the open-source MIT license, symfony is used by hundreds of web sites, including some very large ones (Yahoo! Bookmarks, with its 20 million-strong user base, is built with symfony). If you haven't taken the time to look at the introductory screencasts on the symfony project website, this simple tutorial will lead you through the basics.

The best way to learn and understand symfony is to use it, so this article will lead you through the creation of a photo album application with this framework. You already know the basic features such an application should offer: the ability to upload photos, to describe and tag them, and the ability for visitors to browse and comment on your photos.

Symfony is a Model-View-Controller (MVC) framework written in PHP that's aimed at building web applications. If you're already familiar with the MVC paradigm, you won't be surprised by the way symfony organizes scripts. If you aren't familiar with MVC, you just need to understand that separating the code into three parts -- the logic code (called the Model), the presentation code (the View), and the request handling code (the Controller) -- is a good way to ensure the maintainability and reusability of code.

Not only is Symfony an MVC implementation in PHP, it also integrates a lot of objects that facilitate the development of web applications -- and integrates them all with a coherent syntax. Smart URLs, code generation, easy templating, internationalization, caching, automated form validation, and Ajax, are among the most appreciated symfony features. Developing an application with symfony is slightly different than building it with any other framework, or without any framework at all. It's faster, more productive, and just plain fun. But enough talk, let's see some code.

Read more at Sitepoint>>>

Checkout;
Now php scripts are developed that are more compatible to generate highest pay per click revenues. These are a nice choice for the webmaster that is a beginner, since php based web design is not easier to develop and master. A beginner can just think of getting cheap domain names and high speed broadband services but has little access to search engine optimization tricks.

Tune your web application's performance

There are ways to test your web application's performance against different loads. Automated testing applications really helps in these way. Load testing, stress testing, regression testing, and unit testing. All of these tests can be automatized using tools. Here is the open source/free web application testing tools;

• JMeter - used to test performance both on static and dynamic resources (files, Servlets, Perl scripts, Java Objects, Data Bases and Queries, FTP Servers and more). It can be used to simulate a heavy load on a server, network or object to test its strength or to analyze overall performance under different load types. You can use it to make a graphical analysis of performance or to test your server/script/object behavior under heavy concurrent load.
• ab - is a tool for benchmarking your Apache Hypertext Transfer Protocol (HTTP) server. It is designed to give you an impression of how your current Apache installation performs. This especially shows you how many requests per second your Apache installation is capable of serving.
• Web Application Stress Tool - The Microsoft WAS web stress tool is designed to realistically simulate multiple browsers requesting pages from a web site. You can use this tool to gather performance and stability information about your web application. This tool simulates a large number of requests with a relatively small number of client machines. The goal is to create an environment that is as close to production as possible so that you can find and eliminate problems in the web application prior to deployment.