Magazine
 
Quick Review:Ajax
 
Five common Ajax patterns
 

check the value of both the status and the readyState value. While some browsers will call the function only when the request is complete, other browsers will call back continuously to tell the code that the request is still running.

The tabbed display variant
Another variant of this pattern is to create a tabbed style of display. Listing 3 shows a simple tabbed Ajax interface.

Listing 3. Pat1_tabs.html

<html>
<script>
var req = null;
function processReqChange() {
if (req.readyState == 4 && req.status == 200 ) {
var dobj = document.getElementById( ‘tabDiv’ );
dobj.innerHTML = req.responseText;
}
}
function loadUrl( tab ) {
var url = window.location.toString();
url = url.replace( /pat1_tabs.html/, tab );
...
}
function tab1() { loadUrl( ‘pat1_tab1_content.html’ ); }
function tab2() { loadUrl( ‘pat1_tab2_content.html’ ); }
tab1();
</script>
<body>
<a href=”javascript: void tab1();”>Tab 1<a>
<a href=”javascript: void tab2();”>Tab 2<a>
<div id=”tabDiv” style=”border:1px solid black;padding:10px;”>
</div>
</body>
</html>

Listing 4 shows the content for the first tab.

Listing 4. Pat1_tab1_content.html

Tab 1 content

And Listing 5 shows the content for the second tab.

Listing 5. Pat1_tab2_content.html

Tab 2 content

Apr 2008 | Java Jazz Up |63
previous
index
next
 
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29,

30
, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53 , 54, 55, 56, 57,

58
, 59, 60, 61, 62, 63 , 64, 65 , 66 , 67 , 68 , 69 , 70, 71, 72, 73, 74, 75, 76, 77, 78,   Download PDF