; AJAX User Interfaces
Learning Center
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

AJAX User Interfaces


  • pg 1
									AJAX User Interfaces
      by Nate Rubin
                What is AJAX

•   Asynchronous Javascript and XML

•   Not one technology or programming language

•   Used to make streamlined dynamic websites
         How AJAX Works

•   User generates an event, causes Javascript

•   Javascript generates an XMLHttpRequest
    instance, and the instance makes a call to the

•   Server processes and returns XML document
    with requested data
•   XMLHttpRequest preforms callback function

•   XHTML and CSS is sent back to the user
               Why use AJAX?

•   Replaces older, clumsier technologies (Flash, Java
    applets, DHTML)

•   Allows site to preform tasks much faster

•   Lets commonly used programs to be coded for web
    versions (Google Docs, Meebo, Grooveshark)
    Skills Needed for AJAX

•   Knowledge of simple XHTML and CSS

•   Proficiency in Javascript

•   Database administration and SQL skills

•   How to use the DOM and XMLHttpRequest
    feature of Javascript to tie it all together

•   Scripting skills
Well Known Uses of AJAX
  •   Google Search autocomplete
•   Meebo Instant Messaging client
•   Lightbox picture pop ups
•   Voting on Reddit
            Drawbacks of AJAX

•   Does not play nicely with browser history

•   Requires Javascript to be enabled

•   Screen reader capability can be spotty

•   Web crawlers have a hard time accessing information
Guide to a Good AJAX
  Keep traffic between
  client and server to a
•Make the smallest amount of calls to the
server as possible
•Your website should feel almost as
responsive as a desktop application if the
user is browsing on a decent connection
      Make sure to borrow
     conventions from both
    HTML and desktop apps

•   The user shouldn’t have to relearn any
    computing skills

•   Conventions should be used in all design when
 Keep away from obnoxious
animations/unnecessary use
         of AJAX

•   Make sure that you are using AJAX purely for

•   Don’t use AJAX for the sake of being flashy
      Use AJAX whenever possible

•   If you’re comfortable with it, AJAX should be used
    whenever you would normally call a reload of the page

•   It is much sleeker and makes your website far more
    functional and fun
              Use CSS heavily

•   It’s important to have a minimum amount to download
    to make your website responsive

•   Separating the graphics into the CSS side helps
     Have indicators to remind
       users that the site is
•   Time stamps to mark when things are posted

•   Messages to indicate that something is being
    posted or loaded

•   Communicate change

•   Animations can slow down change so a user
    notices it
        Common Implementations

•   Drag and drop

•   Popup data input

•   Popup information

•   Drilldown/dropdown menus

•   Auto complete
                    Code Conventions

•   There are also plenty of conventions that
    should be used in your code

•   Guide to Javascript conventions:
•   www.asp.net%2Fajaxlibrary%2FGetFile.aspx%3FPage%3Dact_contribute_codingStandards%26File%3DAjaxControlToolkitCod

•   Great guides are available for learning the
    basics online

•   APIs can be useful if you do not have time to
    learn AJAX in depth

•   AJAX can be used to create a fluid, dynamic site

•   Creates site that can be interactive and universally

•   Follow guidelines to steer your development in the right

•   AJAX Patterns: Design Patterns for AJAX Usability by Michael Mahemoff
    (http://softwareas.com/ajax-patterns as of November 1, 2011).

•   AJAX Interface Design by Luke Wroblewski
    (http://www.lukew.com/resources/articles/ajax_design.asp as of November 1, 2011).

•   Ajax (Asynchronous JavaScript and XML) by Meryl Evans
    (http://www.peachpit.com/guides/content.aspx?g=webdesign&seqNum=212 as of
    November 1, 2011).

To top