1. Open the dbConnect.php and put your database name, username, and password in it. (You may have to create a new database)
2. You also need to insert your database name, username, and password into the createDbTables.php. Then open the file if your web browse.
3. Now, try going to ajax-poller.html in your web browser.

You can find a great deal more detailed information about the poller on their webpage.

2. If you are running your own server then this will be important. Plan for an increase in HTTP requests. A poorly written application can bring a server to its knees. With normal HTTP traffic, you only send data when someone requests a new page, but with an Ajax application it is in constant communication with the server. Keeping the number of times your programs has to communicate with the server low will help prevent this issue. A few ways to accomplish this is with caching. It’s the same concept of when you cache a web page so your server doesn’t have to access the database every time someone goes to your site. It only reloads the data when something changes. Also remember that Ajax is limited to two connection per URL. There is speculation that IE 8 will allow more but not all users will be using that browser so if you want to make your application for the widest possible audience keep the connections at two.

3. Remember users are click happy. If your application takes a while to load put more then just a spinning circle. Many users will think that the page is stuck and start reloading the page. Depending on how you have written your application this may lose any data that the user has previously entered in and they may have to star over. A status bar or something like that will let your user know that the application isn’t stuck. Users like to see something that shows your application is doing something. The spinning circle that has become standard seems to have a new definition with users. It seems to mean there is something wrong with the page and it isn’t loading.

4. Just because it can be written in Ajax does not mean it should be written in Ajax. Yes I know Ajax is very robust but it can cause a lot of bandwidth issues. If a script can be written in PHP or Perl, try using that instead to ease the load on your server. Your IT guys will thank you.

The Ajax Bible does have a chapter on JavaScript, but if you don’t have a full grasp of that you do not need to be reading this book. The JavaScript chapter in my opinion is more of a refresher course for those who have been using JavaScript and want to get into Ajax. It says in this chapter that it gives you everything you need to know about JavaScript in it, but I think its a little hard to leave everything about JaveSript in just one chapter. I would recommend getting a JavaScript reference book to help you through the book. Even if the function you are using is in the chapter, I lose my place flipping back and forth in a book.

In conclusion, I find the Ajax Bible a good book. It gives plenty of examples and well thought out explanations on how to use them.

Firebug

My personal favorite is an add-on for firefox, it is called firebug. Best of all, it is cross platform so if you want to use it on Linux or Windows you can. It is also free. It it very easy to install, you just go to their website and download the add-on on the right side of the page. Firefox will restart and you will have it ready to use.

Interface:

The interface of firebug is fairly simple. The main panel has 6 tabs Console, HTML, CSS, Script, DOM, and Net.

• Console: This is where JavaScript error messages are displayed, but you can also interact with the page by entering JavaScript commands into the console tab.
• HTML: Shows HTML as an indented hierarchy of DOM nodes, which you can expand to see or hide child nodes.
• CSS: Allows you to view all loaded style sheets, modify styles on the fly. See list of styles sheets and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of “Edit”.
• Script: Shows the javascript files and the calling document. See list of included JavaScript files and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of “Inspect”. Set breakpoints and conditions under which break points appear.
• DOM: Shows all the page objects and properties of the window. As variables are properties of the window object, Firebug displays all JavaScript variables and their values.
• Net: Shows all the information that was downloaded, how long each resource took to download, the HTTP request headers and server response sent for each resource. Their is also an XHR tab is very useful for AJAX debugging.

How is it useful for debugging:

The feature that I find most helpful in debugging AJAX is the console.log. It allows you to reload components of the page without having to reload the entire page. If you reload the entire page it will rest all the HTML, JS and CSS to what is defined in the static files. Their is a console API that makes the console tab very useful. Their is more info about the API here.

Some issue with Firebug:

I have noticed that occasionally that webpages will never completely load or my browser will crash when I go to them. The easiest way to correct these issues to to only turn on Firebug when you are using it. The reason why a page will never completely load is because there may be a JavaScript error on the page, and Firebug has put a breakpoint at the error and stopped the script. The reason why your browser crashes is because Firebug keeps track of all the error on the pages. This can take up a lot of system memory, which can crash your browser.

Ajax Fundamentals

