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
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Σχόλια 0
Συνδεθείτε για να κοινοποιήσετε σχόλιο