Client-Side Web Programming (Part 2) Robert M. Dondero, Ph.D. Princeton University

Transcription

1 Client-Side Web Programming (Part 2) Robert M. Dondero, Ph.D. Princeton University 1

2 Objectives You will learn about: Client-side web programming, via... Multithreaded Java Applets AJAX 2

3 Part 1: Preliminary Note 3

4 Preliminary Note Each Pennypack application can be expressed as a single page... 4

5 PennypackPythonSingle App See PennypackPythonSingle application book.py, database.py, common.py index.html search.cgi Merges searchform.cgi, searchform.py, searchresults.cgi, searchresults.py 5

6 Other PennypackXXXSingle Apps See PennypackJavaSingle application See PennypackPhpSingle application See PennypackJspSingle application Similar (Handouts not provided) (Code is available via Web pages) 6

7 "Single Page" App Assessment Cons: Pro: In the context of this course... Maybe less understandable to programmer Doesn't illustrate state handling Doesn't illustrate A&A as well In the broader context... User might prefer 7

8 A More Dynamic Pennypack Wouldn't it be nice... If Pennypack application could refresh book list with each user keystroke User need not click "Submit" button (Recall new versions of Google search page) Approaches: (Multithreaded) Java Applet AJAX 8

9 Part 2: Multithreaded Java Applets 9

10 PennypackApplet Application See PennypackApplet application book.py, database.py search.html SearchApplet.java searchresults.cgi Uses URL object to contact web server Written in Python (arbitrary choice) Generates plain text reply But the server shouldn't be concerned with presentation!... 10

11 PennypackAppletXml Application See PennypackAppletXml application book.py, database.py search.html searchresults.cgi Generates XML reply Could create DOM, then XML (overkill) SearchApplet.java Formats XML received from server Use of XML separates content and presentation But what if the server is slow?... 11

12 PennypackAppletXmlMult App See PennypackAppletXmlMult application book.py, database.py search.html SearchApplet.java searchresults.cgi Some notes... 12

13 PennypackAppletMult Application SearchApplet.java Multithreaded One thread handles event loop Other threads handle page fetching Still not perfect Completion order of threads is unpredictable 13

14 Part 3: AJAX 14

15 AJAX AJAX: Asynchronous JavaScript and XML Let's consider each part of the title... 15

16 AJAX "JavaScript" AJAX is accomplished via function calls embedded in JavaScript code "Asynchronous" Multithreaded JavaScript code registers callback function Browser sends request to server Browser can do other work Callback from server interrupts browser 16

17 AJAX "XML" Data communicated from server to callback function can be (but need not be) an XML doc (AJA"X" is a misnomer) AJAX parses XML doc to generate DOM JavaScript code accesses DOM 17

18 PennypackAjax App See PennypackAjax application book.py, database.py index.html search.html searchresults.cgi Some notes... 18

19 PennypackAjax App search.html Contains AJAX code Note code to handle differences among browsers Does not use XML searchresults.cgi Generates plain text reply Completion order of threads is unpredictable Use messageid to display results of last query only Imperfect: How to protect critical section? 19

20 PennypackAjax App But the server shouldn't be concerned with presentation!...

21 PennypackAjaxXml App See PennypackAjaxXml application book.py, database.py index.html search.html searchresults.cgi Some notes... 21

22 PennypackAjaxXml App searchresults.cgi Generates XML reply Could create DOM, then XML (overkill) search.html AJAX parses XML JavaScript accesses DOM Use of XML separates content and presentation Imperfect 22

23 PennypackAjaxXml App But XML isn't the only choice...

24 PennypackAjaxJson App See PennypackAjaxJson application book.py, database.py index.html search.html searchresults.cgi Some notes... 24

25 PennypackAjaxJson App searchresults.cgi Generates JSON reply search.html JavaScript parses JSON to produce JavaScript data structure JavaScript traverses data structure Use of JSON separates content and presentation Imperfect 25

26 AJAX Success Stories Google Suggest Built into Google Maps maps.google.com Google Docs docs.google.com Google gmail mail.google.com 26

27 Summary We have covered: Client-side web programming, via... Multithreaded Java Applets AJAX 27