Table of Contents. 1. A Quick Overview of Web Development...1 EVALUATION COPY

Transcription

1 Table of Contents Table of Contents 1. A Quick Overview of Web Development...1 Client-side Programming...1 HTML...1 Cascading Style Sheets...1 JavaScript...1 Dynamic HTML...1 Ajax...1 Adobe Flash...2 Server-side Programming...2 Perl...2 ColdFusion...2 Active Server Pages...3 Java EE...3 ASP.NET...3 PHP...4 Ruby on Rails Intro to Ajax and the Node.js Server...5 The Purpose of Ajax...5 Traditional Web Application...5 JavaScript on the Server Side?...8 Why Node.js?...9 Installing Node.js...9 Running Node.js...9 A First Node.js Application & Server...10 An Ajax Web Application...13 Exercise 1: Adding a New Route to a Node.js Application Ajax Basics...23 The XMLHttpRequest Object...23 Using an XMLHttpRequest Object...24 Handling the Response...27 Exercise 2: Ajax using the POST method...32 The Callback Function...36 Exercise 3: Displaying and Updating Records...39 Version: Printed: i

2 Table of Contents 4. jquery...49 jquery: A JavaScript Library...49 About jquery...49 jquery Basics...49 Ajax with jquery...52 jquery's Ajax-Related Methods...54 Convenience Methods...61 $.fn.load...62 Exercise 4: Displaying Customer List in a Table with jquery Passing Data...71 XML...71 Creating an addchild() Function...77 Exercise 5: Using addchild()...80 Dynamic Tables...85 Exercise 6: Handling responsexml...92 JSON...99 Review of Object Literals...99 Arrays...99 Objects...99 Arrays in Objects...99 Objects in Arrays Back to JSON JSON Syntax JSON Parsers Exercise 7: Using JSON JSON Advantages and Disadvantages Ajax Applications Login Form Quick Lookup Form Exercise 8: Creating a Simple Lookup Form Preloaded Data Ajax Slideshow Navigable Tables Exercise 9: Create Navigable Table Rows More Ajax Applications Inline Editing The contenteditable Attribute Exercise 10: Using contenteditable for Inline Editing Detailed Information on Demand Autologout Autocompletion ii Copyright 2014 Webucator. All rights reserved.

3 Table of Contents 8. CORS/JSONP CORS/JSONP: Accessing Remote Sites CORS Exercise 11: Retrieving Country Info from GeoNames via CORS JSONP Exercise 12: Retrieving State Names from Yahoo! with JSONP CORS Vs. JSONP Differences Version: Printed: iii

4

5 A Quick Overview of Web Development 1. A Quick Overview of Web Development 1.1 In this lesson, you will learn About client-side web development languages. 2. About server-side web development languages. Web development involves a combination of client-side programming and server-side programming. Client-side Programming Client-side programming involves writing code that is interpreted by a browser such as Internet Explorer or Mozilla Firefox or by any other web client such as a cell phone. The most common languages and technologies used in client-side programming are HTML, JavaScript, Cascading Style Sheets (CSS), and Adobe Flash. HTML HyperText Markup Language (HTML) is the language behind most web pages. The language is made up of elements that describe the structure and format of the content on a web page. Cascading Style Sheets Cascading Style Sheets (CSS) is used in HTML pages to separate formatting and layout from content. Rules defining color, size, positioning and other display aspects of elements are defined in the HTML page or in linked CSS pages. JavaScript 1 JavaScript is used to make HTML pages more dynamic and interactive. It can be used to validate forms, pop up new windows, and create dynamic effects such as dropdown menus and image rollovers. Dynamic HTML Dynamic HTML is not a language in and of itself, but rather refers to code that uses JavaScript to manipulate CSS properties on the fly. 1. The word "JavaScript" is a proprietary name for Netscape's version of ECMAScript. Microsoft's version of this language is called JScript. Version: Printed: Page 1 of 200

