Wikiversity

Web technologies -- Laboratory 10 -- AJAX -- 2007-2008 -- info.uvt.ro

Important! These pages are somehow outdated and it is recommended to consult the newer version at Web technologies -- 2009-2010 -- info.uvt.ro (by Marc Frâncu).
edit

AJAX

edit

References

edit

Tutorials

edit

Discussion Points

edit
  • AJAX (Asynchronous JavaScript and XML)
    • is not a new language, barely knowing HTML and JavaScript can suffice
    • made popular in 2005 by Google Suggest
    • used to transfer data from the server to the client without reloading the page
  • Commonly employed in:
    • text field auto-completion
    • on-the-fly form validation
    • modular web pages
  • Other aspects:
    • can be used to hide data from web spiders
    • is often used to provide interactivity in web pages not otherwise possible without Flash (--see Google Maps)
    • generally loads faster than Flash
    • cannot be accessed without JavaScript enabled
    • may or may not work as intended in different browsers
    • can be used to prevent bookmarking or direct linking from other sites
    • needs a work-around to be able to run JavaScript in the pages it loads

How It Works

edit

Basically, you start with an empty HTML page, that maybe has a DIV, or a table cell into which you want to load another page, or some formatted text. To do that with AJAX, you need to copy-paste the example functions shown lower, placing them into a JavaScript file that you include in your empty page.

Then, you need to write down the data you want shown in the now-empty DIV. It can be a simple HTML page, or, more commonly, a PHP or ASP script. You could even use a plain-text file.

Finally, you need to call the last function listed below at page load, after modifying it with the appropriate file name and the id of the HTML DIV you wish the data to be shown in.

Example

edit
  • AJAX can be used to concomitantly send out a number of requests that each load data into a specific area of a site
var xmlHttp = new Array();
var areaNames = new Array();
var i = 0;
  • Not all browsers implement the JavaScript request in the same way.
function xmlRequest()
{
  var xmlHttpTemp = null;
  try
  {
    xmlHttpTemp = new XMLHttpRequest();
  }
  catch (e)
  {
    try
    {
      xmlHttpTemp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
      try
      {
        xmlHttpTemp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e)
      {
        alert("Your browser does not support AJAX!");
        return false;
      }
    }
  }
  return xmlHttpTemp;
}
  • The next function is run when a response arrives from the server, and is used to actually display data at the desired location on the web page.
function stateChanged()
{
  for (var pos=0; pos <=i; pos++)
  {
    if (xmlHttp[pos] != null &&
        xmlHttp[pos].readyState == 4 &&
        (xmlHttp[pos].status == 200 || xmlHttp[pos].status == 304))
    {
      document.getElementById(areaNames[pos]).innerHTML = xmlHttp[pos].responseText;
      execJS(document.getElementById(areaNames[pos]));
      xmlHttp[pos] = null;
      areaNames[pos] = null;
    }
  }
}
  • As stated before, the following work-around is needed if we want to run JavaScript code that was dynamically loaded from the server.
function execJS(node)
{
  var bSaf = (navigator.userAgent.indexOf('Safari') != -1);
  var bOpera = (navigator.userAgent.indexOf('Opera') != -1);
  var bMoz = (navigator.appName == 'Netscape');

  if (!node) return;

  var st = node.getElementsByTagName('SCRIPT');       // IE wants it uppercase
  var strExec;

  for(var i = 0; i < st.length; i++)
  {
    if (bSaf)
    {
      strExec = st[i].innerHTML;
      st[i].innerHTML = "";
    }
    else if (bOpera)
    {
      strExec = st[i].text;
      st[i].text = "";
    }
    else if (bMoz)
    {
      strExec = st[i].textContent;
      st[i].textContent = "";
    }
    else
    {
      strExec = st[i].text;
      st[i].text = "";
    }

    try
    {
      var x = document.createElement("script");
      x.type = "text/javascript";

      if ((bSaf) || (bOpera) || (bMoz))      // In IE we must use .text!
        x.innerHTML = strExec;
      else
        x.text = strExec;

      document.getElementsByTagName("head")[0].appendChild(x);
    }
    catch(e)
    {
      alert(e);
    }
  }
}
  • Finally, a part of the website (such as the menu, for example) can be loaded with the skeleton AJAX framework we've previously defined.
function loadMenu()
{
  var pos = i;
  var phpScript = "./php/menu.php";

  areaNames[i] = "menu";

  xmlHttp[i] = xmlRequest();
  xmlHttp[i].onreadystatechange = stateChanged;
  xmlHttp[i].open("GET", phpScript, true);
  xmlHttp[i].send(null);  

  i++;
}

Georgel Preput 23:00, 12 December 2007 (UTC)

Retrieved from "https://beta.wikiversity.org/w/index.php?title=Web_technologies_--_Laboratory_10_--_AJAX_--_2007-2008_--_info.uvt.ro&oldid=176735"