Probably the most revolutionary aspect of any Ajax web application is its treatment of website pages, or more appropriately a lack thereof. You see, the end goal in any Ajax application is to mimic the functionality, speed, and efficiency of a desktop application on the web. This involves immediate response when a user clicks on a button, link, submits text, and interacts in other ways with the site. Customarily, we are all used to having the page reload essentially whenever the user interacts with a site. Ajax wishes to change this for good. Using JavaScript, Ajax applications dynamically change the website on the Client (which is key for speed and not reloading the page) in response to user input, without going back to the server.

JavaScript and Ajax

Given that Ajax applications attempt to reduce calls to the server to just data requests, much more of any Ajax system resides on the client, with JavaScript as the main language used to manipulate the web page, respond to user input, and communicate with the server. Despite the treatment of JavaScript as a trivial if not annoying aspect of web development and design in the past, Ajax has completely revitalized this language as a novel if not revolutionary way to develop applications for the web. Several key aspects of the JavaScript language provide the core functionality in any Ajax application: JavaScript’s manipulation of the web page DOM (Document Object Model, think XML), JavaScript’s XMLHttpRequest (how JS communicates with the server), and the existence of JavaScript on nearly every modern browser.

In order to truly understand how JavaScript is capable of manipulating the web page on-the-fly in response to user input, one must look at the layout of any web page as an XML document. The parent node is referred to as ‘document’, and is referred to by JavaScript as such, and every other part of the HTML document is a child node of the document node. To get a better idea of what I am talking about, take a look at Firefox’s DOM inspector (under the ‘tools’ menu). Using JavaScript’s ability to parse XML, one can edit, add, or delete elements from the web page on-the-fly. This becomes a crucial aspect of the Ajax application with respect to its goal of reducing page reloads, as the page can essentially redraw itself when necessary without receiving HTML from the server.

Within an Ajax application, communication with the server is typically limited to the exchange of data, usually in XML (or more recently JSON, JavaScript Object Notation). Using JavaScript’s remote scripting capabilities with the XMLHttpRequest, the application can communicate with the server asynchronously (the A in Ajax), allowing other parts of the application to function as normal while the application sends and receives data. This aspect of JavaScript is key to providing desktop-like functionality on the web, as user interaction with other parts of the site is not interrupted by the application’s communication with the server. Another important aspect of the XMLHttpRequest is that it can implement server-side scripts written in any server-side language, like PHP, ColdFusion, or VB.NET. This allows JavaScript to gain the functionality of server-side code right on the client.

Finally, probably the most important factor in JavaScript’s centrality to Ajax is the portability of a JavaScript program to nearly every modern browser, occasionally with some cross-browser fixes necessary to achieve full portability. With proposed changes to Internet Explorer in IE7, these cross-browser fixes will likely become less and less necessary.

Tools you’ll want (and need) to develop Ajax applications

Probably the most important tool that you’ll want to develop Ajax application is your favorite web developing software, whether it be something as complex as Macromedia Dreamweaver or as simple as Notepad. In order to test your JavaScript in your application, you’ll probably want something like Firefox’s JavaScript Console (in the ‘tools’ menu) to view any errors that the browser gives you. Additionally, any tool that shows you the webpage DOM is key in getting a visual reference of how JavaScript manipulates the page. Finally, a multitude of JavaScript libraries, specifically geared towards Ajax, are beginning to pop up all over the web. These libraries make it much easier to do both page manipulation and remote scripting. Simply do a search for ‘Ajax libraries’ or ‘JavaScript libraries’ to check out a few.

Some ideas for developing an Ajax application

Although Ajax’s presence on the web is still limited, one can already see how it is improving web functionality on several high-profile sites. Google has been the company that has seemingly invested the most time and money into this new technology. With Google Maps, Gmail, Google Suggest, and other Google products, Ajax is being utilized in full force by providing the user with instantaneous response from the application without annoying page reloads. Additionally, Yahoo and Amazon.com have begun to develop web portals using Ajax, which leads us to our first idea for an Ajax application: the web site portal. With JavaScript’s capacity to create windows, contextual menus, and movable elements, an Ajax application can mimic a desktop UI rather easily. As such, the Ajax web portal provides the user with a desktop-like interface to assemble information from a variety of sources (much like the same goal of the classic web portal).

Ajax can also be used to ease the portability of any desktop application to the web, such as online banking software, word processors, graphics programs, RSS aggregators, or industrial order processing software. With the ability to change the web page on the fly and communicate with the server asynchronously, the bounds are limitless when developing web applications using Ajax.

About the author:
Christopher Alexander is a lead developer at CE InterWeb Solutions and a Managing Partner at Consolidated Energies. He has been developing advanced web applications using a variety of frameworks since 2000.

