Chapter 3: XMLHttpRequest Object 79
PART I
<br />
<div id="responseOutput" class="results" style="display:none;"> </div></body>
</html>Obviously, given the “browser lock-up” limitation presented in the previous section,
you might want to try http://ajaxref.com/ch3/asyncsendslow.html to prove to yourself the
value of using asynchronous communication. However, do note that with this power comes
a price as now you must keep track of the connections made and make sure that they return
in a timely fashion and without errors. You will also find that, if the ordering of requests
and responses matter, asynchronous communication introduces much more complexity
than maybe expected. The richer network provides Ajax tremendous power and flexibility,
but should not be trifled with. We’ll begin to present some of these issues in more detail
when we revisit readyState and status later in this chapter and even more detail will be
provided when we discuss network concerns in Chapter 6. For now, let’s expand the XHR
examples by transmitting some data to the server.Sending Data via GET
As mentioned in the previous chapter, data can be sent via any HTTP GET request by adding
the data to send to a query string in the URL to send to. Of course, the same is also true in the
case of XHR-based communication, just create the XHR object and set it to request the
desired URL with a query string appended, like so:var xhr = createXHR();
if (xhr)
{
xhr.open("GET","http://ajaxref.com/ch3/setrating.php?rating=5",true);
xhr.onreadystatechange = function(){handleResponse(xhr);};
xhr.send(null);
}As you can see, it is quite easy to make a request, but it is still necessary to respect the
encoding concerns and make the payload URL safe, as well as acknowledge that there are
limits to the amount of data that can be passed this way. As previously mentioned in
Chapter 2, when passing more than a few hundred characters, you should start to worry
about the appropriateness of the data transfer method. We revisit the rating example of the
previous chapter done with an XHR communication mechanism for your inspection.<!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 3 : XMLHttpRequest - Sending Data with GET Query Strings </title>
<script type="text/javascript">
function encodeValue(val)
{