Skip to content

banner ajax
The Complete Reference: Ajax

Examples: Compression

HTTP Compression Explorer

Ask for Compressed Response:
Show Compressed Response:


<!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=UTF-8" />
<title>Chapter 6 : Networking Considerations - Compression</title>
<link rel="stylesheet" href="global.css" type="text/css" media="screen" />
<script src="https://ajaxref.com/ch6/ajaxtcr.js" type="text/javascript">
</script>
<script type="text/javascript">
 
 
 
function sendRequest(form)
{
    var url = "https://ajaxref.com/ch6/compress.php";
    var options = {method:"GET",
                   onSuccess: handleResponse,
                   serializeForm:form
                  };
                  
    AjaxTCR.comm.sendRequest(url, options);
}
 
function handleResponse(response)
{
    var responseHeaders = response.xhr.getAllResponseHeaders().replace(/<([^>]*)>/g, "&lt;$1&gt;").replace(/\n/g, "<br/>");
    var contentLength = response.xhr.getResponseHeader("Content-Length");
    if (contentLength == null || contentLength == "")
        contentLength = "Browser removed Content-Length header on decompression of compressed data (Value should be 849)";
    var responseOutput = document.getElementById("responseOutput");
    responseOutput.innerHTML = "<h3>Response Content Length</h3><div class='data'>" + contentLength +"</div><h3>All Headers</h3><div class='data'>" + responseHeaders +"</div><h3>Response Text</h3>" + response.xhr.responseText;
    responseOutput.style.display = "";
}
 
 
window.onload = function () 
{ 
 document.requestForm.requestButton.onclick = function () { sendRequest(this.form); };
};
</script>
 
</head>
<body>
<div class="content">
<h1>HTTP Compression Explorer</h1>
<form action="#" name="requestForm">
<table width="100%">
<tr class="row">
<td width="300">Ask for Compressed Response: </td>
<td><input type="checkbox" name="compressed" /></td>
</tr>
<tr class="row">
<td>Show Compressed Response: </td>
<td><input type="checkbox" name="showcompressed" /></td>
</tr>
</table>
<br />
<input type="button" name="requestButton" value="Send Request" />
</form>
<br />
</div>
<div id="responseOutput" class="results" style="display:none;">&nbsp;</div>
 
</body>
</html>