Professional Documents
Culture Documents
AJEX Essential 1.0 Tutorial
AJEX Essential 1.0 Tutorial
!
"
# "
! $ ! %#
" &! '( ) " " *
%# * +* ! "
" %# ,
- (. )/ . ) 0
1 / " 0
2 3 % / "
4 4 4 ! % /5)5 5
#0 0
( ) ( )6
! ( ). 78 6
&! " ! " . ) . )
UI AJAX DB
Engine
Data
HTML, CSS
%# ! !
" " " !
! ! #
+ "
8 8 " ! &( !
* ! ! &(
# +/ 0 &( + "
5
+ !
2 5
9" + + ! %
+
9" + &(
9 +
9" + "
9 + + "
: :
+ "
7 + ;
! 9
2
; " / 0
9
7)< <
1 9 +
&! # 1$
1 <
/" 0 !
" &(
; !
;
;
< !
; " # "
&! 1 . $ 8 "
&!
. $ 8 " &! !
&! " ! " . $ 8
! - " "
" - " . $
#$ - # " 8
- 23 # % " 8
-. $ "
#$ -. $ #
%$ &
!
"#$%"& "' ( ! )(!"&
""
*
!
+ ''
! % )
*
*
'% (
(
• ! # ! < +5
o req = new ActiveXOjbect("Microsoft.XMLHTTP");
o = < !
o ! ( ). 7 8 +5>
) *
! , !
!
'' - -.
*
!
*
'' - /$'0 1
* ! 1 2-.
1 2-. " )(!3 %%4"
*
1 2-. " %%4"
*
!
*
*
*
5
"#$%"& !&
""
*
*
7 + ! 8 "
! 8 "
?0
+ " #
9
% 1
@ @
A0 !
! ! # ! " +
" "
! / ! 0
B0 + ! ! , - $ ( !
! ! - "
" # "
C0 + -
9 !
"
D0 ) !
" #
" "
"
E0 ) ! (
# 7 ! %
- " 1 !
#
/ " 0
>0 # (
!
" !
$ "
" "
F0 ) &&
G " / < ! 0
!
H0 # .
+ " 7 + 3 %
! = I
< $ # 3
" !
< :
# ! 5! + + "
+ $ ! 4
! ! J
(
,
44 # 4 # 4 4
,
44 B 4 %#4 "
,
44 4
,
44 %# #
,
44
,
44
,
44
,
44 4
,
44 %# :
,
44 !
,
44 /. 0
,
44 "
,
44 4 4 4 "
,
44
,
44 !
,
44 4 4 4
,
44
,
44 - %# " 4 # J K
,
44 "
,
44 "#
.$ & &
L ! / 4 4 ! 0
L $ +"
/ 4 4 0
L 7 / 4 4 0
L / % 4
7 +4 0
L $ / % 47 +4 0
L 3"
" )
/ 4 4"
" 0
&
) &5
3 -% 139 9 5
= I +1 !
; ; "& ! ; "#
L 2G !
L 8 " ! &(
" 3 9 M FDE & (+
25
1 !< 1 $&
( 1 ! & ($ " 7 3
3 ) :
) # /(
' ! (
N % K@CAD@ K@BDM@ON K@ ! @
! K@ ,
44 4!4CE)P H (;7 @
ON4 ON
K@ @! K@ @ON4 ON
K@ ,
44 4!4
CE)P H (;7 @ K@ 4#- !-
" @ K@ @ K@CAD@ K@
BDM@
ON4 ON4 % O
# 0 &&
* ( "
&! - !
" !
" 0
• &! !
• &! !
)!
• + !
#
! #
# 8
• + # 5 ! "
" ! "
!
• &! # "
! " " !
/ 0 &
L "
! " 3
1 . 1 ! && ! ! ! 0 1 . ! && !
! !
• "
" 3 % 3 $
# " "
"
9 3 %
# " !
! "
& ! - % ! !
. )"
9 - % 2 . %
5! 9 5 ; ) 7 :
1
<HEAD>
<SCRIPT>
function verifyEmail()
{
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name=”frm1”>
<INPUT type=”text” name=”email” value=”” onChange=”verifyEmail()”>
</FORM>
</BODY>
document.frm1.email.value
(or)
document.forms[0].email.value
(or)
document.forms[0].fields[0].value
(or)
document.getElementById(“email’).value
" 21
" " ( )2 3 %
23 2 3 % B1 " "
$+ ! " ( ) ( )
21 3
!"
( )23 2 ( )23 5 ( )23 ( )23 )
( )23
" # 23 % ,
( )23 2
5 " 1 1
L #
( )23 2 "
/0 5 /0 # /0 /0 ( )/0
( )23
L # #
( )23 2 "
1 /0 5 9 /0 !1 1 /0 9 " /0
1 .
/ 0 $+ " "
0*" " ( )
" ! . $
<1 - ! -
Method Description
abort() 1
8
7
getAllResponseHeaders() ". $
7 ! "
getResponseHeader( headerName ) " . $
!
! "@ 5 @
@
$3 @ @.5 2@
@
$ @@ 25)5 5@
! "
. $
B1
"
7)
!
7)
@ @
"
8
Q@ @
" /0
"
@
" @
"
"
send( content ) 8
4
!
setRequestHeader( label, value ) . $
Property Description
MK : ?K AK BK !
CK
responseText 7
7 ( )
responseXML ( ) % #
B1 23
statusText 7 / @ ; @
@
3G@
0
! # . K ! (3 % /R # A( ). $S
06
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
function validate()
{
alert("validate");
createXMLHttpRequest();
alert("xml");
var date = document.getElementById("birthDate");
alert("date"+date);
var url = "./validationServlet?birthDate="+escape(date.value);
xmlHttp.onreadystatechange = callback;
alert("callback handler registered");
xmlHttp.open("GET", url, true);
alert("open");
xmlHttp.send("");
alert("send");
}
function callback()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
var mes =
xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var val=xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
var messageArea = document.getElementById("dateMessage");
var fontColor = "red";
if (val == "true")
{
fontColor = "green";
}
messageArea.innerHTML="<font color="+fontColor+">"+mes +"</font>";
}
}
}
</script>
</head>
web.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<servlet>
<servlet-name>validationServlet</servlet-name>
<servlet-class>ValidationServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>validationServlet</servlet-name>
<url-pattern>/validationServlet</url-pattern>
</servlet-mapping>
</web-app>
// ValidationServlet.java
import java.io.*;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import javax.servlet.*;
import javax.servlet.http.*;
public class ValidationServlet extends HttpServlet
{
protected void doGet(HttpServletRequest request, HttpServletResponse
response) throws ServletException, IOException
{
PrintWriter out = response.getWriter();
function createXMLHttpRequest() {
// alert("create XML HttpRequest");
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
function doStart() {
// alert("doStart");
createXMLHttpRequest();
var url = "./dynamicUpdateServlet?task=reset";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = startCallback;
xmlHttp.send(null);
}
function startCallback() {
// alert("start callback");
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setTimeout("pollServer()", 5000);
refreshTime();
}
}
}
function pollServer() {
// alert("Poll server");
createXMLHttpRequest();
var url = "./dynamicUpdateServlet?task=foo";
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function refreshTime(){
// alert("refereshTime");
function pollCallback()
{
// alert("pollCallback");
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var message =
xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
if (message != "done") {
var new_row = createRow(message);
var table = document.getElementById("dynamicUpdateArea");
var table_body =table.getElementsByTagName("tbody").item(0);
var first_row =table_body.getElementsByTagName("tr").item(1);
table_body.insertBefore(new_row, first_row);
setTimeout("pollServer()", 5000);
refreshTime();
}
}
}
}
function createRow(message)
{
// alert("create row()");
<body>
<h1>Ajax Dynamic Update Example</h1>
This page will automatically update itself:
<FORM>
<input type="button" value="Launch" name="go" onClick="doStart()"/>
</FORM>
<p>
Page will refresh in <span id="time">5</span> seconds.
<p>
<table id="dynamicUpdateArea" align="left">
<tbody>
<tr id="row0"><td></td></tr>
</tbody>
</table>
</body>
</html>
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<display-name>Welcome to Tomcat</display-name>
<description>
Welcome to Tomcat
</description>
<servlet>
<servlet-name>dynamicUpdateServlet</servlet-name>
<servlet-class>DynamicUpdateServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>dynamicUpdateServlet</servlet-name>
<url-pattern>/dynamicUpdateServlet</url-pattern>
</servlet-mapping>
<!-- JSPC servlet mappings end -->
</web-app>
// DynamicUpdateServlet.java
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class DynamicUpdateServlet extends HttpServlet {
private int counter = 1;
/** Handles the HTTP <code>GET</code> method.
* @param request servlet request
* @param response servlet response
*/
protected void doGet(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
String res = "";
String task = request.getParameter("task");
String message = "";
if (task.equals("reset")) {
counter = 1;
} else {
switch (counter) {
case 1: message = "Steve walks on stage"; break;
case 2: message = "iPods rock"; break;
case 3: message = "Steve says Macs rule"; break;
case 4: message = "Change is coming"; break;
case 5: message = "Yes, OS X runs on Intel - has for years"; break;
case 6: message = "Macs will soon have Intel chips"; break;
case 7: message = "done"; break;
}
counter++;
}
res = "<message>" + message + "</message>";
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}
}
<script type="text/javascript">
var xmlHttp;
function retrieveCountries()
{
createXMLHttpRequest();
var continent = document.getElementById("continent");
var url = "./retrieveServlet?continent="+continent;
xmlHttp.onreadystatechange = countriesCallback;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function retrieveCities()
{
createXMLHttpRequest();
var country = document.getElementById("countries");
var url = "./retrieveServlet?country="+country;
xmlHttp.onreadystatechange = citiesCallback;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function retrieveLocations()
{
createXMLHttpRequest();
var city = document.getElementById("city");
var url = "./retrieveServlet?city="+city;
xmlHttp.onreadystatechange = locationsCallback;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function countriesCallback()
{
if (xmlHttp.readyState == 4)
{
alert("4");
if (xmlHttp.status == 200)
{
alert("200");
var response=xmlHttp.responseXML.getElementsByTagName("country");
alert(response);
var countriesList=document.getElementById("countriesList");
var str="Select Country <SELECT name=' countries'onchange=' retrieveCities()'
>";
var len=response.length;
alert(len);
var i=0;
for(i=0;i<len;i++)
{
var data=response[i].firstChild.data;
alert(data);
str+="<OPTION value="+data+">"+data+"</OPTION>";
}
str+="</SELECT>";
countriesList.innerHTML=str;
}
}
}
function citiesCallback()
{
if (xmlHttp.readyState == 4)
{
alert("4");
if (xmlHttp.status == 200)
{
alert("200");
var response=xmlHttp.responseXML.getElementsByTagName("city");
alert(response);
var countriesList=document.getElementById("citiesList");
var str="Select City <SELECT name=' cities'onchange='retrieveLocations()'
>";
var len=response.length;
alert(len);
var i=0;
for(i=0;i<len;i++)
{
var data=response[i].firstChild.data;
alert(data);
str+="<OPTION value="+data+">"+data+"</OPTION>";
}
str+="</SELECT>";
countriesList.innerHTML=str;
}
}
}
function locationsCallback()
{
alert("locationsCallabck");
if (xmlHttp.readyState == 4)
{
alert("4");
if (xmlHttp.status == 200)
{
alert("200");
var response=xmlHttp.responseXML.getElementsByTagName("location");
alert(response);
var countriesList=document.getElementById("locationList");
var str="Select Location <SELECT name='locations'onchange=''
>";
var len=response.length;
alert(len);
var i=0;
for(i=0;i<len;i++)
{
var data=response[i].firstChild.data;
alert(data);
str+="<OPTION value="+data+">"+data+"</OPTION>";
}
str+="</SELECT>";
countriesList.innerHTML=str;
}
}
}
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
</script>
</head>
<body>
<h1>Ajax Countries,Cities,Location Retrieval Example</h1>
Select Continent
<SELECT name="continents" onchange="retrieveCountries()">
<OPTION value="Asia">Asia</OPTION>
<OPTION value="MiddleEast">MiddleEast</OPTION>
<OPTION value="NorthAmerica">NorthAmerica</OPTION>
<OPTION value="SouthAmerica">SouthAmerica</OPTION>
<OPTION value="Europe">Europe</OPTION>
</SELECT>
<div id="countriesList">
</div>
<div id="citiesList">
</div>
<div id="locationList">
</div>
</html>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-
app_2_4.xsd">
<servlet>
<servlet-name>retrieveServlet</servlet-name>
<servlet-class>RetrieveServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>retrieveServlet</servlet-name>
<url-pattern>/retrieveServlet</url-pattern>
</servlet-mapping>
<login-config>
<auth-method>BASIC</auth-method>
</login-config>
</web-app>
// RetrieveServlet
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
response.setContentType("text/xml");
PrintWriter out = response.getWriter();
if(request.getParameter("continent")!=null &&
request.getParameter("continent").length()!=0)
{
String continent=request.getParameter("continent");
out.println("<countries>");
out.println("<country>INDIA</country>");
out.println("<country>PAKISTAN</country>");
out.println("<country>Bangladesh</country>");
out.println("<country>Singapore</country>");
out.println("<country>Malaysia</country>");
out.println("</countries>");
}
else if(request.getParameter("country")!=null &&
request.getParameter("country").length()!=0)
{
String country=request.getParameter("country");
out.println("<cities>");
out.println("<city>HYDERABAD</city>");
out.println("<city>Delhi</city>");
out.println("<city>Mumbai</city>");
out.println("<city>Chennai</city>");
out.println("<city>Calcutta</city>");
out.println("</cities>");
}
else if(request.getParameter("city")!=null &&
request.getParameter("city").length()!=0)
{
String country=request.getParameter("city");
out.println("<locations>");
out.println("<location>Ameerpet Galli</location>");
out.println("<location>Charminar</location>");
out.println("<location>Tankbund</location>");
out.println("<location>Zoo park</location>");
out.println("<location>Kutub Shahi Tombs</location>");
out.println("<location>Golconda Tombs</location>");
out.println("</locations>");
}
}
}
2 42 & & !5
2 7 # " ! - &! % &!
2 7 " " &( 8 -
" " !
( ). 7 8 % ! = *
% : %
( ) = * ! ! &( 8
%! %
2 7 ! L #
! " % ,
; " # 2 7 &!
&! "
&!
" ( ). 78 8
2 7 !
8 ! -
&! % < !
! &! 2 7 ! &!
" " +
2 . / 0
! "& ! - -
o 2% "
o
: "2 % "
o 3 "2 %<
2% !
" ! "& ! !
2% "& !
!
! " ,
o
o A-2
o "
" " " "
"
"
o ! !
o L " " " ! "
o -
o #
$
o dojo.gfx ! ! ! %
"L L )
o dojo.lfx "
"
o % # $ %
#
" @ @ 2% - !
" ! "
&!
! " !
&
"
5 # # "
. ) ! , #
2% # # " "
" % "
"
+ % . ) " ,
Flags
6 " ) '. "7
.5 , - 8 ! *
6' 7
. " . 9"
. " . 9"
. " . 9"
6' 7
%! < @ @ = " !
. ! <
# / - % 0
" " " "
Layout widgets
Accordion
Content Pane
Dialog
Layout
Layout Container
Rounded Corners
Split Container
Tab Container
TitlePane
Taskbar & Windows (Floating Panes)
Wizard
Form widgets
FormTour
Validation
General Widgets
AJAX-JSF