CS 5220 Advanced Topics in Web Programming Asynchronous

CS 5220 Advanced Topics in Web Programming Asynchronous Java. Script and XML (AJAX) Chengyu Sun California State University, Los Angeles

Improve Responsiveness of Web Applications Improve user experience n n Interactive Responsive Reduce server workload Handle input events Implement as much functionality on the client-side as possible Hide the inevitable communication overhead from the user

Communicate with Server The synchronous request-response model is still a limiting factor in responsiveness Solution: XMLHttp. Request n A Java. Script object w Send request and receive response in Java. Script n Response can be handled asynchronously w Do not need to wait for the response

Understand Asynchronous … Synchronous Asynchronous send( request ); // wait for response // don’t wait for response process( response ); // do other things … What’s the problem? ? What’s the solution? ?

… Understand Asynchronous // callback function foo( response ) { process( response ); } // set a callback function // which will be called // when the response comes // back … … Same as handling events like click event in GUI programming. send( request ); // do other things …

An XMLHttp. Request Example number 1. html n n n A client scripts sends an XMLHttp. Request A server program responds with a random number When the message arrives on the client, a callback function is invoked to update the document

About the Example click. Handler() new. XMLHttp. Request() update. Document() get. Ready. State. Handler()

XMLHttp. Request - Properties onreadystatechange ready. State n n n 0 1 2 3 4 – – – uninitialized loading loaded interactive complete status. Text response. Body response. Stream response. Text response. XML

XMLHttp. Request - Methods abort() get. All. Response. Headers() get. Response. Header( header ) open( method, url, async. Flag, username, password ) n async. Flag, username, password are optional send( message. Body ) set. Request. Header( name, value )

So What is AJAX? Asynchronous Java. Script and XML n n http: //adaptivepath. org/ideas/ajax-newapproach-web-applications/ Java. Script + XMLHttp. Request Characteristics of AJAX n n Non-blocking – the server response is handled asynchronously with a callback function Partial page update using Java. Script

More About AJAX XMLHttp. Request used to be an IE specific feature that received little attention It’s all started by Google Maps The beginning of “Web 2. 0”

Key Elements of an AJAX Operation Client Event handler n n n Create a XMLHttp. Request Attach a callback function Send the request Callback function n n Process the response Update the HTML Page Server Process the request Send back a response

Problems of Plain Java. Script + XMLHttp. Request Each browser has their own Java. Script implementation n Code that works on some browsers may not work on others Lack of pre-made GUI components Implementing AJAX operations is quite tedious

j. Query To The Rescue number 2. html n n http: //api. jquery. com/category/ajax/ $. ajax() w URL can be specified as an argument or as a field of the settings object w success callback function will be called if the request is successful (i. e. response status code 200)

More About settings Data Fields method data process. Data content. Type data. Type context Callback Functions success error complete status. Code

Send Data to Server data is an object in most cases, and by default j. Query encodes data into a query string To send data in other format n n n Set process. Data to false Set the appropriate content. Type, e. g. application/json Encode the data, e. g. JSON. stringify(obj)

Receive Data from Server j. Query can usually guess the correct data format for the response data. Type explicitly specifies the response data format data. Type also sets Accept header

More AJAX Examples: CRUD User Management n n View Delete Add Edit