AJAX framework for JAVA

Google Web Toolkit: Google Web Toolkit (GWT) 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. Writing dynamic web applications today is a tedious and error-prone process; you spend 90% of your time working around subtle incompatibilities between web browsers and platforms, and JavaScript’s lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile.

DWR is Easy Ajax for Java : DWR allows Javascript in a browser to interact with Java on a server and helps you manipulate web pages with the results.The stable release is DWR version 1.1.4.

Ajax JSP Tag Library: The AJAX Tag Library is a set of JSP tags that simplify the use of Asynchronous JavaScript and XML (AJAX) technology in JavaServer Pages.

This tag library fills that need by not forcing J2EE developers to write the necessary JavaScript to implement an AJAX-capable web form. The tag library provides support for live form updates for the following use cases: autocomplete based on character input to an input field, select box population based on selections made from another field, callout or balloon popups for highlighting content, refreshing form fields, and toggling images and form field states on/off.:

ZK–Enrich your web application: There have 75 XUL and 82 XHTML off-the-shelf components in ZK, such as grid, tabbox, tree, combobox, chart, splitter, slider, audio… Macro components - developing new components without programming Modal dialogs Drag and drop Context menus Browser history Customizable tooltips Script in EL expressions and your favorite scripting languages, include but not limited to Java, JavaScript, Ruby and Groovy. Annotations and data binding - accessing database in ZUML with zero Java codes Google Maps, FCKeditor, DOJO and Timeline Hot Updates …

AJAX framework for PHP

tppAJAX is a lightweight, yet feature-rich PHP and Ajax toolkit that is compatible with PHP versions 4 and 5.

Features

• Now Integrated with Scriptaculous!
• Works in the newest browsers from Microsoft and Mozilla and in Linux web browsers too!
• tppAJAX supports true form submissions - variables available in $_POST using PHP
• Includes robust Javascript interface to the xmlHttpRequest object
• Lightweight easy-to-use PHP code generates output for Ajax interactions
• Architecture encourages business logic to remain on the server not where hackers can see it.
• Multiple connections can be communicating at any one time with connection pooling!
• Actively being developed (I use it in my own projects!) - not some dead-end code

Sajax 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. Sajax makes it easy to call PHP, Perl or Python functions from your webpages via JavaScript without performing a browser refresh. The toolkit does 99% of the work for you so you have no excuse to not use it.

AjaxAC is an open-source framework written in PHP, used to develop/create/generate AJAX applications. The fundamental idea behind AJAX (Asynchronous JavaScript And XML) is to use the XMLHttpRequest object to change a web page state using background HTTP sub-requests without reloading the entire page. It is released under the terms of the Apache License v2.0

Features

The basic idea behind AjaxAC is that you create an AjaxAC application, which in itself contains a number of action handlers and event handlers. An application in this context might mean an entire web site powered by AJAX, or it could mean a subset of a form (such as the CountryRegionCityJax example, which could be a small part of a signup form, for example).

• All application code is self-contained in a single class (plus any additional JavaScript libraries)
• Calling PHP file / HTML page is very clean. All that is required is creating of the application class, then referencing the application JavaScript and attaching any required HTML elements to the application.
• Built in functionality for easily handling JavaScript events
• Built in functionality for creating subrequests and handling them
• Allows for custom configuration values, so certain elements can be set at run time
• No messy JavaScript code clogging up the calling HTML code - all events are dynamically attached
• Easy to integrate with templating engine due two above 2 reasons
• Easy to hook in to existing PHP classes or MySQL database for returning data from subrequests
• Extensible widget structure to be able to easily create further JavaScript objects (this needs a bit of work though)

AJAX framework for ASP.NET

Ajaxium 2.0 is designed as an ultimate AJAX engine for the entire ASP.NET pages including all standard,custom and most of third-party ASP.NET controls. In contrast to other AJAX-based approaches and huge AJAX frameworks, Ajaxium-powered sites remain accessible to all search engines and old browsers due to an automatic and silent degradation to the classic ASP.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.

With ASP.NET AJAX, you can:

• Create next-generation interfaces with reusable AJAX components.
• Enhance existing Web pages using powerful AJAX controls with support for all modern browsers.
• Continue using Visual Studio 2005 to take your ASP.NET 2.0 sites to the next level.
• Access remote services and data directly from the browser without writing a ton of complicated script.
• Enjoy the benefits of a free framework with technical support provided by Microsoft.

