Magazine
 
Quick Review:Ajax
 
Five common Ajax patterns
 

portion of the page with it. You can do this can periodically — for example, to update stock quotes. Or you can update on demand — for example, in response to a search request. The code in Listing 1 requests a page from the server, and then places that content into a <div> tag in the body of the page.

Listing 1. Pat1_replace_div.html

<html>
<script>
var req = null;
function processReqChange() {
if (req.readyState == 4 && req.status == 200 ) {
var dobj = document.getElementById( ‘htmlDiv’ );
dobj.innerHTML = req.responseText;
}
}
function loadUrl( url ) {
if(window.XMLHttpRequest) {
try { req = new XMLHttpRequest();
} catch(e) { req = false; }
} else if(window.ActiveXObject) {
try { req = new ActiveXObject(‘Msxml2.XMLHTTP’);
} catch(e) {
try { req = new ActiveXObject(‘Microsoft.XMLHTTP’);
} catch(e) { req = false; }
} }
if(req) {
req.onreadystatechange = processReqChange;
req.open(‘GET’, url, true);
req.send(‘’);
}
}
var url = window.location.toString();
url = url.replace( /pat1_replace_div.html/, ‘pat1_content.html’ );
loadUrl( url );
</script>
<body>
Dynamic content is shown between here:<br/>
<div id=”htmlDiv” style=”border:1px solid black;padding:10px;”>
</div>
And here.<br/>
</body>
</html>

Listing 2 shows the content that the code is requesting.

Apr 2008 | Java Jazz Up |61
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