The Ajax technology

In a broader sense, Ajax represents a cluster of technologies that were so designed as to create a developer comprehensive and user-end facile language. At both ends, developer and remote user, Ajax creates and delivers rich web applications on a desktop application basis, providing lower bandwidth usage and speeding up loading page time by retrieving data from servers in the background of the page asynchronously.

The above definition was a simple yet debated fact at the time when Jesse James Garret first wrote about Ajax and its implications. In 2005, the programming techniques that Ajax implied were far from anything new or out of the ordinary. But put together, they envisioned a programming language that would reduce development time and efforts for building a web page to half and would extent user experience to richer web page imagery and faster viewing time. In simpler words, the Ajax technology would make possible the update of a web page or a section of a web application with input from the server, but without page refreshing. Server-side technologies are still needed but reduced in importance, because the web page data is still subject to some updating by accessing the server but at a different level.
Technology layers

The name “Ajax” is an acronym for Asynchronous JavaScript and XML, the basic technologies that the Ajax engine incorporates. More detailed, Ajax implies:

    1. Standards-based presentation using XHTML and CSS
    2. Dynamic display and interaction using Document Object Model
  1. Data interchange and manipulation using XML and XSLT
  2. Asynchronous data retrieval using XMLHttpRequest
  3. JavaScript that binds everything together.

Actually, to build an application using Ajax technology only three of these techniques are required: XHTML, the DOM and JavaScript. But, if any amount of development with Ajax techniques is involved then all of these techniques will at some point be required altogether. Alongside there is also required a server-side language to handle the actual interaction with the server and the most typically used are:

  • PHP
  • ASP.NET
  • Java

In the following sections of the article, we shall discuss the basic elements, requirements and possibilities of each technique component in Ajax. As a more personal guide, we have also created an exemplified article on how to choose the most suitable Web programming language for websites with specific purposes.

Standards-based presentation using XHTML and CSS

Let’s take a deeper approach to what both XHTML and CSS imply. Most persons from the IT world are familiar with the HyperText Markup Language, or HTML, which is basically the most common “spoken” language of the web. eXtensible HyperText Markup Language, XHTML, is the successor of plain HTML, and is in fact the HTML standard specified as an XML document and since 2000 is a World Wide Web Consortium recommendation. What differs is that where HMTL was somewhat facile and the browser made a reasonable attempt to display anything that was placed within tags, XHTML runs within an XML framework, meaning that if XML documents must be well formed so must the XHTML pages be. This is especially required in order to properly use the Document Object Model to gain access to different parts of the web page.

If HTML is an application of Standard Generalized Markup Language, or the SGML which is a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML. Due to their need of well-formating, true XHTML documents permit automated processing to be executed using standard XML tools, unlike HTML which requires a more complex, lenient and overall custom parser.

The XHTML family was revised in August 2002, according to W3C, as being ” the next step in the evolution of the Internet. By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content’s backward and future compatibility.”

Cascading Style Sheets, or the CSS, are the templates behind HTML pages that describe the presentation and layout of the text and data contained within the actual HTML page. The importance of the CSS comes from the developer who makes changes to the style sheet that are instantly depicted in the display of the page. CSS properties are also accessible via the Document Object Model which we will discuss further on in this article.

CSSs may be subject to local use by viewers of web pages in order to define colors, fonts, layout and other elements of a document presentation. Its primary purpose is to enable the separation of document content which is written in XHTML, from document presentation. By separating the two components, content accessibility is improved, more flexibility and control in the specification of presentation characteristics are provided, and complexity and repetition in the structural content are reduced. CSS also enables the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice, on Braille-based or tactile devices. This is done by specifying a priority scheme to determine which style rules apply if more than one rule matches against a particular element. This is the so called cascade, where priorities or weights are calculated and assigned to rules, so that these rules would be predictable.

Although having a style sheet is not completely necessary, in order to maintain a proper organization style sheets are definitely an indispensable aid. Among other advantages of using style sheets is that by combining CSS with the functionality of a Content Management System, a considerable amount of flexibility can be programmed into content submission forms. This feature enables an editor or any person not familiar with CSS or HTML code editing to select the layout of a article or entire page in the same form. The information the editor inputs into the Content Management System is logically evaluated by the program and, based on a certain number of combinations, the program determines in which way to apply classes and Ids to the XHTML elements, styling them and positioning them as the pre-defined CSS dictated. This is really beneficial when working with large-scale, complex sites that have many contributors like news and informational sites, where this advantage influences to a great extent the feasibility and maintenance of the website.

