Ajax Fundamentals – Part 4

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5

5. Development and Debugging Tools

5.1. Documenting JavaScript

JSDoc is an open source tool used to add inline documentation to JavaScript source files.   JSDoc is based on the javadoc tool.   Many of the javadoc characteristics have been included in JSDoc.   An example of using JSDoc can be found here.

5.2. Firefox Tools & Extensions

DOM Inspector is included in the Mozilla Suite and Firefox browser.   This tool provides a graphical user interface that enables a user to brows the document object model of any site.   One can view, update and insert DOM attributes dynamically.   In order to assist JavaScript developers, DOM Inspector can be switched to JavaScript Object mode.   This shows all the properties and methods available to a JavaScript for a particular mode.   DOM Inspector provides a JavaScript evaluation window that allows the user to execute JavaScript against selected nodes.   There is the option to use CSS Style Rules and Computed Style information.   This allows a user to examine the CSS attributes associated with different page elements.

Firefox JavaScript Console is a tool that logs JavaScript errors found on a page when the page is rendered.   The Firefox JavaScript Console gives ‘compiler-type’ messages.   It describes the error that occurred and the gives the line number.

Firebug integrates with Firefox and provides many development tools.   Firebug has a version of a DOM inspector that enables a developer to find elements.   CSS support allows settings to be altered and viewed.   Firebug allows one to monitor the network activity in order to determine how long it takes for different sections of a page to download.      A JavaScript Debugger allows one to debug and step through the JavaScript at runtime.

Continue reading

Ajax Fundamentals – Part 3

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5

3. Security Issues

The XMLHttpRequest object is restricted to run within the browser’s security sandbox. Any resources requested by the XMLHttpRequest object must reside within the same domain from which the calling script originated. Therefore the XMLHttpRequest object is constrained to requesting resources that reside within the same domain from which the script was originally served. The W3C states, that in the future The XMLHttpRequest Object specification will define a way of doing cross-site requests.

There is an overabundance of online documentation stating that Ajax introduces multiple security threats. These threats include fake requests, denial of service, cross-site scripting (XSS), reliance on client-side security, and more. Jeremiah Grossman’s article, Myth-Busting AJAX (In)security, maintains that these security issues existed before Ajax and the recommended security best practices remain unchanged. Part of internet security basics is to distrust the client. Ajax is a client side technology and requests need to be treaded with the same caution as all other calls.

4. Disadvantages

4.1. Usability Problems

Web users have become familiar with using classic web pages. Users have become accustomed to using browser features such as the back and next buttons. Ajax calls are not loaded onto the browsers navigation stack. Therefore the back button will not undo the last ‘Ajax operation’. Developers need to explicitly cater for undo operations.

Ajax enabled pages have a notion of state; this state is altered as the user navigates through the site. The browser is unaware of this state, and it is not reflected in the address bar. Therefore users are not always able to book mark a certain page state. Developers need to consider this when deciding on when to use Ajax.

The asynchronous nature may make page updates difficult for the user to notice. The developer needs a way of drawing the user’s attention to the modified section of the page. The ‘yellow-fade technique’ has become common practice. In this technique the changes are highlighted with a yellow background, and the yellow fades gradually. These and other techniques are becoming familiar to web users.

Continue reading

Ajax Fundamentals – Part 2

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5

2. Ajax Communication

2.1. Handling the Server Response

The XMLHttpRequest object is used to receive the sever response. Two methods are used, namely responseText and responseXML. The responseText method returns text and the responseXML returns an object that can be parsed as a DOM object.

The responseText is limited however its functionality can be enriched when combining it with the innerHTML property. This is a simple method of including dynamic content within the page. The following code is a selected code extract from an example supplied by Foundations of Ajax.


function startRequest()
{
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "innerHTML.xml", true);
    xmlHttp.send(null);
}
function handleStateChange()
{
    if(xmlHttp.readyState == 4)
    {
        if(xmlHttp.status == 200)
        {
            document.getElementById("results").innerHTML =                 xmlHttp.responseText;
        }
    }
}


  <body>
    <form action="#">
      <input type="button" value="Search for Today's Activities" onclick="startRequest();"/>
    </form>
<div id="results"></div>
</body>

The above example refers to “innerHTML.xml”. This is a document that contains HTML tags that define an HTML table. When handleStateChange executes, an HTML table is embedded between within ‘results’ div tags and a table will be displayed.The innerHTML property is not a standard therefore not all browsers offer the same support. Microsoft Internet Explorer restricts innerHTML property to read only on certain elements. Using the W3C DOM is the preferred method for manipulating the web page. In order to use the W3C DOM the script needs to extract specific data from the server’s response. Selecting data from XML is far simpler than finding the data in plain text. The script can use responseXML to receive a response in XML format.The responseXML method returns an XML object that meets the W3C DOM specification. This standard is supported by most modern browsers. Using the API provided by DOM, the script can traverse the XML document. The following code shows an example of this.


