Chapter 9 – Java Script , j Query , and AJAX - Building Clo ud ...

huddleclergymanΛογισμικό & κατασκευή λογ/κού

2 Ιουλ 2012 (πριν από 5 χρόνια και 2 μήνες)

345 εμφανίσεις



1


Chapter
9

–

JavaScript,
jQuery,
and
AJAX




Building
Clo
ud
Applications
with
Google
App
Engine


Charles
Severance






In
this
chapter
we
will
improve
the
interactivity
of
our
application
using
some

simple
AJAX
(Asynchronous
JavaScript
and
XML)
support
to
our
ap
plication.

AJAX

allows
us
to
update
parts
of
the
screen.

Increasing
use
of
AJAX
has
allows
web

applications
to
approach
the
rich
flexibility
of
Desktop
applications.




If
we
look
at
the
Chat
screen,
we
see
an
area
that
changes
on
each
screen
refresh
and

a
n
area
that
stays
constant
on
each
screen
refresh:








We
will
use
AJAX
to
update
the
outlined
area
without
updating
the
overall
screen.




jQuery




AJAX
has
been
evolving
since
Microsoft
introduced
the
first
form
of
AJAX

(
XMLHttpRequest

)
in
1999.

In
the
ea
rly
days,
AJAX
and
JavaScript
and
the

browsers
support
for
the
document
object
model
(DOM)
were
very
much
in
flux
and

it
took
quite
a
bit
of
effort
to
keep
one’s
AJAX
code
working
over
successive
releases

of
many
browsers
over
time.




As
widely
used
applica
tions
such
as
Google
Mail
made
increasing
use
of
AJAX,
it

caused
browsers
support
for
AJAX
to
improve
over
time.

Also
libraries
were

produced
that
shielded
the
typical
developer
from
cross
‐
browser
differences.

These

two
trends
have
combined
to
make
the
u
se
of
AJAX
relatively
straightforward
and

something
that
can
be
integrated
into
a
wide
range
of
applications
to
improve
the

usability
of
those
applications.






2


One
of
the
more
popular
of
these
AJAX/JavaScript
libraries
is
called
jQuery
and

available
from:




h
ttp://jquery.com/



To
add
jQuery
to
your
application,
download
the
jQuery
JavaScript
code
and
install

it
in
your
static
folder
as
follows:










Then
edit
your

templates/_base.htm

file
to
include
the
jQuery
library:



<!DOCTYPE html PUBLIC "
-
//W3C//DTD XHTML
1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>App Engine
-
HTML</title>

<link href="/static/glike.css" rel="stylesheet" type="text/css" />

<script type="text/javas
cript"

src="/static/js/jquery
-
1.2.6.min.js"></script>

</head>

<body>



Create
a
View
of
the
Chat
Messages
in
HTML




Since
we
will
be
replacing
a
portion
of
our
page,
we
need
a
URL
that
will
generate
an

HTML
fragment
consisting
of
the
chat
messa
ges.
We
don’t
want
any
header

information
or
body
tags

–

we
just
want
a
fragment
of
HTML.




Create
a
template
in

me
ssagelist
.htm

that
looks
as
follows:




{% for chat in chat_list %}

<p>

{{ chat.text }} ({{ chat.user.account }})

{{ chat.created|d
ate:"D d M Y" }}

</p>

{% endfor %}



This

chatlist.htm

template

does
not

extend
the

_base.htm

file.

The

chatlist.htm


template
will
not
generate
the
HTML
for
the
header
or
navigation.



This
is
simply

the

for

loop
which
we
used
to
display
the
chat
messa
ges
in
the

chatscreen.htm


template
in
the
previous
version
of
the
program.






3


We
also
need
to
add
a
new
route
mapping
the

/messages

url
to
our

MessagesHandler()
:




def main():

