Magazine
 
Quick Review:Ajax
 
Ajax Examples

8. Hello Ajax World Example

The objective of this example is to display the content of "data.xml" file when the button on the page is clicked. Clicking the button doesn't refresh the page. The above page contains button component containing "onclick" attribute which is set to JavaScript function "replace()". This function is called each time this button is clicked. The “div” component of “message” id is used to display the time when Ajax response is completed.

helloworld.html

<Html>
<Head>
<Title>Simple Ajax and XML Example</title>
<script type="text/javascript">
function replace(){
var xmlHttp;
if (window.XMLHttpRequest){ // Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState == 4) {
process();
}}
xmlHttp.open("GET", "data.xml");
xmlHttp.send(null);
}
function process(){
var message = xmlHttp.responseXML.getElementsByTagName("display-name")[0];
var results = message.childNodes[0].nodeValue;
document.getElementById('message').innerHTML=results;
}
</script>
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="1" width="464" bgcolor="#ccffcc">
<tr>
<td width="525" colspan="2" ><font color="blue">
<p align="center"><b>Hello Ajax World - Example</b></font></td>
</tr>
<tr>
<td width="289" ><font color="blue">&nbsp;Click to see Message!</font></td>
</tr>
<tr>

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