1. Hijax

  2. What is Hijax?

    Treating Ajax as an enhancement.

    By applying this enhancement progressively, graceful degradation is assured.

  3. The wrong approach

    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.

  4. The Hijax approach

  5. 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.)

  6. The paradox

  7. 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"));
      };
    }
    
  8. 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;
      }
    }
  9. 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)

  10. 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,"formlogic.php"));
        };
      }
    }
    
  11. 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)

  12. Benefits of Hijax

  13. Next

    Ajax problems challenges