Quote from Wikipedia:
 ”Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications.
  The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change.
  This is meant to increase the web page’s interactivity, speed, and usability. ”
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

A while back I was wondering how can I make use of this technology and still have the website accessible by visitors that doesn’t have JavaScript enabled browser and can not make use of the XMLHttpRequest and also have the search engine spidering the website without any problems.

The solution I came up with was to create an instance of the XMLHttpRequest and store a cookie on the user computer with the value received.
If the instance is successfully created we store a cookie “xml_state” with the value “yes” for 1 day (24 hours), if not then a cookie “xml_state” with the value “no” will be set instead.
Then using the request cookie method we can handle how we are writing the “a href” tags.
I have this done using PHP, by creating another function to handle the way the links will be written.

Let’s dig in step by step.

// first create the XMLHTTP function
// Create XMLHTTP - Note: AJAX feature requires IE5.5+, FF1+, and NS6.2+
function EWD_createXMLHttp() {
if (!(document.getElementsByTagName || document.all))
  return;
  var ewd_ret= null;
  try {
    ewd_ret = new ActiveXObject('Msxml2.XMLHTTP');
  } catch (e) {
    try {
      ewd_ret = new ActiveXObject('Microsoft.XMLHTTP');
   } catch (ee) {
  ewd_ret = null;
  }
}
if (!ewd_ret && typeof XMLHttpRequest != 'undefined')
  ewd_ret = new XMLHttpRequest();
  return ewd_ret;
}

second will create the function that will handle the cookie

function EWD_SetCookie(cookieName,cookieValue,nDays) {
  var today = new Date();
  var expire = new Date();
  if (nDays==null || nDays==0) nDays=1;
  //we set the cookie to one day just in case the visitors decides to make changes to the browser
  expire.setTime(today.getTime() + 3600000*24*nDays);
  document.cookie = cookieName+"="+escape(cookieValue) + ";expires="+expire.toGMTString();
}
//end of set cookie     

//check for XMLHTTP support
var xmlHttp = EWD_createXMLHttp();
if (xmlHttp){
  EWD_SetCookie("xml_state","yes",1);
}else{
  EWD_SetCookie("xml_state","no",1);
}
//end of check for XMLHTTP

this is the php function that will handle the cookie state and create the url

function link_url($url_link,$div_name){
  if(@$_COOKIE['xml_state'] == "yes") {
    //we can use ajax
    $url_link = '$url_link' onclick='ajax_function_that_will_make_the_request($url_link, $div_name); return false;'
    return $url_link; //return ajax type a href
  }else{
    return $url_link; //return normal a href
  }
}

then on the page you will be using the above function to handle how the a href tag are written to the page:

link_url($url_link,$div_name)

Tags: ajax and php, ajax technologies

This entry was posted on Sunday, October 14th, 2007 at 3:48 pm and is filed under Ajax. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

(No Ratings Yet)

 Loading ...