|
|
| AJAX: Redefining Web Applications |
|
|
• On some particular event, the JavaScript code sends the request behind the scenes to the server (in Java, the request in sent to the Servlet); the user doesn’t even realize that the request is being made, i.e. the request is sent asynchronously, which means that your JavaScript code (and the user) doesn’t wait around on the server to respond.
• The server sends data back as a response to your JavaScript code which decides what to do with that data.
• The response data can be simple string (used in case if you’re updating only single field on the form) or XML string (used for updating multiple fields on the form).
• The following things happen during AJAX interaction:
1 A client event occurs.
2 An XMLHttpRequest object is created and configured.
3 The XMLHttpRequest object makes a call.
4 The request is processed by the Servlet.
5 The Servlet returns an XML document containing the result.
6 The XMLHttpRequest object calls the callback() function and processes the result.
7 The HTML DOM (or UI) is updated. Code illustrations for AJAX request ‘n’ response:
SimpleAJAXDemo.html
<!DOCTYPE HTML PUBLIC “-//W3C//DTD
HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Simple AJAX Demo</title>
<meta http-equiv=”keywords”
content=”keyword1,keyword2,keyword3">
<meta http-equiv=”description”
content=”this is my page”>
 |
|
<meta http-equiv=”content-type”
content=”text/html; charset=UTF-8">
<script language=”javascript”>
var req;
function convertToString() {
var num =
document.getElementById(“num”);
var url = “/ajaxapp/
SimpleAJAXResponse?num=” +
escape(num.value);
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}
else if(window.ActiveXObject){
req = new
ActiveXObject(“Microsoft.XMLHTTP”);
}
req.open(“Get”,url,true);
req.onreadystatechange = callback;
req.send(null);
}
function callback() {
if( req.readyState==4 ){
if( req.status==200 ) {
var strNum =
document.getElementById(“numstring”);
strNum.value = req.responseText;
}}}
function clear(){
var num =
document.getElementById(“num”);
num.value = “”;
}
function focusIn(){
document.getElementById(“num”).focus( );
}
</script>
</head>
<body onload=”focusIn();”>
Enter the Number here:
<input type=”text” id=”num” name=”num”
onkeyup=”convertToString();”>
<br><br>
Equivalent String:
<input type=”text” size=”20" readonly |
|
Nov 2007 | Java Jazz Up | 48 |
| |
|
| |
| View All Topics |
| All Pages of this Issue |
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 Download PDF |
|
|
|
|
|
|
| |
| |
|
