Skip to content

banner ajax
The Complete Reference: Ajax

Examples: Request - XML

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 - XML Request </title>
<script type="text/javascript">
 
function encodeValue(val)
{
 var encodedVal;
 if (!encodeURIComponent)
 {
   encodedVal = escape(val);
   /* fix the omissions */
   encodedVal = encodedVal.replace(/@/g, '%40');
   encodedVal = encodedVal.replace(/\//g, '%2F');
   encodedVal = encodedVal.replace(/\+/g, '%2B');
 }
 else
 {
   encodedVal = encodeURIComponent(val);
   /* fix the omissions */
   encodedVal = encodedVal.replace(/~/g, '%7E');
   encodedVal = encodedVal.replace(/!/g, '%21');
   encodedVal = encodedVal.replace(/\(/g, '%28');
   encodedVal = encodedVal.replace(/\)/g, '%29');
   encodedVal = encodedVal.replace(/'/g, '%27');
 }
 /* clean up the spaces and return */
 return encodedVal.replace(/\%20/g,'+'); 
}
 
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("POST",url,true);
       xhr.setRequestHeader("Content-Type", "text/xml");
       xhr.onreadystatechange = function(){handleResponse(xhr);};
       xhr.send(payload);
     }
}
 
function handleResponse(xhr)
{
  if (xhr.readyState == 4  && xhr.status == 200)
    {
      var responseOutput = document.getElementById("responseOutput");
     responseOutput.innerHTML = xhr.responseText;
    }
}
 
 
function rate(rating, comment)
{
    /* determine rating value */
    var ratingVal = 0;
    for (var i=0; i < rating.length; i++)
    {
     if (rating[i].checked)
       {
        ratingVal = rating[i].value;
        break;
       }
    }
    
    ratingVal = encodeValue(ratingVal);
    comment = encodeValue(comment);
     
    var url = "https://ajaxref.com/ch4/setrating.php";
    var payload = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n";
    payload += "<vote>\r\n";
    payload += "<rating>" + ratingVal + "</rating>\r\n";
    payload += "<comment>" + comment + "</comment>\r\n";
    payload += "</vote>\r\n";
    
    sendRequest(url, payload);
    
    return false;
}
 
 
window.onload = function () 
{ 
 document.ratingForm.onsubmit = function () { return rate(this.rating,this.comment.value); };
};
</script>
 
</head>
<body>
<h3>How do you feel about Ajax?</h3>
<form action="#" name="ratingForm" method="post" >
<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><br /><br />
<label>Comments:<br />
<textarea id="comment" name="comment" rows="5" cols="40"></textarea></label><br />
<input type="submit" value="vote" />
</form>
<br />
<div id="responseOutput">&nbsp;</div>
</body>
</html>