Client-side Web Engineering From HTML to AJAX

Size: px

Start display at page:

Download "Client-side Web Engineering From HTML to AJAX"

Opal Baldwin
8 years ago
Views:

1 Client-side Web Engineering From HTML to AJAX SWE 642, Spring 2008 Nick Duan 1 What is Client-side Engineering? The concepts, tools and techniques for creating standard web browser and browser extensions HTML/XHTML/DHTML, CCS, JavaScript (including AJAX), ActiveXScript, etc. Plug-ins: Adobe Flash, QuickTime, etc. Java Applet running inside the browser Tools and techniques for creating nonbrowser based client applications Standalone RSS Reader, Google Desktop, Java WebStart, J2EE web client applications, etc. Emphasis: Dynamic browser-based web applications January 23, 2008 Nick Duan 2 1

ActiveXScript, etc. Plug-ins: Adobe Flash, QuickTime, etc.

2 HTML as a presentation language HTML serves two purposes Collecting user input to server (HTML Form) Formatting and presenting of data content from server (the rest of HTML) Basic Web browser functions HTTP client responsible for manage communications between client and server HTML parser responsible for converting textual string to graphical objects (e.g. VBControl in Visual Basic, or Swing object in Java) HTML graphic engine responsible for rending the graphic objects January 23, 2008 Nick Duan 3 Converting HTML text into Document Objects Text stream <html> <head> <title> <body> </body> </html> HTML Parser Document Objects document image form area input button text Graphic engine Document objects are programming constructs defined in the same containment hierarchy as the HTML structure W3C standard: Document Object Model (DOM) for HTML and XML) January 23, 2008 Nick Duan 4 2

communications between client and server HTML parser responsible for converting

3 What is JavaScript? JavaScript is not Java. Invented by Netscape in mid 90s. The latest version is 1.6 JavaScript is a scripting language, initially designed to support user interactions with document objects Provide APIs to access and manipulate document objects. Now a standard supported by all major browser vendors Embedded in HTML pages, extensible to include userspecified functions and libraries Interpreted as the page is loaded Save time and bandwidth for simple manipulations (Data validation, simple math and other functions) A JavaScript program is embedded in a single HTML page, and is executed within the browser when that page is rendered It is not strong-typed, but is case-sensitive. January 23, 2008 Nick Duan 5 JavaScript Example <HTML> <HEAD> <TITLE>Calculator Example</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <H1>Calculator Example</H2> <TABLE> <TR> <TD><input type=text size=4 value=12 name="a"> </TD> A JavaScript program is defined as a set of functions within the <script> element embedded in the <head> element of the same HTML page Invocation of JavaScript functions are either during loading the page or via user events generated in an HTML form. Most DOM objects contains one or more event handlers <TD width=30><input type="button" value=" + " onclick="a_plus_b(this.form)"> <input type="button" value=" - " size="20" onclick="a_minus_b(this.form)"> January 23, 2008 Nick Duan 6 3

Now a standard supported by all major browser vendors Embedded in HTML pages, extensible to include userspecified functions and libraries Interpreted as the page is loaded Save time and bandwidth for

4 JavaScript as an OO language Standard global objects Array, Boolean, Date, Error, Number, Object, String, Each has its own properties and methods Global functions Object constructors, eval, decodeurl, encodeurl, parseint, Statements if.. else, for, while, do.. while, function, Operators +, -, *, /, ++, --,, &, >>, <<,. January 23, 2008 Nick Duan 7 The JavaScript object hierarchy Standard Global Objects Object BOM Objects Array String Math Error Window Navigator Location History document Frame Plugin MineType form link anchor area image DOM Objects textarea text button password checkbox select January 23, 2008 Nick Duan 8 4

. while, function, Operators +, -, *, /, ++, --,, &, >>, <<,.

5 Accessing DOM objects Use document as the default document of the HTML page (since one document object per page) Define the first hyperlink in the HTML page <A href= next.html name = next >next</a> Access the link object via the document object as a property document.links[0].onclick = verify; Same as Note: document.links[ next ] is an invalid expression <A href= next.html name = next onclick= verify(); >next</a> Since the initial HTML construct is fixed, you should be able to access any DOM object via the form document.x.y.z Dynamicity: to obtain/change values of the objects, or add or remove objects of the page January 23, 2008 Nick Duan 9 JavaScript Applications Two major purposes: I. Build HTML dynamically when page is loaded II. Monitor user events and take action Classes of applications 1. Customizing web pages 2. Making web pages more dynamic 3. Validating user input in HTML forms 4. Manipulating cookies 5. Interacting with frames 6. Create Asynchronous JavaScript and XML applications (AJAX) January 23, 2008 Nick Duan 10 5

