Ajax Design Patterns
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Ajax Design Patterns as PDF for free.
More details
- Words: 679
- Pages: 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 2008-2009
CSC4140 – Open-Source Software Project Development
Page 2
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. mouseup
The event object contains many useful information:
event.clientY
mousedown
mousemove mouseover
E.g., “event.currentTarget” is the object that the mouse is clicking onto.
mouseout event.clientX
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 2008-2009
CSC4140 – Open-Source Software Project Development
Page 2
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. mouseup
The event object contains many useful information:
event.clientY
mousedown
mousemove mouseover
E.g., “event.currentTarget” is the object that the mouse is clicking onto.
mouseout event.clientX
Spring semester 2008-2009
CSC4140 – Open-Source Software Project Development
Page 3
Widgets • You’d like to drag-and-drop the widgets. But, how?
Events on mouse action:
[HTMLElement].offsetTop
mouseup
mousedown
mousemove mouseover
[HTMLElement].offsetLeft
mouseout
To do the drag, basically, the goal is to keep the relative distance between the DIV frame and the mouse unchanged. when the mouse is moving. Spring semester CSC4140 – Open-Source 2008-2009
Software Project Development
CSC4140 – Open-Source Software Project Development
Page 3
Widgets • You’d like to drag-and-drop the widgets. But, how?
Events on mouse action:
[HTMLElement].offsetTop
mouseup
mousedown
mousemove mouseover
[HTMLElement].offsetLeft
mouseout
To do the drag, basically, the goal is to keep the relative distance between the DIV frame and the mouse unchanged. when the mouse is moving. Spring semester CSC4140 – Open-Source 2008-2009
Software Project Development
Page 4
Widgets • You’d like to drag-and-drop the widgets. But, how?
Events on mouse action:
When the mouseup event is detected, the DIV should be dropped.
mouseup
mousedown
mousemove
It is easy to do…remove the event listeners!
mouseover mouseout
Widgets • You’d like to drag-and-drop the widgets. But, how?
Events on mouse action:
When the mouseup event is detected, the DIV should be dropped.
mouseup
mousedown
mousemove
It is easy to do…remove the event listeners!
mouseover mouseout
Spring semester 2008-2009
CSC4140 – Open-Source Software Project Development
Page 5
Widgets Register the mousedown event for the target DIV
Memorize the relative distance
When the mouse is click on the target DIV…
When the mouse is moving…
When the mouse is released… Spring semester 2008-2009
Register the mouseup and the mousemove events
Uphold the memorized the relative distance by changing the position of the DIV.
Unregister the mouseup and the mousemove events.
CSC4140 – Open-Source Software Project Development
Page 6
Code your script in a better way… • Usually, it’d be perfect to have the following thing… Just like #include <......> in C.
<script language=JavaScript src=HTTP.js> <script language=JavaScript> var http = new HTTP(); http.get(“hello.txt”); alert(http.result);
Spring semester 2008-2009
OO-programming…this also implies the possibility of creating more than one connections easily.
CSC4140 – Open-Source Software Project Development
Page 7
Class as a library… • To do this, we need to write a class… Experience sharing
function HTTP() { this.request = new_request(); 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?
Because “this” will become the “XMLHttpRequest” object inside the event handler, not the “HTTP” object. Spring semester 2008-2009
var temp = this; this.asyn_get = function (url) { ...... this.onreadystatechange = function () { if(temp.request.status == 200) ...... }; ...... } CSC4140 – Open-Source Software Project Development
Page 8
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 2008-2009
CSC4140 – Open-Source Software Project Development
Page 9
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 2008-2009
CSC4140 – Open-Source Software Project Development
Page 10
Typing Game The remaining-time bar is realized using setInterval() and DOM scripting.
The word list is on the server side. The PHP program gives up a random word.
Words will be stored in the client side so that the prefetched words can provide a readily-available source of data.
xxx Periodic Read Remote side: gen_word.php
Client Side: index.php Spring semester 2008-2009
CSC4140 – Open-Source Software Project Development
Page 11
Typing Game The game is played using keyboard. So, the keypress event is expected. However, keypress event is only supported by and form elements. So, we use a trick in the implementation…
keypress event xxx
Client Side: index.php Spring semester 2008-2009
CSC4140 – Open-Source Software Project Development
Page 12
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 2008-2009
CSC4140 – Open-Source Software Project Development
Page 13
CSC4140 – Open-Source Software Project Development
Page 5
Widgets Register the mousedown event for the target DIV
Memorize the relative distance
When the mouse is click on the target DIV…
When the mouse is moving…
When the mouse is released… Spring semester 2008-2009
Register the mouseup and the mousemove events
Uphold the memorized the relative distance by changing the position of the DIV.
Unregister the mouseup and the mousemove events.
CSC4140 – Open-Source Software Project Development
Page 6
Code your script in a better way… • Usually, it’d be perfect to have the following thing… Just like #include <......> in C.
<script language=JavaScript src=HTTP.js> <script language=JavaScript> var http = new HTTP(); http.get(“hello.txt”); alert(http.result);
Spring semester 2008-2009
OO-programming…this also implies the possibility of creating more than one connections easily.
CSC4140 – Open-Source Software Project Development
Page 7
Class as a library… • To do this, we need to write a class… Experience sharing
function HTTP() { this.request = new_request(); 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?
Because “this” will become the “XMLHttpRequest” object inside the event handler, not the “HTTP” object. Spring semester 2008-2009
var temp = this; this.asyn_get = function (url) { ...... this.onreadystatechange = function () { if(temp.request.status == 200) ...... }; ...... } CSC4140 – Open-Source Software Project Development
Page 8
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 2008-2009
CSC4140 – Open-Source Software Project Development
Page 9
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 2008-2009
CSC4140 – Open-Source Software Project Development
Page 10
Typing Game The remaining-time bar is realized using setInterval() and DOM scripting.
The word list is on the server side. The PHP program gives up a random word.
Words will be stored in the client side so that the prefetched words can provide a readily-available source of data.
xxx Periodic Read Remote side: gen_word.php
Client Side: index.php Spring semester 2008-2009
CSC4140 – Open-Source Software Project Development
Page 11
Typing Game The game is played using keyboard. So, the keypress event is expected. However, keypress event is only supported by and form elements. So, we use a trick in the implementation…
keypress event xxx
Client Side: index.php Spring semester 2008-2009
CSC4140 – Open-Source Software Project Development
Page 12
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 2008-2009
CSC4140 – Open-Source Software Project Development
Page 13
Related Documents
Ajax Design Patterns
May 2020 3
Design Patterns
June 2020 16
Design Patterns
May 2020 17
Design Patterns
May 2020 17
Design Patterns
November 2019 29