background preloader

AJAX

Facebook Twitter

Icons

Swanson Web Media - Ajax Loading GIFS. HTTPRequest object at XML.com. February 09, 2005 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.

I'm sure you're familiar with the traditional interface model for a web application. The user requests a page from the server, which is built and delivered to the browser. This page includes an HTML form element for capturing data from the user. Once the user posts their input back to the server, the next page can be built and served based on the input, and so the process continues. Contrast this to the standard behavior of the same task represented through a web interface.

Enter JavaScript The Basics. Usable XMLHttpRequest. Two weeks ago I highlighted the most important usability issues with XMLHttpRequest. This week we are going a step closer to see how you can mix the two - including a practical example, just for the fun of it. Normal forms are usable by default You can clearly see where the input fields are, so you know what you can edit, and what you cannot. It is forgiving.

You can explore all you want because nothing is changed until you submit the data.It lets you decide when to "save".It confirms any action taken, since you are redirected to a different page upon completion. XMLHttpRequest forms may not be usable One of the great benefits of XMLHttpRequest is that you can use it to make complex WYSIWYG. This is great! Example: XMLHttpRequest Business Card Creator Let's look at what we can do to turn an otherwise user-hostile XMLHttpRequest application - into a usable one... Link: XMLHttpRequest Business Card Creator &#187 Tested in IE6 and Firefox.

What can I edit? This one is hard. Kept it simple.