Dynamic display and interaction using Document Object Model

Once the data is styled and displayed it has to be modified dynamically. This is done through the Document Object Model by providing dynamics to a static HTML page, where DOM manipulation is used to modify the properties of already created page elements. The magic ingredient here is JavaScript that allows, e.g. For a div element to become visible or a button to fade out while a certain selection is made.

Basically, the DOM is a hierarchical or tree-based representation of a Web page , in which every part of the page, like the graphics, the text boxes, the buttons or the text itself, is modeled by the browser. Prior to IE 4 or Netscape Navigator 4, altering web page text was done through server-side technologies if at all. The entire page was labeled as a document, which contained all the HTML tags and text that represented the page. Like CSS and XHTML, the DOM is also a standard by the World Wide Web Consortium rules, therefore being a standard way for all browsers to represent page content. Items an be added to the DOM library or be altered by using a scripting language, like JavaScript or VBScript, which makes them appear immediately on the web page.

Each DOM technique is related to the client side, meaning that the browser can update the page or sections of the page instantly, a capability on which Ajax relies to a great extent in order to provide the rich user experience. Although the techniques exist since version 4 of IE, they have been underestimated, largely due to the limitations node capacity that could be manipulated with JavaScript. Nodes are new sections that can be added to the document in order to assemble the web page. Nodes can be elements, attributes or plain text.

DOM can be usually represented as a tree, the trunk being the document and the branches representing different elements on the web page. In this case, every part of the tree would be a node, which can also be tags , like HTML or XML, or attributes of tags. As for structure, a node can be a part of another larger node, which would be the “parent” of that node. Logically, a node can also be a parent to any number of image nodes, its “children”, and these in turn are parents to their attribute child nodes. The Document Object Model is then just like the tree which is parent to the branch which is parent for its leafs.

DOM scripting methods have several developing advantages such as the simple creation of elements, which does not require anymore document writing to insert HTML and CSS into the page, or object constructors. DOM simply allows the creation of entire elements with no prerequisites. The insertion of new text, the change and removal of text from any element are possible without resorting to inner HTML or document write. Also, with DOM techniques one can grab all the tags of the document, or grab the text, leaving the tags behind, or even move entire parts of the document, or just parts and fragments and work with just those.

One of the best advantages of DOM scripting techniques is that all of them are suitable for any DOM compliant browser, which means that there is no need for creating different web page versions for each browser, when DOM offers just one common set of scripting techniques. Provided now with full DOM support applications like Netscape 6 and Mozilla , almost every element or node is now accessible.

Data interchange and manipulation using XML and XSLT

Extensible Markup Language or XML is an extensible language because developers that use it can define their own elements through it. Its general purpose specification is to create custom markup languages and it facilitates the share of structured data through different information systems, like via Internet, being subject to use for both encoding of documents and serialization of data. Application languages can be implemented in XML, by adding semantic constraints, and such languages start at XHTML, RSS, MathML, Scalable Vector Graphics and continue to thousands more.

Along with XML comes an entire range of supporting technologies that have individual purposes. These technologies have emerged mostly because an XML document does not contain information on how it should be displayed or searched, so once the data is rendered as an XML document, developers usually need other supporting technologies to search and display information from it. Browsers like Internet Explorer and Firefox contain XML and XSLT engines, and can parse XML documents.

In 1998 XML was defined early as a markup language in order to represent structured content independent of its presentation, due to previous experiences with SGML in the print publishing environment. The tags used within XML are entirely user defined, being intended to relate to objects in specific domains of interests, like persons, places, prices or dates. If in HTML the elements are basically typographic, although just at an abstract level, XML aims at describing real-world object through elements.

As XML, XSLT is also a standard supported by the World Wide Web Consortium. As stated above, although IE and Firefox have XSLT processors, XSLT documents are not always subject to the same treatment. This is because XSLT uses another type of language, the Xpath, in order to query the XML document when applying it transformations. Xpath queries can be used to locate specific items or groups of items within an XML document, by using a syntax that appears similar to the way browsers locate web pages.

