Browse DevX
Sign up for e-mail newsletters from DevX


SOA: Refactoring Mainframe Applications into Dynamic Web Applications, Part 2 : Page 2

By refactoring your mainframe applications into Web services, you separate presentation from logic, and gain the ability to reuse mainframe data in Web applications. The second part of this two-part article completes the refactoring by showing you how to build a browser front-end that uses the XMLHttpRequest object to query the mainframe services exposed through the new Web interface described in Part 1.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Initiating a Request to the Server
When users click the Submit Query button on the form in Figure 2, the JavaScript function invokes the callService function, which makes a request to the server via the XMLHttpRequest object. I'll discuss the XMLHttpRequest object in more detail below, but first, observe the HTML form:

<form name="ServiceRequestForm" method="POST" onSubmit="return false"> <table> <tr> <td> <textarea name="result" id="result" COLS="40" ROWS="8"> </textarea> </td> <td> <textarea name="users" id="users" COLS="20" ROWS="8"> </textarea> </td> </tr> <tr> <td colspan="2"> <input name="submit" id="submit" type="submit" onclick="callService(" + "'services?ServiceName=' + 'TestUserAccountService&ServiceParams=');"> <input name="reset" id="reset" type="reset" onclick="resetFields();"> </td> </tr> </table> </form>

Notice that the code invokes the JavaScript function callService when the user presses the Submit button. This function makes a request to the FrontController URL via the XMLHttpRequest object. The callService function is as follows:

var httpObj; var isWorking = false; function callService(url) { if (!isWorking) { httpObj.open("GET", url, true); try { httpObj.setRequestHeader("Content-type", "text/plain"); } catch(e) { // setRequestHeader not in some Opera versions } isWorking = true; httpObj.onreadystatechange = handleServiceResponse; httpObj.send(null); return true; } }

The open method of the XMLHttpRequest object in the preceding function takes three parameters:

  1. A string defining the HTTP method (GET, POST, etc.) to call.
  2. The URL to which to direct the call.
  3. A Boolean that controls whether the call should be made synchronously or asynchronously.
The callService function handles duties for object creation, event handler assignment, and submission of an HTTP GET request via the XMLHttpRequest's open method. The callService function assumes that the global variable httpObj has been previously instantiated and that a JavaScript callback function named handleServiceResponse exists that will handle changes to the state of the XMLHttpRequest object.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date