Browser As the New OS Disadvantages of Web
Total Page：16
File Type：pdf, Size：1020Kb
Browser As The New OS CS520 Web Programming Application can be used from anywhere Introduction to Ajax Easy application distribution and deployment Greatly simplifies system administration Chengyu Sun No software to download, install, and California State University, Los Angeles update Centralized data management So why it didn’t happen?? Disadvantages of Web Applications Interactivity Issues Usually requires high bandwidth Conventional GUI application Storing data remotely Rich event model Responsive Privacy No network delay Reliability Partial redraw Limited number of GUI components Web application Compared to, e.g. Simple request-response model http://java.sun.com/docs/books/tutorial/ui/feature Not so responsive s/compWin.html Send request, wait for response Interactivity issues Full page refresh HTML Event Models JavaScript HTML 4 Event Model Interpreted language HTML 4.01 Specification - Originally developed by Netscape http://www.w3.org/TR/REC- html40/interact/scripts.html#h-18.2.3 Syntax is similar to Java Limited but widely supported Web Server Standard Event Model DOM Level 2 HTML Specification - http://www.w3.org/TR/DOM-Level-2- Client-side Core Server-side Events/events.html Browser specific event models Browser 1 Core JavaScript Client-Side JavaScript Mainly covers language syntax, which is Embed JavsScript in HTML kind of similar to Java <script> Global Object type=“text/javascript” language=“JavaScript” Created by a JavaScript interpreter src=“path_to_script_file” Global variables and global methods are simply variables and methods of this object Run inside a browser Window is the global object Example: Event Handling Events and Event Handler j1.html Events Uses X Library from http://cross- onfocus, onblur, onkeypress, onkeydown, browser.com/ onkeyup, onclick, ondbclick, onmousedown, onmouseup, Handles events onmousemove, onmouseover … Modifies the HTML document Specify event handler <element event=“code”> For example: <button onclick="clickHandler();">click</button> Document Object Model (DOM) An HTML Document Representing documents as objects so <html> they can be manipulated in a <head><title>JavaScript Example</title></head> programming language. <body> <h1>JavaScript Example</h1> <p>Some content.</p> </body> </html> 2 DOM Representation Nodes document Document HTMLDocument Text <html> CharacterData Comment Node <head> <body> Attribute <title> <h1> <p> Element HTMLElement “JavaScript Example” “JavaScript Example” “Some content.” Manipulate a Document Find Elements Find Elements document.getElementById() Modify Elements document.getElementsByName() Create Elements document.getElementsByTagName() Modify Elements ... ... Modify Elements HTMLElement properites and methods node IE setAttribute(), removeAttribute() innerHTML appendChild(), removeChild() innerText insertAdjacentHTML() insertBefore(), replaceChild() insertAdjacentText() Netscape/Mozilla innerHTML Element-specific 3 Example: Document Create Elements Manipulation document j2.html createElement() Read and display the text input createTextNode() Display “Hello <name>”?? Add text input to table?? Communicate with Server XMLHttpRequest - Properties The request-response model is still a onreadystatechange responseBody limiting factor in user interactivity readyState responseStream 0 – uninitialized Solution: XMLHttpRequest responseText 1 – loading responseXML A JavaScript object 2 – loaded Send HTTP request 3 – interactive Parse XML response 4 – complete Response can be handled asynchronously status statusText XMLHttpRequest - Methods An XMLHttpRequest Example abort() a1.html getAllResponseHeaders() A client scripts sends an XMLHttpRequest getResponseHeader( header ) A servlet responses with an XML message open( method, url, asyncFlag, username, When the message arrives on the client, a password ) callback function is invoked to update the asyncFlag, username, password are optional document send( messageBody ) setRequestHeader( name, value ) 4 About the Example So What is Ajax? clickHandler() Asynchronous JavaScript and XML newXMLHttpRequest() http://www.adaptivepath.com/ideas/essays /archives/000385.php updateDocument() JavaScript + XMLHttpRequest getReadyStateHandler() Characteristics of Ajax Non-blocking – the server response is handled asynchronously with a callback function Partial page update using JavaScript AJAX Frameworks and More About AJAX Libraries XMLHttpRequest used to be an IE http://ajaxpatterns.org/Ajax_Frameworks specific feature that received little attention It’s all started by Google Maps Vs. Yahoo Maps (The Old Version) The beginning of “Web 2.0” (or 3.0) More Widgets, Less JavaScript More Ajax Examples Simplifies XMLHttpRequest creation and a2.html - a Taconite example response handling Simplifies request creation E.g. X Library, Taconite AJAX widgets libraries Response generated by JSP E.g. Ajax JSP Tag Library, YUI No JavaScript required to update page Full-fledged web development frameworks CSNS E.g. ZK, GWT Toggle file public AJAX widgets for existing web development frameworks Add section E.g. ASP, JSF 5 Readings AJAX:Getting Started - http://developer.mozilla.org/en/docs/AJAX:Ge tting_Started Mastering AJAX, Part 1-3 - http://www- 128.ibm.com/developerworks/views/web/libra ryview.jsp?search_by=Mastering+Ajax Taconite Documentation - http://taconite.sourceforge.net/ 6.