application = webapp.WSGIApplication([

('/login', LoginHandler),

('/log
out', LogoutHandler),

('/apply', ApplyHandler),

('/members', MembersHandler),

('/chat', ChatHandler),

('/messages', MessagesHandler),

('/.*', MainHandler)],


debug=True)

wsgiref.handlers.CGIHandler().run(application)




The
cod
e
in
the

MessagesHandler()

is
very
simple

–

retrieve
the
messages
from
the

data
store
and
pass
the
message
list
into
the

messages.htm

template:




class MessagesHandler(webapp.RequestHandler):


def get(self):

que = db.Query(
ChatMessage
).order(
'
-
created
'
);

chat_list = que.fetch(limit=100)

doRender(self, 'messagelist
.
htm', {'chat_list': chat_list})



This
code
is
moved
from
the

ChatHandler

get()


method
in
the
previous
version
of

the
program.

Since
the

chat
screen
.htm

template
no
longer
displays
th
e
list
of

messages,
there
is
no
need
to
retrieve
the
list
of
chat
messages
and
place
them
in
the

render
variables
when
rendering
the

chat
screen
.htm

template.






Removing
the
message
retrieval
code
from
the

ChatHandler

leaves
the

get()


method
very
simple:




class ChatHandler(webapp.RequestHandler):


def get(self):

doRender(self, 'chatscreen.htm')



def post(self):

self.session = Session()

# …



Once
the

MessagesHandler()

and
routing
for
the

/messages

url

is
in
place,
we
can

navigate
to
the

/mes
sages

url
and
see
our
HTML
fragment.

Make
sure
that
you

have
logged
in
and
have
a
few
chat
messages
in
the
Datastore.

You
should
see

something
similar
to
the
following:






4






Remember
that
since
this
is
an
HTML
fragment
and
does
not
extend

_base.htm
,
the

c
hat
messages
render
with
no
header,
navigation
or
anything
beyond
the
HTML

fragment
that
contains
the
messages.
1




We
can
view
the
source
of
the
generated
message
list
page
to
verify
this:





<p>

Yes, it was surprisingly easy
-
make sure


to look a
t the key() method (sally)

Wed 31 Dec 2008

</p>

<p>

Have you used a Reference yet? (csev)

Wed 31 Dec 2008

</p>

<p>

Hi there (sally)

Wed 31 Dec 2008

</p>



It
is
simply
an
HTML
fragment.


Now
we
will
edit

chatscreen.h
tm

and
add
the

JavaScript/AJAX
code
to
replace
the
contents
of
a

<div>

with
our
newly
minted

HTML
fragment.




Asynchronously

Updating
a
<div>
Using

AJAX




Next
we
will
do
one
of
the
simplest
AJAX
operations
using
the
jQuery
library

–


periodically
replace
the

contents
of
a
named

<div>

with
data
retrieved
from
a
URL.




We
modify
the

chat
screen
.htm

file
to
remove
the
code
that
displayed
the
list
of

chat
messages
and
replace
it
with
a
named

<div>

and
some
JavaScript/AJAX/jQuery

code:




{% extends "_base.htm" %}




























































1

Technically
the
term
for
this
is
not
AJAX
(Asynchronous
JavaScript
and
XML)

–

but

instead
when
we
retrieve

HTML
fragments
and
use
them
directly
it
is
called
“AHAH”

(Asynchronous
HTML
and
HTTP)




5


{%
block bodycontent %}

<h1>
App Engine
Chat</h1>

<p>

<form method="post" action="/chat">

<input type="text" name="message" size="60"/>

<input type="submit" name="Chat"/>

</form>

</p>

{% ifnotequal error None %}

<p>

{{ error }}

</p>

{% endifnotequal %}

<div id="chatcontent">

Loading...

</div>

<script>

function updateMsg() {


$.
ajax
({



url: "/messages",



cache: false,



success: function(html){



$("#c
hatcontent").html(html);



}



});



setTimeout('updateMsg()', 4000);

}

updateMsg();

</script>

{% endblock %}



There
are
two
important
sections
to
this
code.

The
first
section:




<div id="
chatcontent
">

Loading...

</div>



Defines
a

div

tag
that
indicates
where
in
the
document
to
place
our
HTML
fragment.


We
give
the

div

tag
a
CSS

id
,
and
include
some
default
text
that
will
show
on
the

browser
until
the
HTML
fragment
is
successfully
retrieved.

Another
common

approach
is
to
put
an
animat
ed
GIF
image
that
appears
to
rotate
in
the

div


–

this

displays
until
the

div

is
replaced.




The
second
bit
of
code
is
some
jQuery
and
JavaScript.

At
first
glance,
it
looks
a
little

complex

–

but
is
pretty
simple
and
easily
adapted
to
many
similar
uses:




<s
cript>

function updateMsg() {


$.
AJAX
({



url: "
/messages
",



cache: false,



success: function(html){



$("
#chatcontent
").html(html);



}



6




});



setTimeout('updateMsg()', 4000);

}

updateMsg();

</script>



This
JavaScript
code
creates
a
J
avaScript
function
called

updateM
sg
.
In
the

updateMsg
function
we
make
an
jQuery
AJAX
call
to
retrieve
the
HTML
fragment
at

/messages
.

Once
jQuery
has

received
the

fragment


(success:)

we

use
the
fragment

to

replace
the
HTML
contents
of
the

chatcontent
<div
>
.




After
the
text
is
retrieved
and
placed
in
the

chatcontent

div,
we
set
a
timer
to
call

ourselves
back
every
four
seconds
(4000
milliseconds).




Once
this
is
complete
and
you
navigate
to
the
/chat
page,
you
should
see
the
same

page
as
you
saw
before:








The
difference
is
that
now
the
bottom
half
is
being
retrieved
using
AJAX.

You
may

even
see
the
“Loading…”
flash
for
a
moment
when
the
page
first
draws
before
the

chat
messages
are
retrieved
via
AJAX
and
the
div
is
replaced.




And
more
importantly
if
you
op
en
two
browsers
(i.e.
Safari
and
Firefox)
and
log
in

as
two
different
users
at
the
same
time

–

you
can
actually
chat

–

within
four
seconds

both
windows
will
asynchronously
update
and
show
new
messages

–

even
if
you
are

halfway
through
typing
your
next
mess
age.




If
you
watch
the
log
for
a
while,
you
can
see
the
browser
requesting
the

/messages


url
repeatedly
every
four
seconds
through
AJAX:






7






The
jQuery
library
automatically
appends
a
timestamp
to
the
URL
to
make
sure
that

the
browser
does
not
mistakenly
c
ache
the
URL
(thanks
jQuery).




Summary






This
section
that
shows
you
how
to
using
some
simple
AJAX
and
JavaScript
to

independently
update
an
area
of
the
page
instead
of
the
entire
page.

In
addition,
we

can
update
a
portion
of
the
page
in
the
background
us
ing
a
timer
to
simulate
the

appearance
of
pushed
information.






This
allows
us
to
enhance
the
usability
of
our
application
and
make
it
seem
more

desktop
‐
like.

This
is
a
very
simple
use
of
and
only
scratches
the
surface
of
AJAX
and

JavaScript
for
your
web

application.






This
material
is
Copyright
2009
All
Rights
Reserved

–

Charles
Severance




Comments
and
questions
to
csev@umich.edu
www.dr
‐
chuck.com