| 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 |
|
| |
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 |
|
|
|