function showArtistAlbums(artist)
{
    var artistname = artist;
    var xmlDoc = req.responseXML;// req is an XMLHttpRequest object
    var node = xmlDoc.getElementsByTagName(artistname)[0];
    var albums = node.getElementsByTagName("album");
    var result = artistname;

    for(var i = 0; i < albums.length; i++)
    {
        result = result + "\n * " + albums&#91;i&#93;.                         childNodes&#91;0&#93;.nodeValue;// Retrieves the text value
    }
}

&#91;/sourcecode&#93;

The objective of Ajax is to modify only relevant parts of a web page without refreshing the entire page.   This eases the load on the web server and provides a better user experience.   Performing these ‘precision updates' is possible by making use of the W3C DOM. <a href="http://www.amazon.com/Foundations-Ajax-Foundation-Ryan-Asleson/dp/1590595823/ref=pd_bbs_sr_1?ie=UTF8&amp;s=books&amp;qid=1207069447&amp;sr=8-1" target="_blank">Foundations of Ajax gives a good example of dynamically appending rows to an HTML table.   A Sample of the code is shown below.   Note that the tbody tag is used, in this case the tbody element has an ID equal to "resultsBody".



function addTableRow(address, price, comments)
{
    var row = document.createElement("tr");
       var cell = createCellWithText(address);
       row.appendChild(cell);
       cell = createCellWithText(price);
       row.appendChild(cell);
       cell = createCellWithText(comments);
       row.appendChild(cell);
       document.getElementById("resultsBody").appendChild(row);
}
function createCellWithText(text)
{
       var cell = document.createElement("td");
       var textNode = document.createTextNode(text);
       cell.appendChild(textNode);
       return cell;
}

Continue reading

Ajax Fundamentals – Part 1

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5

1. Introduction to Ajax

On the 18’th of February 2005 Jesse James Garret introduced the term Ajax in an article called “Ajax: A New Approach to Web Applications“. That article explained that Ajax is an acronym for Asynchronous JavaScript and XML. It is a way of using existing web-based technologies to provide a rich user interface to websites. It is a design pattern and not a new language and it is not a W3C standard.

In his article, Jesse Garrett lists the properties of Ajax:

  • standards-based presentation using XHTML and CSS
  • dynamic display and interaction using the Document Object Model
  • data interchange and manipulation using XML and XSLT
  • asynchronous data retrieval using XMLHttpRequest
  • and JavaScript binding everything together

In order for a classic web page to respond to a users input, an HTTP request needs to be sent to the server. The server processes the input and replies with an HTML page. Thus the entire page needs to be reloaded in order to provide a response to the user. This request/reply model can be tedious for a user. Ajax proposes a different model.Using the Ajax method a script can send asynchronous HTTP requests from the browser to the server. The script is notified when the response arrives at the browser, and can process the response. Units of data can be requested and processed without the user being disrupted by a complete page refresh. Garrett provides a graphical depiction of the Ajax model in the following image.

Ajax Fundamentals - Life Cycle

Continue reading

Ajax Fundamentals – About & Index

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5

About This Series

Silverlight, Apollo, JavaFX have spurred another wave of Rich Internet Application discussions. I came across an interesting interview with David Heinemeier Hansson, the creator of Rails.

In this interview Hansson states: “We went through this with Java applets, they were going to rule the Web. Everything was going to be in a Java applet. HTML and CSS is history. And Flash came around, and Flash started focusing on applications. Now Flash is going to rule the Web and HTML and so on is yesterday. Now, Silverlight, Apollo, JavaFX, they’re all bidding to take over the JavaScript, HTML and CSS [spaces], and I just don’t buy it.”

Hanson also made this comment: “I think that there are misconceptions going on from people who are pushing these alternative delivery platforms that somehow Web developers are hungry for richer and richer experiences, that they’re really unhappy working with HTML and CSS. And that’s just not true. We’re not clamoring to re-create the desktop on the Web.”

Hansson makes a good point, developers will not be throwing away HTML and CSS any time soon. Therefore I have decided to create this series to explore the different facets of developing with Ajax.

Index

Part 1
1. Introduction to Ajax
2. The XMLHttpRequest Object
2.1. The Document Object Model
2.1.3. DOM Levels

Part 2
2. Ajax Communication
2.1. Handling the Server Response
2.2. Parsing Parameters in the Request
2.3. JavaScript Object Notation

Part 3
3. Security Issues
4. Disadvantages
4.1. Usability Problems
4.2. JavaScript Disabled
4.3. Search Engine Indexing

Part 4
5. Development and Debugging Tools
5.1. Documenting JavaScript
5.2. Firefox Tools & Extensions
5.3. JavaScript Syntax Checking
5.4. Compression and Obfuscation

Part 5
6. Summary

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5