6 A Quick Overview of Web Development Ajax The term Ajax was originally a pseudo-acronym for "Asynchronous JavaScript And XML," 2 but is now used much more broadly to cover all methods of communicating with a server using JavaScript. The main purpose of Ajax is to provide a simple and standard means for a web page to communicate with the server without a complete page refresh. Adobe Flash At the time of this writing, according to Adobe's website, more than 97% of computers connected to the internet have Flash Player installed. The Flash Player is a plug-in to Internet Explorer and other web browsers. It enables browsers to display dynamic graphical web pages that can be visually more fluid than pages that are built with Dynamic HTML. Flash pages are called movies and they are created using special software (also called Flash). ActionScript, a language similar to JavaScript, is used to manipulate Flash objects to make movies more interactive. At the time of this writing, designers are either moving to JavaScript or converting existing Flash videos to HTML5. However, converting is a challenge because not all features of Flash can be converted. Tools to solve this issue are currently being introduced by Adobe (with Wallaby) and Google (with Swiffy) and others. 1.2 Server-side Programming Server-side programming involves writing code that connects web pages with databases, XML pages, servers, file systems and other systems and software accessible from the web server. The most common server-side languages and programming frameworks are Perl, ColdFusion, Active Server Pages, Java (in many flavors), ASP.NET and PHP. Perl Perl was the first server-side language to become popular in web development. Originally derived from C, its relative simplicity and strengths in file and text manipulation and the fact that it is open source made it a good choice for writing CGI scripts. Although Perl is still widely used, it is not as popular a choice for new web projects as some of the other server-side languages discussed below. 2. Ajax: A New Approach to Web Applications - Page 2 of 200 Copyright 2014 Webucator. All rights reserved.