The advantage of these methods is that they can be used to retrieve sections of data for display on the web page, thus offering instant updates in the browser without the need to access the server. XSLT was designed to separate information content from presentation on the web and as the web filled with commercial content, publishers grasped for the same control over quality of output as in printed medium. The use of concrete presentation controls like explicit fonts and absolute positioning of material on the web page kept increasing, but directly proportional with this trend so has the difficulty of delivering the same content to alternative devices such as digital TV sets and WAP phones, which would otherwise would be called “repurposing” in the jargon of publishing trade.

The common known benefit stated for the above high-level languages is development productivity. In reality, the true value comes from their potential to adjustments. An XSLT application that transforms XML data structures can be designed to be much more resilient to changes in the details of the XML documents than a procedural application coded that uses the low-level DOM and SAX interfaces. In database jargon this capability is known as “data independence” , and it was this trait that acted as the golden fleece for development argonauts that successfully created declarative languages like SQL, putting aside older navigational data access languages.

It is also known that, as with all declarative languages, there is a slight performance penalty. But nevertheless, for the wider majority of applications, the performance of present days XSLT processors is already good enough to meet application requirements, and it’s getting better and better.

Asynchronous data retrieval using XMLHttpRequest

The XMLHttpRequest Object had a rather peculiar beginning. At first, Microsoft introduced an obscure little ActiveX control in Internet Explorer version 5 (IE 5) called the XMLHttp Object. Obvious, ActiveX controls are tied to IE, and shortly afterwards, Mozilla developers followed the act and came up with their own version for Mozilla 1 and Netscape 7, with the corresponding XMLHttpRequest Object. Versions of this object have been included in Safari 1.2 and Opera as well.

The XMLHttpRequest Object enables a developer to submit and receive XML documents in the background, while previously to this, they could only use hidden frames or IFrames to perform this task instead. The XMLHttpRequest object is much more complex in the way it allows developers to send and pick up data. As of April 2008, the World Wide Web Consortium standard for this object was still in progress. Because it’s not standardized yet, there are still two separate ways of creating it. Web pages that use XMLHttpRequest or XMLHTTP can deal between the minor differences in implementation either by including the XMLHttpRequest object in a JavaScript wrapper, or by using an existing framework that does so. In either case, the wrapper used should detect the abilities of current implementation and work within its requirements.

The main problem solved with the use of JavaScript and XMLHttpRequest object relates to the quality and speed of the connection between a web page and its server. One of the setbacks of building a web application interface is that once a page has been downloaded to a client, the connection to the server is diminished, because attempts of dynamic interfaces involve a complete round trip of the entire page back to the server for rebuilding. This process drags the time and speed of the application, making it appear slow and unresponsive.

The traditional interface model for a web application consists of a few actions: the user requests a page from a server, which is build and delivered to the browser. The page includes a HTML form element for gathering data from the user that, once the user posts their input back to the server, enables the next page be build and served based on the input, and so on. The process revolves around the nature of the HTTP and differs from the former desktop application model of an interface which is inherently connected to the application layer. Lets look at an exemplified situation: entering a user name and a password for accessing a desktop application on a platform like Microsoft Windows. By convention, once typed in the boxes the correct user name and password, a green “tick” icon appears indicating that the user has introduced the correct user name and password. This takes place instantly as a result of the interface being developed within the application, right after the user types in the data, the application is able to check the validity and answer back. As opposed to this we have the standard behavior of the same task performed through a web interface. The user interface may look the same, with the same controllers and data forms, but on introducing data, the user needs to submit the page back to the server in order for the input to be validated. A new page would then be loaded with a message indicating whether the information was correct or not, and if not, then the user needs to go back to the previous page and re-input the information all over again.

By using JavaScript, a reasonable amount of economy can be added to a HTML page in order to give timely feedback to user interactions. There are though some issues that come with this advantage. The first is that, as the JavaScript is being delivered to the browser along with the page, the input data is opened up to checking. And this is alright for checking formats of email addresses but when it comes to passwords and user names, the exposure that the method leaves open would compromise the integrity of the input mechanism. The second issue deals with any serious logic within the page, where the interface level can not be the place were the logic resides. The logic, or processing the input, resides in the application level, founded back in the server.

