1. Progressive Enhancement with Hijax


  2. 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.

  3. The solution

    Progressive Enhancement

  4. Progressive Enhancement in theory

  5. Progressive Enhancement in practice

  6. CSS: inline vs. external

    Gotta keep 'em separated

  7. JavaScript: inline vs. external

  8. 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() {
              return false;
  9. Unobtrusive JavaScript


  10. The XMLHttpRequest object

    A quick introduction...

  11. Create an instance

  12. Prepare your transmission

  13. The readyState property

  14. Testing for readyState

  15. The status property

  16. What you get back

  17. 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.”

  18. The Hijax approach

  19. Server-side requirements

    Lego bricks

    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]

  20. The paradox

  21. 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.

    Example: Contact form (JS)

  22. 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"));
  23. Sending data with XMLHttpRequest

    function sendData(data,file) {
      var request = getHTTPObject();
      if (request) {
        request.onreadystatechange = function() {
        request.open( "POST", file, true );
        return true;
      } else {
        return false;
  24. More pattern recognition

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

    Example: Shopping cart (JS)

  25. 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"));
  26. Choosing a data format

  27. Keep It Simple Stupid

    Dumb waiter

    Use the XMLHttpRequest object like a dumb waiter:

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

    Example: Sorting tables (JS)

  28. Benefits of Hijax

  29. Thank you