Skip to content

banner ajax
The Complete Reference: Ajax

Examples: Response - Base 64

How do you feel about Ajax?

Hate It - [ 1 2 3 4 5 ] - Love It

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Chapter 4 : Data Types - base-64 </title>
<script language="JavaScript" type="text/javascript" src="encode.js">
</script>
<script type="text/javascript">
 
 
function createXHR()
{
   try { return new XMLHttpRequest(); } catch(e) {}
   try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
   try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
   try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
 
   return null;
}
 
function sendRequest(url, payload)
{
    var xhr = createXHR();
 
    if (xhr)
     {
       xhr.open("GET",url + "?" + payload,true);
       xhr.onreadystatechange = function(){handleResponse(xhr);};
       xhr.send(null);
     }
 
}
 
function handleResponse(xhr)
{
  if (xhr.readyState == 4  && xhr.status == 200)
    {
     var responseOutput = document.getElementById("responseOutput");
     responseOutput.innerHTML = "<h3>Response Text</h3>" + xhr.responseText;
     responseOutput.innerHTML += "<h3>Processed</h3>";
     responseOutput.innerHTML += decode64(xhr.responseText);
    }
}
 
 
function decode64(inputStr) 
{
   var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
   var outputStr = "";
   var i = 0;
   inputStr = inputStr.replace(/[^A-Za-z0-9\+\/\=]/g, "");
 
   while (i<inputStr.length)
   {
      var dec1 = b64.indexOf(inputStr.charAt(i++));
      var dec2 = b64.indexOf(inputStr.charAt(i++));
      var dec3 = b64.indexOf(inputStr.charAt(i++));
      var dec4 = b64.indexOf(inputStr.charAt(i++));
 
      var byte1 = (dec1 << 2) | (dec2 >> 4);
      var byte2 = ((dec2 & 15) << 4) | (dec3 >> 2);
      var byte3 = ((dec3 & 3) << 6) | dec4;
 
      outputStr += String.fromCharCode(byte1);
      if (dec3 != 64) 
          outputStr += String.fromCharCode(byte2);
      if (dec4 != 64)
         outputStr += String.fromCharCode(byte3);
   }
 
   return outputStr;
}
 
function rate(rating)
{
    var url = "http://ajaxref.com/ch4/setrating.php";
    var payload = "rating=" + encodeValue(rating);
    payload += "&response=base64+encoded";
    sendRequest(url, payload);
}
 
window.onload = function () 
{ 
 var radios = document.getElementsByName('rating');
 for (var i = 0; i < radios.length; i++)
  {
   radios[i].onclick = function (){rate(this.value);}; 
  }
};
</script>
 
</head>
<body>
<h3>How do you feel about Ajax?</h3>
<form action="#" method="get" name="ratingForm">
<em>Hate It - </em> [
<input type="radio" name="rating" value="1" /> 1
<input type="radio" name="rating" value="2" /> 2
<input type="radio" name="rating" value="3" /> 3
<input type="radio" name="rating" value="4" /> 4
<input type="radio" name="rating" value="5" /> 5
] <em> - Love It</em>
 
</form>
<br />
<div id="responseOutput">&nbsp;</div>
</body>
</html>