AJEX Essential 1.0 Tutorial

!
!
"
# "
! $ ! %#
" &! '( ) " " *
%# * +* ! "
" %# ,
- (. )/ . ) 0
1 / " 0
2 3 % / "
4 4 4 ! % /5)5 5
#0 0
( ) ( )6
! ( ). 78 6
&! " ! " . ) . )
Javascript call HTTP request
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
; 9 &( " ; "#

9
2%
2 7
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
• &! !
• &! !
)!
' ! & 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 % ,
var objDoc = new ActiveXObject("Microsoft.XMLDOM");
( )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 ) " . $
open( method, URL ) "

open( method, URL, async ) 7)
open( method, URL, async, userName )
open( method, URL, async, userName, password ) "
8
!
! "@ 5 @
@
$3 @ @.5 2@
@
$ @@ 25)5 5@
! "
. $
B1
"
7)
!
7)
@ @
"
8
Q@ @
" /0
"
@
" @
"
"
send( content ) 8
4
!
setRequestHeader( label, value ) . $
Property Description
onreadystatechange ! " ! " !
readyState 7 " % " ,
MK : ?K AK BK !
CK
responseText 7
7 ( )
responseXML ( ) % #
B1 23
status 7 / CMC " @

; @ AMM" @
3G@
0
statusText 7 / @ ; @
@
3G@
0
! # . K ! (3 % /R # A( ). $S
06
Ex#1: Example on Field validation

Validation.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Using Ajax for validation</title>
<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>
<body onLoad="alert(' Hello')">

<h1>Ajax Validation Example</h1>
Birth date: <input type="text" size="10" name="birthDate" onChange="validate()"/>
<div id="dateMessage"></div>
</body>
</html>
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();
// reading date from AJAX client

String date=request.getParameter("birthDate").trim();
// create one DateFormat class instance for verifying date

SimpleDateFormat formatter= new SimpleDateFormat("MM/dd/yyyy");
// this var will hold the status of the date validation

boolean flag=false;
try
{
// parsing date into desired format
formatter.parse(date);
// if successful, initialize flag to true

flag=true;
}
catch(Exception e){
// otherwise flag to false
flag=false;
}
// setting MIME type

response.setContentType("text/xml");
// setting response header to inform to the browser not to cache the

response
response.setHeader("Cache-Control", "no-cache");
// This message goes to server if date is invalid

String message = "You have entered an invalid date.";
if (flag) {
// This message goes to server if date is valid
message = "You have entered a valid date.";
}
// Here we are sending response

out.println("<response>");
out.println("<passed>" + Boolean.toString(passed) + "</passed>");
out.println("<message>" + message + "</message>");
out.println("</response>");
out.close();
}// doGet()
}// clas
Ex#2: Example on Dynamic news updation

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Dynamic Update</title>
var xmlHttp;
function createXMLHttpRequest() {
// alert("create XML HttpRequest");
if (window.ActiveXObject) {
}
function doStart() {
// alert("doStart");
var url = "./dynamicUpdateServlet?task=reset";
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");
var url = "./dynamicUpdateServlet?task=foo";
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
function refreshTime(){
// alert("refereshTime");
var time_span = document.getElementById("time");

var time_val = time_span.innerHTML;
var int_val = parseInt(time_val);

var new_int_val = int_val - 1;
if (new_int_val > -1) {
setTimeout("refreshTime()", 1000);
time_span.innerHTML = new_int_val;
}
else
{
time_span.innerHTML = 5;
}
}
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()");
var row = document.createElement("tr");

var cell = document.createElement("td");
var cell_data = document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
</script>
</head>
<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>

</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>";
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}
}
Ex#3: Example on Dynamic news updation

