|
There are a few AJAX demos and examples on the
web right now. While these are invaluable to learning AJAX, some people
need a bit more information than just a raw piece of code. In todays
environment there are many ways to learn AJAX including, books,
classes, conferences, workshops and tutorials. Of these the only one
that is free and accessible to everyone are web-based tutorials. The
following is a list of what I consider the be the best and most helpful
AJAX tutorials that I've found over the past year.
The Ajax alternate
Techniques The first alternate Ajax technique is dynamic script loading. The
concept is simple: create a new <script/> element and assign a
JavaScript file to its src attribute to load JavaScript that isn't
initially written into the page. The beginnings of this technique could
be seen way back when Internet Explorer 4.0 and Netscape Navigator 4.0
ruled the web browser market. At that time, developers learned that
they could use the document.write() method to write out a
<script/> tag. The caveat was that this had to be done before the
page was completely loaded. With the advent of the DOM, the concept
could be taken to a completely new level.
Ajax and XMLHttp Request from webPasties The XMLHttpRequest object is a handy dandy JavaScript object that offers a convenient way for webpages to get information from servers
without refreshing themselves.
The benefit to end users is that they don't have to type as much and
they don't have to wait as long. For example, having the user's city
and state show up in a webpage automatically after the ZIP code has
been typed in is a big time saver.
Although the XMLHttpRequest object might sound complex and different
from any other JavaScript object you have ever used, it really isn't. A
good way to think of the XMLHttpRequest object is as you would think of
the JavaScript Image object. As we know, with the Image object you can
dynamically specify a new URL for the image source without reloading
the page. Similarly with the XMLHttpRequest object, you can dynamically
specify a URL to get some server data without reloading the page.
The Ajax Make request with asynchronous
JavaScript
Most Web applications use a request/response
model that gets an entire HTML page from the server. The result is a
back-and-forth that usually involves clicking a button, waiting for the
server, clicking another button, and then waiting some more. With Ajax
and the XMLHttpRequest object, you can use a request/response model
that never leaves users waiting for a server to respond. In this
article, Brett McLaughlin shows you how to create XMLHttpRequest
instances in a cross-browser way, construct and send requests, and
respond to the server.
First, take this last bit of overview before you dive into code -- make
sure you're crystal clear on this idea of the Web 2.0. When you hear
the term Web 2.0, you should first ask, "What's Web 1.0?" Although
you'll rarely hear Web 1.0, it is meant to refer to the traditional Web
where you have a very distinct request and response model. For example,
go to Amazon.com and click a button or enter a search term. A request
is made to a server and then a response comes back to your browser.
The
Advanced requests and responses in Ajax In the last article in this series, I provided a solid introduction
to the XMLHttpRequest object, the centerpiece of an Ajax application
that handles requests to a server-side application or script, and also
deals with return data from that server-side component. Every Ajax
application uses the XMLHttpRequest object, so you'll want to be
intimately familiar with it to make your Ajax applications perform and
perform well.
In this article, I move beyond the basics in the last article and
concentrate on more detail about three key parts of this request object:
* The HTTP ready state
* The HTTP status code
* The types of requests that you can make
Ajax Example Drag and Drop 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. With sorting vertically oriented items under our
belt, onto the next challenge: sorting floated, wrapped list items.
Earlier versions of my code had separate scripts for vertical,
horizontal, and wrapped lists. Now they are unified into one script
that does it
all.
Ajax Building a Drag and Drop
shopping cart The rise of AJAX over the past several months has taken over the
development world and breathed new life into the Web. Although these
techniques have been possible for many years now, the maturity of Web
standards like XHTML and CSS now make it a viable alternative that will
be viewable by all but the oldest browsers.
It's also been possible to accomplish many of the same things using
Flex or Flash, but the development cycle with those applications is
typically more involved and the overhead often not justified.
We're going to harness the power of the Scipt.aculo.us JavaScript
library to provide our interaction. As their Web site states, this
library "provides you with easy-to-use, compatible and, ultimately,
totally cool JavaScript libraries to make your web sites and web
applications fly, Web 2.0 style." We're also going to utilize the
<CF_SRS> library to handle the actual AJAX data piping to our
application. Both of these libraries are free for all to use, and
they're easier to integrate than you would think.
The Better a Ajax and
JavaServer Faces Browser-based file uploads, in particular those involving the HTML
<input type="file"> tag, have always been rather lacking. As I am
sure most of you are aware, uploading files exceeding 10MB often causes
a very poor user experience. Once a user submits the file, the browser
will appear to be inactive while it attempts to upload the file to the
server. While this happening in the background, many impatient users
would start to assume that the server is "hanging" and would try to
submit the file again. This of course, only helps to make matters
worse.
In an attempt to make uploading of files more user-friendly, many sites
display an
indeterminate progress animation once the user submits the file.
Although this technique may be useful in keeping the user distracted
while the upload being submitted to the server, it offers very little
information on the status of the file upload. Another attempt at
solving the problem is to implement an applet that uploads the file to
the server through FTP. The drawback with this solution is that it
limits your audience to those that have a Java-enabled browser.
Ajax Using the PHP and Sajax The goal of creating a truly responsive Web application was hampered by one simple fact of Web development:
To change the information on part of a page, a user must reload the
entire page. Not anymore. Thanks to asynchronous JavaScript and XML
(Ajax), we can now request new content from the server and change just
part of a page. 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.
This tutorial is for those interested in developing rich Web
applications that dynamically update content using asynchronous
JavaScript and XML (Ajax) with PHP, without having to refresh entire
Web pages with each user click. You will learn about Ajax, as well as
issues surrounding its usage. You will also build an Ajax application
in PHP that will display parts of a previously written tutorial. Then
you will integrate the Simple Ajax Toolkit (Sajax) into your Ajax
application, which will synchronize the use of Ajax, simplifying
development.
The Ajax getting Started Ajax stands for Asynchronous JavaScript and XML. In a nutshell, it
is the use of the nonstandard XMLHttpRequest() object to communicate
with server-side scripts. It can send as well as receive information in
a variety of formats, including XML, HTML, and even text files. Ajax’s
most appealing characteristic, however, is its “asynchronous” nature,
which means it can do all of this without having to refresh the
page. In order to make an HTTP request to the server using JavaScript,
you need an instance of a class that provides you this functionality.
Such a class was originally introduced in Internet Explorer as an
ActiveX object, called XMLHTTP. Then Mozilla, Safari and other browsers
followed, implementing an XMLHttpRequest class that supports the
methods and properties of Microsoft's original ActiveX object.
The Ajax Developer for prototype In case you haven't already used it, prototype.js is a JavaScript
library written by Sam Stephenson. This amazingly well thought and well
written piece of standards-compliant code takes a lot of the burden
associated with creating rich, highly interactive web pages that
characterize the Web 2.0 off your back.
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.
I'm also offering an un-official reference for the objects, classes,
functions, and extensions provided by this library.
As you read the examples and the reference, developers familiar with
the Ruby programming language will notice an intentional similarity
between Ruby's built-in classes and many of the extensions implemented
by this library.
Ajax
creating autosuggest with JavaScript
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. If you
haven't tried it yet, check it out before reading on.
The idea behind Google Suggest is something that has been used in
desktop applications for some time and has only recently made it onto
the Web. Google Suggest wasn't the first implementation of such an
interface
but it popularized the technique among developers to the point where
people have dissected the source code and attempted to recreate the
functionality.
In building the autosuggest textbox, you will JavaScript in a true
object-oriented fashion. The main implementation consists of two types
of objects: one to represent the autosuggest control and one that
provides the suggestions. The autosuggest control does the heavy
lifting in the code by handling all of the user interaction with the
textbox.
Ajax How to
Create the suggest with ASP. NET 2.0 It all started when Netscape released Navigator 2.0 in 1996. This
browser boosted two revolutionary new features; frames and JavaScript.
Although Netscape had different intensions for these features,
developers could exploit frames and JavaScript to set up an out-of-band
communications channel between the browser and the web server.
This made it possible to update forms data without posting back. The
concept behind the communications channel was simple. You created a
frameset made up of two frames. One of the frames had the height or
width attribute set to zero, in practice making the frame “invisible”.
The other frame contained the user interface. When the user clicked a
button she triggered a JavaScript function which replaced the location
property of the hidden frame with the URL for a CGI script that handled
the request. The various parameters were passed thru the query string.
The Ajax is very Dynamic interface 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.
Take the simple example of filling out a serial number box to register
a desktop app on a platform like Microsoft Windows. According to
convention, once you've finished typing that tiresome string of
alphanumeric into the little boxes, a big green 'tick' icon appears to
indicate you've entered a valid code. This happens instantly as a
result of the interface being sewn to the application; as soon as you
finish typing the number, the application is able to check its validity
and respond.
The Ajax
make Website in less then 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.
Angus Turnbull of Twinhelix has written an interesting piece of code
named, “HTMLHttpRequest v1.0beta2” and it’s the perfect start to
building your own rich client-side web applications that send and
retrieve data to/from a server.
I have done several examples and tutorials on this subject, but this is
one of the most complete I’ve seen to date.
This implements both XMLHttpRequest and a custom-written
hidden-IFRAME-based transport layer. Therefore, it works in a wider
range of browsers, including Opera 7 and IE5/Mac.
Ajax Design Patterns By now the entire World has heard about AJAX, even those who don’t
care about Web-Development have seen the potential of this new technology.
Everybody is tired of endless introductions on how cool AJAX is and
those endless lists of good examples like Google Suggest, GMail and
alike, so I decided to cut a long story short and jump right into the
real tutorial.
Well yes and no, it is different in being a tutorial on how to design
and build a complete site and not just some fancy little details like
how to turn caching in AJAX off or how to create a fancy widget. To
keep the tutorial readable, and to avoid having to implement low level
functionality, I’m using the dojo toolkit, I tried prototype too and
really enjoyed working with being a really nice and easy to use
Library, but dojo provides much more functionality bundled with it. For
both frameworks one thing is true: documentation is scarse, and I spent
alot time debugging and reading posts on the newsgroups.
|