AJEX Essential 1.0 Tutorial

8/14/2019 AJEX Essential 1.0 Tutorial

1/45

!!!!

!

"

# "

!$!%#

"&!'() ""*

%#* +* ! "

"%#,

-(.)/.)01/"0


2/45

23%/"444! % /5)55

#00

()()6 !().786 &!"!".).)

UI AJAX

EngineDB

HTML, CSS

Javascript call HTTP request

Data


3/45

%# !!"""!

!!#

+ " 88"!&(!

*!!&(

#+/0&(+"

5 +! 25 9" + + ! % + 9"+&( 9+ 9"+" 9++"

:: +" 7+;


4/45

!9 2 ;"/0

9 7)


5/45

!#!


6/45

B0+!!,-$(!

!!-"

"#"

C0+-

9!

"

D0)!

"#

""

"

E0)!(

#7!%-"1!

#

/"0

>0#(

!

"!

$"

""

F0)&&

G"/


7/45


8/45


9/45


10/45


11/45


12/45

(

,44#4#44

,44B4%#4",444,44%##

,44,44,44

,444,44%#:,44!,44/.0

,44",44444",44

,44!

,44444,44,44-%#"4#JK

,44",44"#

.$&&

L!/44!0L$+"

/440

L7/440L/%47+40L$/%47+40


13/45

L3"")

/44""0

& )&5 3-%13995

=I+1! ;;"&!;"# L2G! L8"!&( "39MFDE&(+25 1!


14/45

"0

&!! &! !

)!

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

!& + #

+ !

# ! #

#8

+#5!" " ! "

! &! # "

!" " ! / 0 &L "

!"31. 1 !&&! !! 0 1. !&&!!!

"" 3% 3 $ # " " "

93%

#"!!"

&!-%!!.)"

9-%2.% 5! 95;)7:1

function verifyEmail()

{}


15/45

document.frm1.email.value

(or)

document.forms[0].email.value

(or)document.forms[0].fields[0].value

(or)

document.getElementById(email).value

"21

""()23%

23 2 3% B1 " " $+!"()()213

!"

()232 ()235 ()23 ()23)()23

"#23%,

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

()2325 "1 1 L#

()232"

/05/0#/0/0()/0

()23L##

()232"

1/059/0!11/09"/01.

/ 0 $+ " "0*""()"!.$


16/45

abort() 18

getAllResponseHeaders() 7".$

getResponseHeader( headerName )7!"".$

open( method, URL )open( method, URL, async )

open( method, URL, async, userName )open( method, URL, async, userName, password )

"

7)

"

8

!!"@5@@$3@@.52@

@$@@25)55@

!".$B1

"

7)

!

7)

@@"

8

Q@@

"/0

"@"@

""


17/45

send( content ) 8

setRequestHeader( label, value )

4!

.$

Property Description

onreadystatechange!"!"!

readyState 7"%",

MK:?KA KBK!

CK

responseText 7

responseXML

7 ()

()%# B1 23

status 7 / CMC " @;@AMM"@3G@0

statusText 7 / @ ;@ @3G@0

!#.K!(3%/R#A().$S06

Ex#1: Example on Field validation


18/45

Validation.html

Using Ajax for validation

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


19/45

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=""+mes +"";}

}

}

Ajax Validation Example

Birth date:

web.xml


20/45

validationServletValidationServlet

validationServlet

/validationServlet

// 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.";


21/45

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("");

out.println("" + Boolean.toString(passed) + "");

out.println("" + message + "");

out.println("");

out.close();

}// doGet()

}// clas

Ex#2: Example on Dynamic news updation

Ajax Dynamic Update

var xmlHttp;

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.onreadystatechange = startCallback;xmlHttp.send(null);

}

function startCallback() {// alert("start callback");

if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {

setTimeout("pollServer()", 5000);

refreshTime();}


22/45

}

}

function pollServer() {

// alert("Poll server");


var url = "./dynamicUpdateServlet?task=foo";xmlHttp.open("GET", url, true);

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


23/45

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;

}

Ajax Dynamic Update Example

This page will automatically update itself:

Page will refresh in 5 seconds.