html name = next onclick= verify(); >next</a> Since the initial HTML construct is fixed, you should be able to access any DOM object via the form document.x.y.z Dynamicity: to obtain/change values of the objects, or add or remove objects of the page January 23, 2008 Nick Duan 9 JavaScript Applications Two major purposes: I.

6 What is AJAX A suite of development technique for creating fine-tuned interactive web applications at the document component level (instead of a the page level) The term was introduced by Jesse James Garrett in early 2005, but the underlying technologies are much older: New JavaScript object - XMLHttpRequest (initially invented by Microsoft in IE5, now a standard of W3C) XML (used as the data transfer format) DOM, CSS, etc. January 23, 2008 Nick Duan 11 Web Client Converting HTML text into Document Objects HTML Page with JavaScript Program document XMLHttpRequest Document Objects XML or other structure Web Server image form area input button text HTML Web Server XMLHttpRequest is able to make remote connections to a different web server. It can be considered as an embedded web client XML (HTML as being a subset of XML) is primarily used as the payload format for XMLHttpRequest January 23, 2008 Nick Duan 12 6

7 The XMLHttpRequest Object Event Handler: onreadystatechange; State constants: UNSENT = 0; OPENED = 1; HEADERS_RECEIVED = 2; LOADING = 3; DONE = 4; Read-only Attribute: readystate responsetext responsexml status statustext Methods open (in DOMString method, in DOMString url); open (in DOMString method, in DOMString url, in boolean async); open (in DOMString method, in DOMString url, in boolean async, in DOMString user); open (in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password); setrequestheader (in DOMString header, in DOMString value); send(); send(in DOMString data); send(in Document data); abort(); getallresponseheaders(); getresponseheader(in DOMString header);; January 23, 2008 Nick Duan 13 AJAX Example function AjaxRequest() { var requestobj; if (window.xmlhttprequest) { requestobj = new XMLHttpRequest(); else { requestobj = new ActiveXObject("Microsoft.XMLHTTP"); requestobj.onreadystatechange = function() { if (requestobj.readystate == 4) { if (requestobj.status == 200) { var data = requestobj.responsexml; document.textarea[0].value=data; var url = ; requestobj.open( GET, url, true); Compatibility Test with older version of IE Inline Callback Function for the Request Object January 23, 2008 Nick Duan 14 7

boolean async, in DOMString user); open (in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password); setrequestheader (in DOMString header, in DOMString

8 Putting it together <html> <head> <script language= javascript > function AjaxRequest() {.. </script> </head> <body> <textarea rows="20" cols= 40"> <form> <input type= button value= GetText onclick= AjaxReqest() > </form> </body> January 23, 2008 Nick Duan 15 Leading the Wave of Web 2.0 AJAX is a convenient way to create Rich Client Applications Building AJAX through frameworks (Widgets and server site components for rapid web development) DOJO JaxBe Google Web Toolkit (GWT) Direct Web Remoting (DWR) Ajax JSP Tag Library AJAX Framework for Java and.net Main techniques behind Data Mash-ups in Web 2.0 Customized API on top of the XMLHttpRequest API GoogleMaps, MicroSoft Maps, Yahoo Pipes, etc. January 23, 2008 Nick Duan 16 8

9 HTML Specs Online References DOM Specs JavaScript Reference and Tutorials 1.5_Reference AJAX References January 23, 2008 Nick Duan 17 Summary Client-side engineering is moving from simple HTML page design to more robust rich client applications as higher bandwidth becomes available The development of rich client applications request the use of a combination of client-side techniques, including DOM/XTML, CSS, JavaScript, AJAX, etc. JavaScript provide a dynamic and programmatic way to manipulate web page component. It is the de-facto standard supported by all major browser vendors. AJAX applications, based on the use of XMLHttpRequest object, have the advantage of interacting with remote services at the page component level, enabling partial update of web pages and data mash-ups from multiple data sources at the client side January 23, 2008 Nick Duan 18 9

Nick Duan 17 Summary Client-side engineering is moving from simple HTML page design to more robust rich client applications as higher bandwidth becomes available The development of rich client

10 Quiz What is the syntax in JavaScript for getting the value of the first input field of an HTML page? Create a simple JavaScript program that ensures an input field value to be numeric Create an AJAX program that sends a text message to a server What are the design considerations for creating an AJAX application? January 23, 2008 Nick Duan 19 10

Create a simple JavaScript program that ensures an input field value to be numeric

It is highly recommended that you are familiar with HTML and JavaScript before attempting this tutorial.

It is highly recommended that you are familiar with HTML and JavaScript before attempting this tutorial. About the Tutorial AJAX is a web development technique for creating interactive web applications. If you know JavaScript, HTML, CSS, and XML, then you need to spend just one hour to start with AJAX. Audience