Asynchronous Web Application Processing Jeff Offutt www cs

Asynchronous Web Application Processing Jeff Offutt www. cs. gmu. edu/~offutt/ SWE 432 Design and Implementation of Software for the Web

Synchronous v. asynchronous Synchronous communication requires both parties to be present at the same time examples • Synchronous communication – Phone calls, meetings, sharing meals, electronic chats – Faster, higher bandwidth, fewer misunderstandings Asynchronous communication allows the parties to participate at different times • Asynchronous communication examples – Text messages, email, slack, social media – More flexible, less effort to coordinate 24 September 2021 © Offutt 2

The Web supports both • Fully distributed applications (web apps) can be either synchronous or asynchronous • The request – response cycle is inherently synchronous – Users wait for the server to respond – Users must be involved with all back-end processing • Advantages of synchronous web apps – – Design is much simpler Concurrency only appears with multiple users Synchronous programs are more reliable and more secure Synchronous programs are easier to update and evolve • Disadvantages of synchronous web apps – User experience is constrained – Network lags can impact performance 24 September 2021 © Offutt 3

Web apps started synchronously • For years, web apps were only synchronous • First asynch technology was introduced in 1996 – IE’s iframe had lots of problems • The technologies we use now started in 1999 – XMLHttp. Request – Required support from web browsers • Asynchronous technologies available to most programmers and users in the mid-2000 s – Ajax (Asynchronous Javascript and XML, a collection of technologies) – Google mail, google maps, kayak • First Ajax standard was 2006 24 September 2021 © Offutt 4

Asynchronous technologies • Initial technologies – Front-end: XMLHttp. Request, Ajax, Javascript, XML, CSS, HTML, DOM, … – Back-end: Anything … servers get requests • These were fine for simple apps, but programming was hard • Newer technologies – JSON (wraps around XML) – Client-side programming frameworks and toolkits, mostly built on top of Javascript: React, Prototype, Dojo, Java. Server. Faces, Rails, Jquery, … – New frameworks appear all the time 24 September 2021 © Offutt 5

Ajax concepts • Focus: UI element where the keyboard is currently connected – Example: user clicks inside a text box • Blur: Focus leaves a UI element – Ex: User tabs out of a text box • Event: User does something in the UI – Ex: onkeyup() … User releases a key on the keyboard • Event handler: Software that runs when an event happens – Events can be handled client-side or server-side – Ex: onkeyup … check the character is acceptable – Ex: onblur … send a string to the server • Callback function: Software that runs when server responds 24 September 2021 © Offutt 6

A simple Ajax example • Suggest demonstrates handling an onkeyup event • This is a small, simple example intended to show different pieces are “wired” together – HTML, CSS, JS, server-side software Run the servlet: https: //cs. gmu. edu: 8443/offutt/servlet/Suggest Note textbox: <input type="text" name="txt 1" id="txt 1“ onkeyup="show. Hint(this. value)" /> Servlet source: . . . 432/examples/ajax/Suggest. java Note no action in the form Server handling: . . . /432/examples/ajax/Weak. Suggestion. java Javascript: . . . /432/examples/ajax/clienthint. js Note function show. Hint() xmlhttp. send() sends a request to the server 24 September 2021 © Offutt 7

In-class exercise Ajax and servlet requests The suggest Ajax example calls Weak. Suggestion when the onkeyup event happens What changes would we need to use Weak. Suggestion in a non-Ajax (synchronous) model? You don’t need to write the code, just describe changes in general terms 24 September 2021 © Offutt 8

Ajax request phase • Client communicates to the server with the XMLHttp. Request object – In the Javascript – Ex: var xhr = new XMLHttp. Request(); • Server returns a sequence of notices, or callbacks, to the client (0, 1, 2, 3, 4) – 4 indicates the response is complete – Most apps ignore 0 -3 • The callbacks call the response function – Response function must be registered in onreadystatechange property of the XMLHttp. Request object – Ex: xhr. onreadystatechange = receive. Place; 24 September 2021 © Offutt 9

Ajax requests • The handler then calls the open method of the XMLHttp. Request object • Parameters : – HTTP method (GET or POST) – URL of the response component on the server – A boolean literal to indicate if the request is asynchronous (true) or synchronous (false) – The form data must be attached to the URL if GET is used xhr. open(“GET”, “get. City. State. php? zip=“ + zip, true); • The response component must be on the same server as the original (security) • Request is sent with the send method xhr. send(null); 24 September 2021 © Offutt 10

Ajax server-side • Response component returns data in response to the request from the JS – Any server side technology or language can be used • In a servlet, we implement the do. Get() method and put the response in the response object – We do not need to send an entire HTML page, just a string – No need to call set. Content. Type() 24 September 2021 © Offutt 11

Ajax receiver • When the response component on the server finishes, it 1. invokes the specified callback function 2. sends the response object to the client • The callback function is a JS with no parameters – It needs to access the XMLHttp. Request object • xhr. onreadystatechange = state. Changed; – If the XMLHttp. Request object is global, simultaneous requests and responses can cause concurrency conflicts 24 September 2021 © Offutt 12

In-class exercise Popcorn example Run and study the popcorn example on https: //cs. gmu. edu/~offutt/classes/432/examples/ajax/ 1. 2. 3. 4. 5. 6. Answer the following questions: What event initiates the asynchronous call? What software component is called on the server? What states are represented in the list of zip codes? What is the callback function? Does the asynchronous request make a GET or POST request? What happens if the request is the other type? 24 September 2021 © Offutt 13

What can we return? • These examples return strings – Examples are quite basic to illustrate the fundamental concepts • More generally, server-side components can return many different things – – – Strings Javascript Object Notation (JSON) XHTML XML HTML • In reality, these are all formatted strings—the web runs on strings for robustness and flexibility 24 September 2021 © Offutt 14

Beyond the basics • These examples are quite basic to illustrate the fundamental concepts • Advanced frameworks and libraries abstract away from the basics – Manipulating XMLHttp. Request directly – Manipulating the DOM with return values – Defining the callback method • These frameworks will change, but the fundamentals concepts have been stable for years 24 September 2021 © Offutt 15

Ajax security issues • Users can modify JS and HTML – Client-side security checks are only suggestions – Security must be duplicated on the server • Ajax applications have many small server-side programs, increasing the attack surface of the entire application • Servers that provide JS as a response open themselves up to cross-site scripting attacks 24 September 2021 © Offutt 16

Asynchronous summary • Asynchronous interaction provides for a much richer user experience • Ajax – Despite initial concerns, performance is extraordinary – Leveraging existing technologies was brilliant • Any server-side software technology can be used – Adding Ajax capability is fairly simple—the interesting part is imagining what we can do with it – Puts more emphasis on knowing Javascript • Inventors continue to develop new ideas for programming asynchronously – Eventually we will get a better model that everyone uses 24 September 2021 © Offutt 17