Ajax Design Patterns

Open-Source Software Project Development
Instructor: Dr. T.Y. Wong
Week 6, part 2
AJAX Design Pattern
AJAX Design Patterns
• Let’s learn through some interesting examples!
• Example 1: Widgets
– Technique involved: DOM Scripting & Event Handling.
– Content may require iFrame or XMLHttpRequest to
display.
http://appsrv.cse.cuhk.edu.hk/~csc4140/cgi-bin/week06_part2/widget/picture.html
Awful picture viewer
http://appsrv.cse.cuhk.edu.hk/~csc4140/cgi-bin/week06_part2/widget/page.html
A mini-browser, with iFrame

Spring semester CSC4140 – Open-Source Page 2
2008-2009 Software Project Development
Widgets
• You’d like to drag-and-drop the widgets.
But, how?
Events on mouse action:
When you press the mouse down, the
“mousedown” event will be triggered. mousedown
mouseup
The event object contains many useful event.clientY
mousemove
information:
E.g., “event.currentTarget” is the object mouseover

that the mouse is clicking onto.
mouseout
event.clientX
<DIV>

Widgets
But, how?
[HTMLElement].offsetTop mousedown
mouseup
mousemove
[HTMLElement].offsetLeft mouseover
mouseout
To do the drag, basically, the goal

is to keep the relative distance
between the DIV frame and the <DIV>
mouse unchanged. when the
mouse is moving.
Widgets
But, how?
mouseup mousedown
When the mouseup event is detected,
the DIV should be dropped.
mousemove
It is easy to do…remove the event
listeners! mouseover
mouseout
<DIV>

Widgets
Register the mousedown Memorize the
event for the target DIV relative distance
When the mouse is click Register the mouseup and

on the target DIV… the mousemove events
Uphold the memorized the

When the mouse relative distance by changing
is moving… the position of the DIV.
When the mouse Unregister the mouseup and

is released… the mousemove events.

Code your script in a better way…
• Usually, it’d be perfect to have the
following thing…
Just like #include <......> in C.
<html>
<script language=JavaScript src=HTTP.js></script>
<script language=JavaScript>
var http = new HTTP(); OO-programming…this also
http.get(“hello.txt”); implies the possibility of
alert(http.result); creating more than one
</script> connections easily.
</html>

Class as a library…
• To do this, we need to write a class…
function HTTP() {
this.request = new_request();
Experience sharing this.result = null;
this.syn_get = function(url) {
this.request.open(“GET”, url, false);
Why using another variable ......
“temp”, but no using “this” };
inside the event handler?
var temp = this;
this.asyn_get = function (url) {
......
Because “this” will become this.onreadystatechange = function () {
the “XMLHttpRequest” if(temp.request.status == 200)
object inside the event ......
handler, not the “HTTP” };
......
object.
}

Using Classes…
• In the widget examples, the Class is called
“Menu4140”.
http://appsrv.cse.cuhk.edu.hk/~csc4140/cgi-bin/week06_part2/widget/Menu4140.js
A DOM scripting example class.
http://appsrv.cse.cuhk.edu.hk/~csc4140/cgi-bin/week06_part2/typing/HTTP.js
The HTTP request class.

Example 2: A typing game
• It demonstrates several features
– DOM scripting;
– Periodic interface update;
– Periodic data pre-fetching using
asynchronous HTTP requests.
http://appsrv.cse.cuhk.edu.hk/~csc4140/cgi-bin/week06_part2/typing/
AJAX-based typing game

Typing Game
The remaining-time bar is realized
using setInterval() and DOM The word list is on the server
scripting. side. The PHP program gives
up a random word.
Words will be stored in the

client side so that the pre-
fetched words can provide a
readily-available source of
data.
xxx
Periodic Read
Client Side: index.php Remote side: gen_word.php

Typing Game
The game is played using keyboard. So, the
keypress event is expected.
However, keypress event is only supported

by <body> and form elements.
So, we use a trick in the implementation…
keypress event
xxx
Client Side: index.php

http://appsrv.cse.cuhk.edu.hk/~csc4140/cgi-bin/week06_part2/widget/code_viewer.php
http://appsrv.cse.cuhk.edu.hk/~csc4140/cgi-bin/week06_part2/typing/code_viewer.php
Please use the code viewer program to read the source.


Ajax Design Patterns

Uploaded by

Document Information

Original Description:

Original Title

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

Ajax Design Patterns

Uploaded by

Copyright:

Available Formats

Open-Source Software Project Development

Instructor: Dr. T.Y. Wong

Awful picture viewer

A mini-browser, with iFrame

E.g., “event.currentTarget” is the object mouseover

Spring semester CSC4140 – Open-Source Page 3

To do the drag, basically, the goal

Spring semester CSC4140 – Open-Source Page 5

When the mouse is click Register the mouseup and

Uphold the memorized the

When the mouse Unregister the mouseup and

Spring semester CSC4140 – Open-Source Page 6

Spring semester CSC4140 – Open-Source Page 7

Spring semester CSC4140 – Open-Source Page 8

A DOM scripting example class.

The HTTP request class.

Spring semester CSC4140 – Open-Source Page 9

AJAX-based typing game

Spring semester CSC4140 – Open-Source Page 10

Words will be stored in the

Client Side: index.php Remote side: gen_word.php

Spring semester CSC4140 – Open-Source Page 11

However, keypress event is only supported

So, we use a trick in the implementation…

Client Side: index.php

Spring semester CSC4140 – Open-Source Page 12

Please use the code viewer program to read the source.

Spring semester CSC4140 – Open-Source Page 13

You might also like