AJAX - The Complete Reference

(avery) #1

PART II


Chapter 5: Developing an Ajax Library 187


var options = { method: "GET",
serializeForm : "ratingForm",
onSuccess : handleResponse
};

Another useful convenience is the introduction of the outputTarget option, which
allows the user to set an object or ID value to be used for output. This property is used in
the _handleCallbacks() method to directly insert the contents of the XHR’s
responseText property into the targeted tag using its innerHTML property.

/* Check if user wants to automatically consume output */
if (response.outputTarget && response.useRaw)
{
var outputTarget = response.outputTarget;
if (outputTarget && typeof(outputTarget) == "string")
outputTarget = document.getElementById(outputTarget);
outputTarget.innerHTML = response.xhr.responseText;
}

NNOT EOTE The variable useRaw is by default set to true, which means the library directly inserts the
contents of responseText into the specified target tag. However, you might set useRaw to
false and handle the output yourself, limiting outputTarget to be a reference to where you
might eventually put the decoded response data.

The direct creation of small text or markup fragments in the responses creates a very
simple way to apply Ajax in the examples. With these new ideas in play, the code portion of
the simple rating example is now even smaller.

function rate(rating)
{
var url = "http://ajaxref.com/ch3/setrating.php";
var options = { method: "GET",
serializeForm : "ratingForm",
outputTarget : "responseOutput"
};
AjaxTCR.comm.sendRequest(url,options);
}

However, to show a better example, we’ll demonstrate how our form serializer works
just fine with POST and more fields. See http://ajaxref.com/ch5/postrevisited.html, which
is also shown here.

<!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 5 : XMLHttpRequest - POST </title>
<script src="http://ajaxref.com/ch5/ajaxtcr.js" type="text/javascript"></script>
<script type="text/javascript">
function rate(form)
{
Free download pdf