Archives

Web Page Width and Fixed vs. Fluid Designs (current)

What is XML, Why and How Is It Used? (June 11, 2008)

Web Careers: Job Titles and Skills (January 15, 2008)

What is XHTML? (December 15, 2007)

AJAX and Spry (September 18, 2007)

HTML 5 and XHTML 2.0? (July 20, 2007)

HTML Reference - Learn HTML Tags (April 6, 2007)

Amazing Internet/Web Advancements (March 26, 2007)

Web Design and Development Process (March 24, 2007)

Firefox, FoxIt, TerraGen, and Expression Web (March 5, 2007)


Web Tips and News

AJAX and SPRY   Posted: September 18, 2007

AJAX, which stands for Asynchronous JavaScript and XML, is a web development technique used to create dynamic and interactive web pages that, unlike previous methods, does not require the web page to be refreshed or reloaded. The goal of AJAX, therefore, is to improve a web page's ineractviity, functionality, usability, efficiency, and speed.

AJAX is not a single language or technology, but a group of technologies, many of which have existed for some time. It is a combination of XHTML, CSS, XML, JavaScript. These components have the following purposes:

  • XHTML, or eXtensible HyperText Markup Language, or HTML, is used to markup, or create the structure and display the final output on the web page.
  • CSS, or Cascading Style Sheets, is to format the final output on the web page. Both X/HTML aned CSS are presenting the information on the web page.

  • JavaScript and its XMLHttpRequest object is used to exchange data asynchronously with the Web server (therefore not requiring a web page to be re-loaded).
  • XML, or eXtenisble Markup Language, is used to store the data on the server for the AJAX application. For example, the data might be the contents of a large table containing an inventory list. JSON, or JavaScript Object Notation, is an alternative to XML that can be used as well. XSLT, which is related to XML, can also used in AJAX.

It is noteworthy to mention that JSON, or JavaScript Object Notation, can be used instead of XML, JScript instead of JavaScript, and Microsoft's ActiveXObject instead of the XMLHttpRequest. AJAX applcations are made even more powerful when they are combined with server-side languages such as PHP.

Among the most famous examples of AJAX in use is Google Maps, which was the first online mapping site that did not require the visitor click North, South, East or West to reload the web and display a new location on the map. The visitor can simply drag the map left, right, up or down to dynamically reload content in that area of the web page. Google GMail and Yahoo Flickr also use AJAX.

Other examples of hwo AJAX might be used to improve web site usability with dynamic content include:

  • While creating a new e-mail account, as the user types a password into text box, AJAX display a small piece of text next to the textbox if the user pauses and the password does not meet the site's minimum password length. The text warning message goes away as soon as the minimum password length is meet. The user can then click the submit button to create the new account.
  • Google Suggest is another example of AJAX. When you begin to type the first few characters of a search keyword into a textbox, Google provides hints of the word or phrase you may be trying to type in that you could choose to save you time by not having to type in the rest of the word/phrase. Another version of this has been created that dynamically changes Amazon search results on a character-by-character basis as you type characters into a search textbox.
  • BBC News has an AJAX application that dynmically changes the news story in the same area of the web page when the users select the story headline from a pull-down list.
  • AJAX can be used to bring up an enlarged version of an image in an image gallery on a web page when the image is clicked. A close button will accompany the image, which when clicked, will close the enlarged image and return the user to the web web page which was still in the background, i.e. the enlarged image was simply overlayed on the web page.
  • AJAX can be used to re-order (re-sort) the contents of a large table of data on a web page by a criteria of filter critera, i.e. date, alpabetic, numeric, etc.
  • AJAX can be used to create a full browser window PowerPoint-like presentation. A new slide (content on a web page) is presented when the user click anywhere on the web page. An example is here.

Spry, or the Spry framework for Ajax, is a JavaScript library develped by Adobe that makes it easier for web developers to build sophisticated, interactive, dynamic web pages.

The Spry framework is a way to use the data capabilities that enable designers to incorporate XML, JSON or HTML data into their documents using HTML, CSS, and a minimal amount of JavaScript, without the need for refreshing the entire page. The Spry framework is HTML-centric, and easy to implement for users with basic knowledge of HTML, CSS and JavaScript. The framework was designed such that the markup is simple and the JavaScript is minimal. The Spry framework can be used by anyone who is authoring for the web in their tool of choice.


Good Resources

Traversing an HTML table with JavaScript and DOM Interfaces
http://developer.mozilla.org/en/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

AJAX Matters: AJAX News
http://ajaxmatters.com/

W3Schools AJAX Tutorial
http://www.w3schools.com/ajax/default.asp

Internet.com AJAX Tutorial
http://javascript.internet.com/ajaxTutorials/

IBM Get dynamic Web content with HTTPRequest
http://www.ibm.com/developerworks/web/library/wa-httpget/

Simple AJAX Example
http://daniel.lorch.cc/docs/ajax_simple/

Top 70 Ajax Demos Examples Code Samples
http://webdeveloper.econsultant.com/ajax-demos-examples-code-samples/

713 + Ajax/Javascript/Dhtml examples and demos to download
http://ajaxrain.com/