24/45

Welcome to Tomcat

Welcome to Tomcat

dynamicUpdateServlet

DynamicUpdateServlet

dynamicUpdateServlet/dynamicUpdateServlet


25/45

// 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 GET 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 + "";



response.setHeader("Cache-Control", "no-cache");

out.println("");

out.println(res);

out.println("");

out.close();

}

}

Ex#3: Example on Dynamic news updationCountriesList.html


26/45

Using Ajax for validation

var xmlHttp;

function retrieveCountries()

{

createXMLHttpRequest();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()

{



27/45

var city = document.getElementById("city");var url = "./retrieveServlet?city="+city;

xmlHttp.onreadystatechange = locationsCallback;


xmlHttp.send(null);

}

function countriesCallback()

{

if (xmlHttp.readyState == 4)

{alert("4");


{

alert("200");

var response=xmlHttp.responseXML.getElementsByTagName("country");

alert(response);

var countriesList=document.getElementById("countriesList");

var str="Select Country ";var len=response.length;

alert(len);

var i=0;

for(i=0;i


28/45

var data=response[i].firstChild.data;alert(data);

str+=""+data+"";

}

str+="";

countriesList.innerHTML=str;

}}

}

function locationsCallback(){

alert("locationsCallabck");

if (xmlHttp.readyState == 4)

{

alert("4");


{

alert("200");var response=xmlHttp.responseXML.getElementsByTagName("location");

alert(response);

var countriesList=document.getElementById("locationList");

var str="Select Location ";

var len=response.length;

alert(len);

var i=0;

for(i=0;i


29/45

Select Continent

Asia

MiddleEast

NorthAmerica

SouthAmericaEurope

web.xml

retrieveServlet

RetrieveServlet

retrieveServlet

/retrieveServlet

BASIC

// RetrieveServletimport java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;


30/45

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("");

out.println("INDIA");

out.println("PAKISTAN");

out.println("Bangladesh");

out.println("Singapore");

out.println("Malaysia");out.println("");

}

else if(request.getParameter("country")!=null &&

request.getParameter("country").length()!=0)

{

String country=request.getParameter("country");

out.println("");

out.println("HYDERABAD");

out.println("Delhi");

out.println("Mumbai");

out.println("Chennai");

out.println("Calcutta");out.println("");

}

else if(request.getParameter("city")!=null &&

request.getParameter("city").length()!=0)

{

String country=request.getParameter("city");

out.println("");

out.println("Ameerpet Galli");

out.println("Charminar");

out.println("Tankbund");

out.println("Zoo park");

out.println("Kutub Shahi Tombs");out.println("Golconda Tombs");

out.println("");

}

}}

+"&(", 23&3


31/45

9 $""1! /0 = 27 &3242&&!5

27 #"!-&!% &!27""&(8-

""!().78%!=*

%:%

()=*! !&(8 %!%

27 !L #

!"%, ; " # 27 &! &!" &! "().78827! 8!-&!%


32/45

o !!o L"""!"o -o # $o dojo.gfx ! ! ! %

"LL)o dojo.lfx""o %#$%#

"@@2%-!

" ! " &!

Click me

!"!

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

&

"

5

5 # # "

.)!,#

2%##""

" % "

"

How to use DOJO in a HTML file

+%.)",

Flags

6")'."7

.5,-8!*

6'7

" !"%6 " ! 2


33/45

Include dojo bootstrap

Defining what resources you are using

6")'."7

.".9"

.".9"

.".9"

6'7

%!


34/45

Offline Storage

Layout widgets

Accordion


35/45

Content Pane

Dialog


36/45

Layout

Layout Container


37/45

Rounded Corners

Split Container


38/45

Tab Container

TitlePane


39/45

Taskbar & Windows (Floating Panes)


40/45

Wizard

Form widgets

Checkbox, CiviCrmDateTimePicker, ColorPallette


41/45

DatePicker

FormTour

Validation


42/45

General Widgets


43/45


44/45

AJAX-JSF


45/45

AJEX Essential 1.0 Tutorial

Documents

Transcript of AJEX Essential 1.0 Tutorial