The solution to these problems is represented by the XMLHttpRequest object, which is available as a native object within both Mozilla and Apple’s Safari browsers. The object enables JavaScript to make HTTP requests to a remote server without the need to reload the page. Basically, HTTP requests can be made and responses received, entirely in the background and without the user experiencing any sensible interruption.

While this is a huge step forward, by providing the developer the means to achieve the goals of both a responsive user interface and preserving all the important inputs in the application level, the use of JavaScript for switching input between server and client in real time provides a performance of inputs on the server that has responses returned to the client in near-instant feedback.

JavaScript that binds everything together

JavaScript is the most preferred scripting language for most Web developers. Although Ajax techniques are not the sole preserve of JavaScript, VBScript, a scripting language that also offers the same capabilities for dynamic updates as well, it does so only in an Internet Explorer framework. JavaScript has a standard specified in the EMCAScript standard, but was initially created in Netscape Navigator before such standards existed. Microsoft has created in parallel its own version of JavaScript, called JScript, and as a result, each browser’s version of JavaScript incorporation differs from another. Although JavaScript is still a very competent method for updating web pages, some amount of dual-coding is necessary in order to secure that web pages and applications function in the correct way across all browsers. This implies some error-handling code as well.

JavaScript is a dynamic, prototype based language with first class functions and it was influenced by several languages. It was designed to resemble Java, but also be easier for non-programmers to work with. While it is best known for its use in websites, as client-side JavaScript, it is also used to enable scripting access to objects embedded in other applications.

Despite the name, JavaScript is basically unrelated to the Java programming language, although they both have the common C syntax, while JavaScript copies many Java names and naming conventions. Originally named “LiveScript”, it was renamed in a co-marketing deal between Netscape and Sun Microsystems, in exchange for Netscape to include Sun’s Java runtime in their predominant browser. They key design elements within JavaScript are followers of th Self and Scheme programming languages.

At present, JavaScript is a trademark of Sun Microsystems, being used under license for technology invented and implemented by Netscape Communications and other entities like Mozilla Foundation. But originally, JavaScript was developed by Brendan Eich from Netscape under the code name “Mocha”, later renamed LiveScript, and afterwards JavaScript. By the time they changed the name from LiveScript to JavaScript, Netscape added support For Java technology in its Netscape Navigator web browser. In December 1995, JavaScript was first introduced and deployed in the Netscape browser version 2.0B3, causing confusion with the naming by giving the impression that the language was actually a spin-off of Java. Many have characterized it as a business strategy from Netscape to give JavaScript some of the hype of what was then the trendiest new web-programming language.

In order to avoid trademark issues, Microsoft named its dialect of the language JScript, which was first supported in Internet Explorer version 3.0. it was released in August, 1996 and it included Y2K-compliant data functions, not like those based on java.util.Date in JavaScript at the time. Because the dialects are perceived to be so similar, the terms “JavaScript” and “JScript” are often used interchangeably. Netscape submitted JavaScript to ECMA international for standardization, which resulted in the standardized version called ECMAScript.

The primary purpose of JavaScript is to write functions that are embedded in or included from HTML pages and interact with the Document Object Model, or DOM, of the page. JavaScript usage can translate into things like: opening or popping up a new window with programmatic control over the size, position and attributes of the new window, like controlling the visibility of menus or toolbars; validation of web form input values in order to secure their acceptance before they are submitted to the server, and changing images as the mouse cursor scrolls over them, an effect which is used in order to draw attention over important links displayed as graphical elements.

The main advantage of JavaScript is that its code can run locally in a user’s browser, rather than on a remote server. Because of this, it can respond to user actions in real time, making an application feel more responsive. Moreover, JavaScript code can detect user actions which HTML could not do by itself, such as individual keystrokes. A good example of this is Gmail, that has taken advantage of this, with a lot of the user-interface logic being written in JavaScript. JavaScript dispatches requests for information, like the content of an e-mail message, to the server, which makes the service mail move really fast and secure. The wider trend of Ajax programming similarly exploits this strength and delivers competent and reliable solutions to web applications.

Scroll to Top