AJAX - The Complete Reference

(avery) #1

40 Part I: Core Ideas


When the browser receives the generated JavaScript, it then calls the requestComplete()
function.

function requestComplete(rating, total, average)
{
//clear timeout
clearTimeout(timer);
var resultDiv = document.getElementById("resultDiv");
resultDiv.innerHTML = "Thank you for voting. You rated this a <strong>" +
rating + "</strong>. There are <strong>" + total + "</strong> total votes. The
average is <strong>" + average + "</strong>. You can see the ratings in the
<a href='http://ajaxref.com/ch2/ratings.txt' target='_blank'>ratings file</a>.";
}

You can see the communication trace here, which shows just how simple this method
can be.

The simple elegance of the <script> tag method should encourage you to get very
familiar with it. Another incentive is that you will see it again in later chapters when
addressing Ajax’s XHR object’s limitations as imposed by the same origin policy it follows.
To verify the function of <script> tag-based communications, explore the example at
http://ajaxref.com/ch2/twowayscript.html.

Less Common Two-way Methods

As with the one-way examples, there are many approaches to sending and receiving data, such
as using a style sheet request or using cookies in a two-way manner. As an example, the <link>
tag approach is detailed here to illustrate the awkward nature or limitations of such esoteric
approaches. Their inclusion is meant to drive home the fact that they should not be used.

Two-way Style Sheet Communication
As shown in the one-way communication patterns, it is simple to insert a linked style sheet
in a page to transmit data in a query string to a server-side program.

var linkedStyle = document.createElement("link");
linkedStyle.rel = "stylesheet";
linkedStyle.type = "text/css";
Free download pdf