Who should read this book?

Ajax is at the crossroads of a number of disciplines; readers will approach it from a number of directions. On the one hand there are professional enterprise developers with computer science degrees and several years of hands-on experience with large software projects, who need to sometimes pop their heads above the battlements and work with the presentation tier. On the other hand are creative professionals who have moved from graphic design to web design and “new media,” and taught themselves how to program using scripting languages such as PHP, Visual Basic, or JavaScript/ActionScript. In between there are desktop app developers retraining for the Web and sysadmins called upon to put together web-based management tools, as well as many others.

All of these possible readers have a real interest in Ajax. We’ve tried to address the needs of all of them, at least to some extent, in this book. We provide pointers to the basic web technologies for the server-side developer used to treating the web browser as a dumb terminal. We also give a grounding in software design and organization for the new media developer who may be more used to ad hoc coding styles. Wherever you come from, Ajax is a cross-disciplinary technology and will lead you into some unfamiliar areas. We’re going to stretch you a bit, and ask you to pick up a few new skills along the way. We’ve done the same in our own use of Ajax, even while writing this book. We have found it to be a very rewarding and enjoyable experience, with benefits extending to other aspects of our professional lives.

Download Ajax JSP Tag Library

The latest version of AjaxTags is 1.2-beta2.You can download it from sourceforge

Install Ajax JSP Tag Library

Requirements

To use Ajax JSP Tag Library, you’ll need the following:

1. JDK 1.4+
2. Servlet container running Servlets 2.3+ and JSP 1.0+ (e.g. tomcat5.*, resin 3.*)
3. Copy of the Prototype framework. Currently, we depend upon version 1.4.0.
4. Copy of the Scriptaculous library. Currently, we depend upon version 1.5.1.
5. Copy of the OverLIBMWS library.

Installation and Set Up

Copy the ajaxtags-1.2.jar into your WEB-INF/lib directory.

Define TLD Reference

For JSP 1.x users, copy the ajaxtags.tld file to your WEB-INF directory and include a taglib reference in your web.xml file.

<taglib>
<uri>http://ajaxtags.org/tags/ajax</uri>
<location>/WEB-INF/ajaxtags.tld</location>
</taglib>

Create Server-side Handler

<?xml version="1.0" encoding="UTF-8"?>
<ajax-response>
<response>
<item>
<name>Record 1</name>
<value>1</value>
</item>
<item>
<name>Record 2</name>
<value>2</value>
</item>
<item>
<name>Record 3</name>
<value>3</value>
</item>
</response>
</ajax-response>

Declare TLD Reference on JSP

For each JSP in which you wish to use the AJAX tag, simply define it as with any other tag library.

<%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>

Include JavaScript Core

<script type="text/javascript" src="prototype-1.4.0.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="overlibmws.js"></script>
<script type="text/javascript" src="ajaxtags-1.2.js"></script>

Define CSS Styles

AJAX JSP Tag Library Autocomplete Demo

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>AJAX JSP Tag Library Autocomplete Demo</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/prototype-1.4.0.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/overlibmws.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/ajaxtags-1.2-beta2.js"></script>
<link rel="stylesheet" type="text/css" href="css/ajaxtags.css" />
<link rel="stylesheet" type="text/css" href="css/displaytag.css" />
</head>
<body>
<c:set var="contextPath" scope="request">${pageContext.request.contextPath}</c:set>
<div id="content">
<h1>Autocomplete Demo</h1>
<form action="." class="basicForm">
<fieldset>

<p>Available values start with letters: 'A', 'C', 'E', 'F', 'M', 'R', 'T'</p>

<label for="model">Name:</label>
<input id="model" name="model" type="text" size="30" />
<span id="indicator" style="display:none;"><img src="${contextPath}/img/indicator.gif" /></span>

<label for="make">Make:</label>
<input id="make" name="make" type="text" size="30" />
</fieldset>
</form>
<div id="errorMsg" style="display:none;border:1px solid #e00;background-color:#fee;padding:2px;margin-top:8px;width:300px;font:normal 12px Arial;color:#900"></div>

<ajax:autocomplete
source="model"
target="make"
baseUrl="${contextPath}/autocomplete.view"
className="autocomplete"
indicator="indicator"
minimumCharacters="1"
parser="new ResponseXmlToHtmlListParser()" />

</body>
</html>