CountriesList.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Using Ajax for validation</title>
var xmlHttp;
function retrieveCountries()
{
var continent = document.getElementById("continent");
var url = "./retrieveServlet?continent="+continent;
xmlHttp.onreadystatechange = countriesCallback;
xmlHttp.send(null);
}
function retrieveCities()
{
var country = document.getElementById("countries");
var url = "./retrieveServlet?country="+country;
xmlHttp.onreadystatechange = citiesCallback;
xmlHttp.send(null);
}
function retrieveLocations()
{
var city = document.getElementById("city");
var url = "./retrieveServlet?city="+city;
xmlHttp.onreadystatechange = locationsCallback;
xmlHttp.send(null);
}
function countriesCallback()
{
{
alert("4");
{
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()
{
{
alert("4");
{
alert("200");
var response=xmlHttp.responseXML.getElementsByTagName("city");
alert(response);
var countriesList=document.getElementById("citiesList");
var str="Select City <SELECT name=' cities'onchange='retrieveLocations()'
>";
alert(len);
var i=0;
for(i=0;i<len;i++)
{
alert(data);
}
str+="</SELECT>";
}
}
}
function locationsCallback()
{
alert("locationsCallabck");
{
alert("4");
{
alert("200");
var response=xmlHttp.responseXML.getElementsByTagName("location");
alert(response);
var countriesList=document.getElementById("locationList");
var str="Select Location <SELECT name='locations'onchange=''
>";
alert(len);
var i=0;
for(i=0;i<len;i++)
{
alert(data);
}
str+="</SELECT>";
}
}
}
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
}
}
</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>
<IFRAME frameborder="1" marginheight="10" marginwidth="10" height="100" width="200"

scrolling="auto" src="./ActiveNET_logo3.jpg">
</IFRAME>
</body>
</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;
public class RetrieveServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {
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>");
}
}
}
+ " &( " ,

23&
3
9
$ " " 1 !
/ 0
=
2 7
&3
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% - !
" ! "
&!
<button dojoType="Button" id="foo"> Click me </button>
! " !
var myButton = dojo.widget.byId("foo");
&
"
5 # # "
. ) ! , #
2% # # " "
" % "
"
How to use DOJO in a HTML file
+ % . ) " ,
Flags
6 " ) '. "7
.5 , - 8 ! *
6' 7
" ! " %6 " ! 2

Include dojo bootstrap
<script type="text/javascript" src="/path/to/dojo/dojo.js"></script>
Defining what resources you are using

6 " ) '. "7
. " . 9"
. " . 9"
. " . 9"
6' 7
%! < @ @ = " !
. ! <
# / - % 0
" " " "
Various components in DOJO
Fade, Wipes and Sliders etc
Drag and Drop, Drag and Move, Drag and Handler

Offline Storage
Layout widgets
Accordion
Content Pane
Dialog
Layout
Layout Container
Rounded Corners
Split Container
Tab Container
TitlePane
Taskbar & Windows (Floating Panes)
Wizard
Form widgets
Checkbox, CiviCrmDateTimePicker, ColorPallette

DatePicker
FormTour
Validation
General Widgets
AJAX-JSF

AJEX Essential 1.0 Tutorial

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

AJEX Essential 1.0 Tutorial

Uploaded by

Copyright:

Available Formats

!

Javascript call HTTP request

; 9 &( " ; "#

' ! & 0 ) & ! & 0 ) & -'

var objDoc = new ActiveXObject("Microsoft.XMLDOM");

open( method, URL ) "

onreadystatechange ! " ! " !

readyState 7 " % " ,

status 7 / CMC " @

Ex#1: Example on Field validation

<body onLoad="alert(' Hello')">

// reading date from AJAX client

// create one DateFormat class instance for verifying date

// this var will hold the status of the date validation

// if successful, initialize flag to true

// setting MIME type

// setting response header to inform to the browser not to cache the

// This message goes to server if date is invalid

// Here we are sending response

Ex#2: Example on Dynamic news updation

var time_span = document.getElementById("time");

var int_val = parseInt(time_val);

var row = document.createElement("tr");

Ex#3: Example on Dynamic news updation

<IFRAME frameborder="1" marginheight="10" marginwidth="10" height="100" width="200"

public class RetrieveServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

+ " &( " ,

<button dojoType="Button" id="foo"> Click me </button>

var myButton = dojo.widget.byId("foo");

How to use DOJO in a HTML file

" ! " %6 " ! 2

<script type="text/javascript" src="/path/to/dojo/dojo.js"></script>

Defining what resources you are using

Various components in DOJO

Fade, Wipes and Sliders etc

Drag and Drop, Drag and Move, Drag and Handler

Checkbox, CiviCrmDateTimePicker, ColorPallette

You might also like