7 ColdFusion ColdFusion, created by Allaire (now owned by Adobe), is arguably the simplest of all server-side languages. It is tag-based, which makes it look a lot like HTML and easier for client-side programmers to understand than some of the other choices. Because of the relative ease with which it is written, ColdFusion is sometimes assumed not to be so powerful. In fact, ColdFusion code is compiled to Java bytecode, which means the pages run quickly. Web developers can accomplish virtually any required task using the ColdFusion Markup Language (CFML). However, as ColdFusion can easily be integrated with Java applications, developers have the choice of using Java to extend ColdFusion applications. Active Server Pages Microsoft Active Server Pages (ASP) is a framework that allows developers to write server-side pages in many scripting languages; however, VBScript and JScript are the only commonly used choices. ASP became popular quickly and sites with pages ending in.asp are now all over the web. It is not as simple as ColdFusion, but it has the huge advantage of being built in to Microsoft Internet Information Server (IIS). Although still commonly used, ASP has been replaced by Microsoft with ASP.NET, an architecture that is much more similar to Java's than to traditional ASP's. Java EE Java EE is used in large web projects. With its power and robustness comes a steep learning curve. Java EE is defined by its specification ( cle.com/javaee/) and API ( A Java Application Server (Java AS) manages servlets, JavaServer Pages (JSP), Web Services, and Enterprise JavaBeans (EJB). Java EE also includes a number of other APIs commonly linked to enterprise application development. JDBC, JPA, , JMS, and XML are some examples. But that's only part of the picture. There are a number of frameworks built on some of these technologies that streamlines the development process further. Hibernate offers most of the object/relational mapping (ORM) without an EJB Container. For this reason it's called a lightweight ORM technology. JavaServer Faces, Struts, and Spring-MVC build on JSP to do away with scriptlets completely, relying on HTML style tags and associated JavaBeans. ASP.NET A Quick Overview of Web Development Microsoft's ASP.NET is not a language, but a framework for writing websites and software. Like ColdFusion and JSP (and unlike traditional ASP) ASP.NET pages are precompiled, so they run faster than traditional ASP pages do. ASP.NET pages Version: Printed: Page 3 of 200

8 A Quick Overview of Web Development can be written in many languages, but the most popular are C# (pronounced C-sharp) and Visual Basic.NET (VB.NET). PHP Like Perl, PHP is open source. It has rapidly become a popular alternative to the proprietary languages such as ColdFusion and ASP.NET. PHP is lightweight, relatively simple to learn and runs on almost all commonly used web servers. A nice feature is that it can be integrated with both Java and COM. Ruby on Rails Wikipedia describes Ruby on Rails as "a web application framework that aims to increase the speed and ease with which database-driven websites can be created and offers skeleton code frameworks (scaffolding) from the outset. Often shortened to Rails, or RoR, Ruby On Rails is an open source project written in the Ruby programming language and applications using the Rails framework are developed using the Model-View-Controller design pattern." Conclusion This lesson has provided a general overview of the different languages and frameworks commonly used in web development Page 4 of 200 Copyright 2014 Webucator. All rights reserved.

9 3. Ajax Basics In this lesson, you will learn How Ajax Works. 2. How to create cross-browser Ajax. 3. How to send data using Head, Get and Post methods. As a way of review, the term AJAX is a pseudo-acronym for "Asynchronous JavaScript And XML," 5 but is now used much more broadly to cover all methods of communicating with a server using JavaScript. Again, Ajax 6 is not always asynchronous and does not always involve XML. 3.1 The XMLHttpRequest Object Later in this course we will look at how using JavaScript libraries like jquery can make working with Ajax quicker and easier. To start, though, it makes sense to review the underlying code to see how the actual Ajax calls and response-handling work. Your work here will make using jquery (or other libraries) easier - and you'll understand what the jquery convenience functions are actually doing. The mechanism for sending data to and retrieving data from the server with Ajax is the XMLHttpRequest object. Until HTML5, the XMLHttpRequest Object wasn't officially part of any common specification; however, all the major browsers have supported it for some time. Later in the course we will use jquery, a JavaScript library, to create Ajax functionality. The HTML5 method is straightforward. It uses a simple XMLHttpRequest() constructor to create the object. 5. Ajax: A New Approach to Web Applications Although it is not uncommon to see the term written in all capital letters (AJAX), it has become standard to write it as Ajax. Version: Printed: Page 23 of 200

10 Code Sample AjaxBasics/Demos/CreateXMLHttpRequest.html <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="lib.js"></script> <script type="text/javascript"> function start() { if (window.xmlhttprequest) { var xmlhttp = new XMLHttpRequest(); document.getelementbyid("content").innerhtml = "<h1>using XMLHttpRequest Object</h1>"; else { var xmlhttp = false; document.getelementbyid("content").innerhtml = "<h1>xmlhttp cannot be created!</h1>"; observeevent(window, "load", function() { var btn = document.getelementbyid("btnstart"); observeevent(btn, "click", start); ); </script> <title>xmlhttprequest - HTML5 Method</title> </head> <body> <button id="btnstart">start</button> <div id="content"></div> </body> </html> Code Explanation This code attempts to create an XMLHttpRequest object using the XMLHttpRequest() constructor. If it succeeds, it writes out "Using XMLHttpRequest Object" to the body of the page. If it fails, it writes out "XMLHttp cannot be created!" Page 24 of 200 Copyright 2014 Webucator. All rights reserved.

11 Using an XMLHttpRequest Object So, now that we have an XMLHttpRequest object created, what do we do with it? We use it to make HTTP requests. To do so, we initialize the object with the open() method, which takes three arguments. XMLHttpRequest open() Method Arguments Argument Description Request Type URL String. Usually POST, GET, or HEAD String. The URL receiving the request. Asynchronous Boolean. Whether the request should be made asynchronously (true) or synchronously (false). A typical open() method call is shown below. xmlhttp.open("get","demo.xml",true); Ajax Basics Request Types Although the HTTP specification identifies several methods of HTTP requests 7, the most commonly supported (and used) methods are GET, POST and HEAD. HEAD The HEAD method is the least commonly used of the three; however, for simple requests, it can be all you need. It simply returns the meta-information contained in the HTTP headers. The call would look like this: xmlhttp.open("head","demo",true); And the response might look like this: Date: Wed, 11 May :46:30 GMT X-Powered-By: ASP.NET Content-Length: 63 Last-Modified: Tue, 10 May :12:27 GMT Server: Microsoft-IIS/7.5 ETag: "712b13346fcc1:0" Content-Type: text/xml Accept-Ranges: bytes The XMLHttpRequest request is sent as follows: 7. Version: Printed: Page 25 of 200

12 xmlhttp.send(null); We'll explain why null is passed in just a moment. GET The GET method is used to send information to the server as part of the URL. The server returns the same header information that the HEAD method returns, but it also returns the body of the message (i.e, the content of the page). Any name-value pairs to be processed by the receiving page should be passed along the querystring. The call would look like this: xmlhttp.open("get","demo?firstname=nat&lastname=dunn",true); The response would be the same as the response shown for the HEAD method followed by the message body, which would typically be simple text, JSON, HTML or XML. Again, the XMLHttpRequest request is sent as follows: xmlhttp.send(null); POST The POST method is used to send information as an enclosed entity. The call would look like this: xmlhttp.open("post","demo",true); The response header is somewhat different in that it specifies that the returned content is not cacheable. Like with GET, the message body would typically be plain text, HTML or XML. The XMLHttpRequest request is sent as follows: xmlhttp.setrequestheader("content-type","application/x-www-form-ur»» lencoded;charset=utf-8"); xmlhttp.send("firstname=nat&lastname=dunn"); As you can see, with POST, we first need to set the content type to "application/x-www-form-urlencoded;charset=utf-8". This tells the server to expect Page 26 of 200 Copyright 2014 Webucator. All rights reserved.

13 form data. In the send method, we include name-value pairs. These name-value pairs are available to the receiving page for processing. Data can be sent in this manner with the HEAD and GET methods, which is why null was passed in the previous examples. Asynchronous vs. Synchronous Requests The asynchronous argument should almost always be set to true. After all, that's the "A" in Ajax. Synchronous calls force the browser to wait for a response from the server before continuing. This leaves the user unable to interact with the browser until the response is complete. Asynchronous requests allow the browser to continue to process code while waiting for a response. Handling the Response When using asynchronous calls, we cannot be sure when the response will come, so we must write code that waits for the response and handles it when it arrives. We do this with a callback function. Callback functions are functions that are triggered by some event. In our case, the event we are looking for is a change in the state of the xmlhttp response. The xmlhttp object's readystate property holds the current state of the response. There are five possible states (0-4), which are described below. Browsers do not necessarily inform you of all states; states 0 and 3 in particular may not appear when you run the demo file. Values of the readystate Property State Description uninitialized loading loaded interactive complete Each change in the readystate is captured by the xmlhttp object's onreadystatechange event handler. We can assign a callback function to this property like this: Version: Printed: Page 27 of 200

14 Code Sample xmlhttp.onreadystatechange = function() { //Do something here This use of an anonymous or unnamed function may be new to you. In JavaScript, functions are first-class objects and can be assigned to variables or properties of other objects. We could also create a named function and assign that function to xmlhttp.onreadystatechange like this: xmlhttp.onreadystatechange = handler; The following sample file illustrates how the readystatechange event is handled. AjaxBasics/Demos/ReadyStateChange.html Lines 1 through 7 Omitted <script type="text/javascript"> function start() { var xmlhttp = new XMLHttpRequest(); var contentdiv = document.getelementbyid("content"); xmlhttp.open("head", "Demo.xml", true); xmlhttp.onreadystatechange = function() { contentdiv.innerhtml += "Ready State: " + xmlhttp.readystate + "<br>"; xmlhttp.send(null); Lines 20 through 31 Omitted Page 28 of 200 Copyright 2014 Webucator. All rights reserved.

15 Code Explanation The output will look something like this. The actual ready states returned will depend on your setup. In practice, before doing anything with the xmlhttp response data, we want to make sure the readystate is complete (4), so we put a condition inside our function to check for this: xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4) { //Do something here Now we're ready to do something with the data returned. Before looking at an example, let's take a look at the properties and methods of the xmlhttp object, so we know what's available to us. Version: Printed: Page 29 of 200

16 XMLHttpRequest Object Properties Property onreadystatechange readystate responsetext responsexml status statustext Description Specifies the callback function to be triggered when the ready state changes. Holds the state of the response. Holds the message body as a string. Holds the message body as an XML object. Holds the status code returned from the server (e.g, 200 for success, 404 for page not found, etc.). Holds the status text returned from the server. XMLHttpRequest Object Methods Method abort() getallresponseheaders() getresponseheader(header) open(method,url,async) send(postdata) setrequestheader(header,value) Description Aborts the xmlhttp request. Retrieves the values of all the HTTP headers as a string. Retrieves the value of the specified HTTP header as a string. Initializes the XMLHttpRequest object. Sends the HTTP request to the server. Specifies the name and value of an HTTP header. A common application is to check the status property to make sure that the request was successful (200) and then to output the message body to a div on the HTML page. The following sample file demonstrates this. To run the demo, first start the Node.js server: 1. Open the command line (on a PC) or terminal (on a Mac), and navigate to the directory AjaxBasics/Demos/. 2. Type npm install. 3. Type npm start to start the Node.js server. With the server started, you can then browse to HttpRequest-Get.html to view the page. Page 30 of 200 Copyright 2014 Webucator. All rights reserved.

17 Code Sample AjaxBasics/Demos/UsingXMLHttpRequest-Get.html Lines 1 through 8 Omitted function start() { var xmlhttp = new XMLHttpRequest(); var contentdiv = document.getelementbyid("content"); xmlhttp.open("get", "Demo?FirstName=Nat&LastName=Dunn", true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { contentdiv.innerhtml = xmlhttp.responsetext; xmlhttp.send(null); Lines 21 through 32 Omitted Code Explanation This page simply "copies" the response text (xmlhttp.responsetext) and "pastes" it into the "Content" div on the page. Version: Printed: Page 31 of 200

18 Exercise 2 10 to 15 minutes Exercise Code Ajax using the POST method In this exercise, you will modify the code from the last demonstration to send data using the POST method. You will need to use the setrequestheader() method to alert the server to expect form data. 1. If needed, stop (by pressing ctrl-c from the command line) any running instance of the Node.js. 2. Navigate to the directory AjaxBasics/Exercises/ in command line. 3. Type npm install from the command line, to install the needed Node.js modules. 4. Type npm start to start the Node.js server. 5. Open AjaxBasics/Exercises/UsingXMLHttpRequest-Post.html in your editor. 6. Modify the code to make the request using the POST method shown earlier (see page 26). 7. Test your solution in a browser by visiting AjaxBasics/Exercises/UsingXMLHttpRequest-Post.html Lines 1 through 6 Omitted <script type="text/javascript"> function start() { var xmlhttp = new XMLHttpRequest(); var contentdiv = document.getelementbyid("content"); xmlhttp.open("get", "Demo?FirstName=Nat&LastName=Dunn", true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { contentdiv.innerhtml = xmlhttp.responsetext; xmlhttp.send(null); observeevent(window, "load", function() { var btn = document.getelementbyid("btnstart"); observeevent(btn, "click", start); ); </script> Lines 26 through 31 Omitted Page 32 of 200 Copyright 2014 Webucator. All rights reserved.

19 *Challenge Write out all the response headers to the end of the same "Content" div. Version: Printed: Page 33 of 200

20 Exercise Solution AjaxBasics/Solutions/UsingXMLHttpRequest-Post.html Lines 1 through 7 Omitted function start() { var xmlhttp = new XMLHttpRequest(); var contentdiv = document.getelementbyid("content"); xmlhttp.open("post", "Demo", true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { contentdiv.innerhtml = xmlhttp.responsetext; xmlhttp.setrequestheader("content-type", "application/x-www-form-ur»» lencoded;charset=utf-8"); xmlhttp.send("firstname=nat&lastname=dunn"); Lines 21 through 32 Omitted Code Explanation We specify "POST" as the method for our Ajax call in xmlhttp.open and, in xmlhttp.setrequestheader specify the MIME type (application/x-www-form-urlencoded) and character encoding (charset=utf-8) of the request we send to the /Demo response route. We pass along two POST variables, FirstName and LastName, with values Nat and Dunn, respectively. Page 34 of 200 Copyright 2014 Webucator. All rights reserved.

21 Challenge Solution AjaxBasics/Solutions/UsingXMLHttpRequest-Post-Challenge.html Lines 1 through 7 Omitted function start() { var xmlhttp = new XMLHttpRequest(); var contentdiv = document.getelementbyid("content"); xmlhttp.open("post", "Demo", true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { contentdiv.innerhtml = xmlhttp.responsetext; var headers = xmlhttp.getallresponseheaders(); contentdiv.innerhtml += headers.replace(/\n/g, "<br>"); xmlhttp.setrequestheader("content-type", "application/x-www-form-ur»» lencoded;charset=utf-8"); xmlhttp.send("firstname=nat&lastname=dunn"); Lines 23 through 34 Omitted Code Explanation We use innerhtml to set the contents of #contentdiv, retrieving the response headers with xmlhttp.getallresponseheaders() and displaying with newlines converted to HTML <br /> tags. Version: Printed: Page 35 of 200

22 3.2 The Callback Function In the demos thus far, we have used anonymous callback functions to hanndle the Ajax response, like so: Anonymous Callback Function xmlhttp.onreadystatechange=function() { //handle response As these anonymous functions are nested within the original function, they have access to the variable set in the original function. That's why we can reuse the xmlhttp and contentdiv variables within the callback function: Callback as Anonymous Function function start() { var xmlhttp = new XMLHttpRequest(); var contentdiv = document.getelementbyid("content"); xmlhttp.open("post", "Demo", true); xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { contentdiv.innerhtml=xmlhttp.responsetext; xmlhttp.setrequestheader("content-type","application/x-www-formurlencoded;charset=utf-8"); xmlhttp.send("firstname=nat&lastname=dunn"); But callback functions don't have to be anonymous or nested. Another way to write this is shown below: Page 36 of 200 Copyright 2014 Webucator. All rights reserved.

23 Callback as Top-Level Function: Global Variables var xmlhttp = new XMLHttpRequest(); var contentdiv = document.getelementbyid("content"); function mycallback() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { contentdiv.innerhtml=xmlhttp.responsetext; The problem with this method is that it uses global variables. This can be problematic as the variables can easily be unintentionally and unexpectedly overwritten. One way around this is to use an anonymous callback function to make the call to the now-pseudo-callback function and pass the necessary variables into it, like this: Callback as Top-Level Function: Passing Variables function start() { xmlhttp.open("post", "Demo", true); xmlhttp.onreadystatechange=mycallback; xmlhttp.setrequestheader("content-type","application/x-www-formurlencoded;charset=utf-8"); xmlhttp.send("firstname=nat&lastname=dunn"); function start() { var xmlhttp = new XMLHttpRequest(); var contentdiv = document.getelementbyid("content"); xmlhttp.open("post", "Demo", true); xmlhttp.onreadystatechange=function() { mycallback(xmlhttp, contentdiv); ; xmlhttp.setrequestheader("content-type","application/x-www-formurlencoded;charset=utf-8"); xmlhttp.send("firstname=nat&lastname=dunn"); function mycallback(xmlhttp, contentdiv) { if (xmlhttp.readystate==4 && xmlhttp.status==200) { contentdiv.innerhtml=xmlhttp.responsetext; Another way to handle it is to nest a named callback function within the original function. As JavaScript functions are objects, they can have their own methods, so you can do the following: Version: Printed: Page 37 of 200

24 Callback as Nested Named Function function start() { var xmlhttp = new XMLHttpRequest(); var contentdiv = document.getelementbyid("content"); xmlhttp.open("post", "Demo", true); xmlhttp.onreadystatechange=mycallback; xmlhttp.setrequestheader("content-type","application/x-www-formurlencoded;charset=utf-8"); xmlhttp.send("firstname=nat&lastname=dunn"); function mycallback() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { contentdiv.innerhtml=xmlhttp.responsetext; Because the callback function is nested within the start() function, it has access to the xmlhttp and contentdiv variables. The only limitation of this method is that the mycallback() function is not callable from outside the start() function. Depending on what you're trying to do, that may or may not be an issue. Page 38 of 200 Copyright 2014 Webucator. All rights reserved.

25 Exercise 3 30 to 40 minutes Displaying and Updating Records In this exercise, you will create a mini-application for displaying and updating employee records. The server-side files are already created and much of the JavaScript is written for you. You will have to finish the Ajax portions of the code. 1. From the command line, navigate to the directory AjaxBasics/Exercises/. 2. Type npm start to start the Node.js server. 3. Note that the code already created for you makes an Ajax call to /EmployeeList. Generated by Node.js, this call returns a list of the employees, as shown below: <ul> <li id="emp1">nancy Davolio</li> <li id="emp2">andrew Fuller</li> <li id="emp3">janet Leverling</li> <li id="emp4">margaret Peacock</li> <li id="emp5">steven Buchanan</li> <li id="emp6">michael Suyama</li> <li id="emp7">robert King</li> <li id="emp8">laura Callahan</li> <li id="emp9">anne Dodsworth</li> </ul> Ajax Basics Notice the ids of the list items are the employee id from the database prefixed with "emp". Version: Printed: Page 39 of 200

26 4. Open AjaxBasics/Exercises/EmployeeAdmin.html for editing. This is where you'll do your work. A. In the getemployeelist() function where the comment is: open an asynchronous XMLHttpRequest using the GET method and the URL passed into the function. When the readystate of the request changes, call the display() function with the appropriate parameters. Send the request. B. In the display() function: Set the innerhtml property of output div to the responsetext of the returned xmlhttp object. Test your solution to this piece by opening AjaxBasics/Exercises/EmployeeAdmin.html in your browser. You should see a list of the employees. If you do not, check your getemployeelist() and display() functions. C. Finish the getemployeeform() function by setting the appropriate content type for submitting form data and sending the request. D. In the updateemployee() function: Write the code leading up to the call to send() method call. When the readystate of the request changes, call the employeeupdated() function. 5. Test your solution in a browser by visiting min.html *Challenge In the employeeupdated() callback function, we currently call getemployeelist() to update the list of employees. This updates the entire list after each change. It would be better to just update the record that was changed. There is no need to make a call to the database to find out which record it was or how it was changed. The client already has that information. See if you can figure out how to remove this unnecessary Ajax call and use pure client-side JavaScript to update the list. Be careful not to update the list until you are sure that the record has been successfully updated in the database. The only file you will need to change is EmployeeAdmin.html. Page 40 of 200 Copyright 2014 Webucator. All rights reserved.

27 Version: Printed: Page 41 of 200

28 Exercise Solution AjaxBasics/Solutions/EmployeeAdmin.html Lines 1 through 8 Omitted function getemployeelist(url) { var xmlhttp = new XMLHttpRequest(); var output = document.getelementbyid("employeelist"); output.innerhtml = "<h2>loading...</h2>"; xmlhttp.open("get", url, true); xmlhttp.onreadystatechange = function() { display(output, xmlhttp); xmlhttp.send(null); function display(output, xmlhttp) { var employees, eid, target, i; if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { output.style.display = "block"; output.innerhtml = xmlhttp.responsetext; if (xmlhttp.responsetext.indexof("failed") == 0) { output.classname = "Warning"; else { employees = output.getelementsbytagname("li"); for (i = 0; i < employees.length; ++i) { observeevent(employees[i], "click", function(e) { target = gettarget(e); eid = target.id.substring(3); getemployeeform("employeeform", eid); ); function getemployeeform(url, eid) { var xmlhttp = new XMLHttpRequest(); var output = document.getelementbyid("formdiv"); var fields, field, value, i; output.innerhtml = "Loading..."; xmlhttp.open("post", url, true); Page 42 of 200 Copyright 2014 Webucator. All rights reserved.

29 xmlhttp.onreadystatechange = function() { display(output, xmlhttp); fields = output.getelementsbytagname("input"); for (i = 0; i < fields.length; ++i) { observeevent(fields[i], "change", function(e) { target = gettarget(e); field = target.name; value = target.value; updateemployee("editemployee", field, value, eid); ); xmlhttp.setrequestheader("content-type", "application/x-www-form-ur»» lencoded;charset=utf-8"); xmlhttp.send("eid=" + eid); function updateemployee(url, field, value, eid) { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("post", url, true); xmlhttp.onreadystatechange = employeeupdated; xmlhttp.setrequestheader("content-type", "application/x-www-form-ur»» lencoded;charset=utf-8"); xmlhttp.send("eid=" + eid + "&field=" + field + "&value=" + value); function employeeupdated() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { var msg = document.getelementbyid("messagediv"); if (xmlhttp.responsetext.indexof("failed") == 0) { msg.classname = "Warning"; msg.innerhtml = xmlhttp.responsetext; else { msg.innerhtml = "Updated!"; getemployeelist('employeelist'); fadeelem(msg, 255, 255, 0, 255, 255, 255); Lines 84 through 97 Omitted Version: Printed: Page 43 of 200

30 Code Explanation Open in your browser to view the solution; be sure to start the Node.js server (by typing npm start from the command line) in the AjaxBasics/Solutions/ directory first. Function getemployeelist, invoked when the page loads, makes an Ajax call to /EmployeeList and invokes function display. If the Ajax calls is successful, then function display displays the returned list of employees in div#employeelist. Also in function display we iterate over each of the bulleted names, listening for clicks. A click on any of the names results in a call to function getemployeeform, passing along the id of the clicked-upon employee. Function getemployeeform, in turn, makes an Ajax request, via the POST method, to /EmployeeForm, displays the returned form, and adds change handlers on each of the fields of the form. As a result of the handlers added in function getemployeeform, a change to any of the employee-form fields invokes function updateemployee which, in turn, makes a POST Ajax request to /EditEmployee, sending along the id of the employee, field name, and field value. The function displays a success or failure message based on the status of the returned results. Page 44 of 200 Copyright 2014 Webucator. All rights reserved.

31 Challenge Solution AjaxBasics/Solutions/EmployeeAdmin-challenge.html Lines 1 through 39 Omitted function getemployeeform(url, eid) { var xmlhttp = new XMLHttpRequest(); var output = document.getelementbyid("formdiv"); var fields, field, value, i, fname, lname; output.innerhtml = "Loading..."; xmlhttp.open("post", url, true); xmlhttp.onreadystatechange = function() { display(output, xmlhttp); fields = output.getelementsbytagname("input"); for (i = 0; i < fields.length; ++i) { observeevent(fields[i], "change", function(e) { target = gettarget(e); field = target.name; value = target.value; fname = target.form.firstname.value; lname = target.form.lastname.value; updateemployee("editemployee", field, value, eid, fname, lname); ); xmlhttp.setrequestheader("content-type", "application/x-www-form-ur»» lencoded;charset=utf-8"); xmlhttp.send("eid=" + eid); function updateemployee(url, field, value, eid, fname, lname) { var xmlhttp = new XMLHttpRequest(); xmlhttp.open("post", url, true); xmlhttp.onreadystatechange = function() { employeeupdated(eid, fname, lname); ; xmlhttp.setrequestheader("content-type", "application/x-www-form-ur»» lencoded;charset=utf-8"); xmlhttp.send("eid=" + eid + "&field=" + field + "&value=" + value); function employeeupdated(eid, fname, lname) { var employee, msg; Version: Printed: Page 45 of 200

32 if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { msg = document.getelementbyid("messagediv"); if (xmlhttp.responsetext.indexof("failed") == 0) { msg.classname = "Warning"; msg.innerhtml = xmlhttp.responsetext; else { msg.innerhtml = "Updated!"; employee = document.getelementbyid("emp" + eid); employee.innerhtml = fname + ' ' + lname; fadeelem(msg, 255, 255, 0, 255, 255, 255); Lines 90 through 104 Omitted Code Explanation Open in your browser to view the solution. In function getemployeeform, we now keep track of the first and last name (from the fields with ids FirstName and LastName, respectively) of each employee. We pass these values as parameters in the call to updateemployee when any of the fields is changed. Function updateemployee works largely as before but, upon successful update of the employee (i.e. a successful Ajax response code), the function now sets the displayed name of the relevant employee in the bulleted list. Page 46 of 200 Copyright 2014 Webucator. All rights reserved.

33 3.3 Conclusion In this lesson, you have learned the basic foundation for creating Ajax applications. Version: Printed: Page 47 of 200

34 Page 48 of 200 Copyright 2014 Webucator. All rights reserved.