Vous êtes sur la page 1sur 13

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>

Spring semester CSC4140 – Open-Source Page 3


2008-2009 Software Project Development
Widgets
• You’d like to drag-and-drop the widgets.
But, how?
Events on mouse action:

[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.
Spring semester CSC4140 – Open-Source Page 4
2008-2009 Software Project Development
Widgets
• You’d like to drag-and-drop the widgets.
But, how?
Events on mouse action:

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>

Spring semester CSC4140 – Open-Source Page 5


2008-2009 Software Project Development
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.

Spring semester CSC4140 – Open-Source Page 6


2008-2009 Software Project Development
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>

Spring semester CSC4140 – Open-Source Page 7


2008-2009 Software Project Development
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.
}

Spring semester CSC4140 – Open-Source Page 8


2008-2009 Software Project Development
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.

Spring semester CSC4140 – Open-Source Page 9


2008-2009 Software Project Development
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

Spring semester CSC4140 – Open-Source Page 10


2008-2009 Software Project Development
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

Spring semester CSC4140 – Open-Source Page 11


2008-2009 Software Project Development
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

Spring semester CSC4140 – Open-Source Page 12


2008-2009 Software Project Development
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.

Spring semester CSC4140 – Open-Source Page 13


2008-2009 Software Project Development