The problem

Treating Ajax as an “all or nothing” technology.

It will take a lot of time and effort to create a “separate but equal” non-Ajax version.

The solution

Progressive Enhancement

Progressive Enhancement in theory

• Begin with content
• Mark up the content in a semantically meaningful way
• Add a presentation layer
• Add a behaviour layer

Progressive Enhancement in practice

• Begin with content
• Mark up the content in a semantically meaningful way (X)HTML
• Add a presentation layer CSS
• Add a behaviour layer DOM Scripting

CSS: inline vs. external

Gotta keep 'em separated

• Inline

  <p style="font-weight: bold">This is an introductory paragraph.</p>

• External

  <p class="introduction">This is an introductory paragraph.</p>

  p.introduction { font-weight: bold; }

JavaScript: inline vs. external

• JavaScript pseudo-protocol - Awful!

  <a href="javascript:window.open('help.html')">contextual help</a>

• Pointless link - Bad!

  <a href="#" onclick="window.open('help.html'); return false;">contextual help</a>

• Using the DOM - Better.

  <a href="help.html"
  onclick="window.open(this.getAttribute('href')); return false;">contextual help</a>

• No inline JavaScript - Best!

  <a href="help.html" class="help">contextual help</a>

External JavaScript function

function doPopups() {
  if (document.getElementsByTagName) {
    var links = document.getElementsByTagName("a");
    for (var i=0; i < links.length; i++) {
      if (links[i].className.match("help")) {
        links[i].onclick = function() {
          window.open(this.getAttribute("href"));
          return false;
        };
      }
    }
  }
}

Unobtrusive JavaScript

Avoid:

• <a href="#">
• <a href="javascript:">
• inline event handlers

The XMLHttpRequest object

A quick introduction...

Create an instance

• function getHTTPObject() {

•  var ajax = false;

•  if (window.XMLHttpRequest) {
     ajax = new XMLHttpRequest();

•  } else if (window.ActiveXObject) {
     ajax = new ActiveXObject("Microsoft.XMLHTTP");
   }

•  return ajax;
  }

Prepare your transmission

• request = getHTTPObject();

• request.onreadystatechange = doSomething;

• request.open( "GET", "myfile.php", true );

• request.send(null);

The readyState property

• 0 uninitialized
• 1 loading
• 2 loaded
• 3 interactive
• 4 complete

Testing for readyState

• function doSomething() {

•   if (request.readyState == 4) {
  //  code goes here
    }
  }
  

The status property

• function doSomething() {

•   if (request.readyState == 4) {

•     if (request.status == 200) {
  //    it worked
      } else {
  //    something went wrong
      }
    }
  }
  

What you get back

• responseXML
  • Can be manipulated like any other documentFragment:
  • getElementsByTagName,appendChild, etc.
  • Must be sent from the server with the correct mime type: text/xml
• responseText
  • A string
  • JSON or HTML

Applying Progressive Enhancement to Ajax

“But it's a whole different paradigm — the old rules don't apply.”

“But it's not a website anymore — it's more like a desktop application.”

The Hijax approach

• Begin by creating a website using traditional page refreshes.
• Data is sent to the server via links and form submissions: the server returns updated pages.
• Intercept (hijack) those links and forms using (unobtrusive) JavaScript.
• Send that data to XMLHttpRequest instead of the server.
• The server returns just the information that's required instead of an entire page.

Server-side requirements

Back-end architecture should be modular.

Web pages are created by joining modules together (e.g. navigation, log-in form, shopping cart, etc.)

[Hint: APIs are very modular]

The paradox

• Plan for Ajax from the start
• Implement Ajax at the end

Pattern recognition

A page that includes a form: when the form is submitted, the same page is returned with just part of the page updated.

• Blog comments
• Registration forms

Example: Contact form (JS)

Capturing form data

function prepareForm(formId) {
  if (!document.getElementById) return false;
  if (!document.getElementById(formId)) return false;
  document.getElementById(formId).onsubmit = function() {
    var data = "";
    for (var i=0; i<this.elements.length; i++) {
      data+= this.elements[i].name;
      data+= "=";
      data+= escape(this.elements[i].value);
      data+= "&";
    }
    return (!sendData(data,"formlogic.php"));
  };
}

Sending data with XMLHttpRequest

function sendData(data,file) {
  var request = getHTTPObject();
  if (request) {
    request.onreadystatechange = function() {
      doSomething(request);
    };
    request.open( "POST", file, true );
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    request.send(data);
    return true;
  } else {
    return false;
  }
}

More pattern recognition

Clicking on a link returns the same page but with one portion changed (different data or different view of data).

• Product ratings
• Filtered result set
• Navigating archives

Example: Shopping cart (JS)

Capturing link data

function prepareLinks(containerId) {
  if (!document.getElementById) return false;
  if (!document.getElementById(containerId)) return false;
  var links =  document.getElementById(containerId).getElementsByTagName("a");
  for (var i=0; i<links.length; i++) {
    links[i].onclick = function() {
      var data = this.getAttribute("href").split("?")[1];
      return (!sendData(data,"shoppingcart.php"));
    };
  }
}

Choosing a data format

• XML + DOM methods
• JSON + eval()
• HTML + innerHTML

  So simple, it's a microformat: AHAH

Keep It Simple Stupid

Use the XMLHttpRequest object like a dumb waiter:

• Send data from the client to the server
• Send page fragments from the server to the client

Client-side processing is kept to a minimum: all the heavy lifting happens on the server.

Example: Sorting tables (JS)

Benefits of Hijax

• No need to spend time and resources building a non-Ajax version.
• No duplication of logic (e.g. form validation).
• Keeps your application logic on the server.
• Keeps your JavaScript file size down.
• Links are spiderable and potentially bookmarkable.

Thank you

http://domscripting.com/presentations/wd06/hijax/